The code below will only accept the colors contained in the model. How can it allow for the user to enter one that is not listed in the model ?
<div class="form-group input-group-sm">
#Html.LabelFor(m => m.CarColor, new { #class = "control-label col-md-5" })
<div class="col-md-7">
#Html.DropDownListFor(m => m.CarColor, ViewBag.CarColorList as SelectList })
</div>
</div>
The way that I would do it would to be to use Select2. Select2 is basically an awesome drop down list. The 'Loading Data' example shows you where to start.
Related
I have a partial view, which generates rows dynamically and from where I want to submit the data to the controller. So I am binding the model properties with a list, but on httppost my list is always null.Using form collection I am able to get the data. How can I solve this issue?
<td data-title="Product Name">
<div class="row">
<div class="col-xs-10" style="padding-right:0px;">
<div class="form-group">
#Html.DropDownListFor(model => model._list[Model.id].detail_prod_id, Model._Product, "Please Select Product", new { #class = "chosen-select form-control", #id = "ddlproducts" + Model.id ,#Name= "ddlproducts" +Model.id})
#Html.ValidationMessageFor(model => model._list[Model.id].detail_prod_id, "", new { #class = "text-danger" })
</div>
</div>
<div class="col-xs-2" style="padding-right:25px; padding-left:5px;"><a class="popup-sm fancybox.iframe" href="../pages/add-product.html"><u>Add</u></a></div>
</div>
</td>
Try to put code inside form tag and then try..it may work.
Not sure if this is a MVC or Razor problem. But I can't put a line break in my view. This is the code on the index.cshtml
#using (Html.BeginForm("Create", "Vacant", FormMethod.Post, new { role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary("", new { #class = "text-danger" })
<!--TITLE-->
<div class="form-group">
#Html.LabelFor(m => m.Title, new { #class = "col-md-3 control-label" })
<div class="col-md-12">
#Html.TextBoxFor(m => m.Title, new { #class = "form-control" })
</div>
</div>
<!--DESCRIPTION-->
<div class="form-group">
#Html.LabelFor(m => m.Description, new { #class = "col-md-3 control-label" })
<div class="col-md-10">
#Html.TextAreaFor(m => m.Description, new { #class = "form-control" })
</div>
</div>
<br /> ----> HERE
<!--TABS-->
<div class="form-group">
<div class="col-md-10">
As you can see I put the line break tag before to displayed the third field (Project) in my View.
The View is displayed without any error. However, the line break is not rendered between the 2nd and 3rd fields. Causing those two fields one after another with any space on them.
This is the screenshot
How could I put a line break between those two fields? Is there any #Html helper or Razor code to do that?
Thanks!
Try this
<div style="clear:both;margin-bottom:20px">
<!--TABS-->
<div class="form-group">
You can insert one more Div Between them.
OR
You can decorate the TAB Div with some STYLE like-
<div class="form-group" style="margin-top:20px">
OR
You can insert one more <P /> Between them.
I have the following javascript and input fields within my model.
script type="text/javascript">
function sum() {
var txtFirstNumberValue = document.getElementById('money1').value;
var txtSecondNumberValue = document.getElementById('money2').value;
var txtThirdNumberValue = document.getElementById('money3').value;
var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('Total').value = result;
}
}
</script>
<div class="form-group">
#Html.LabelFor(model => model.Total, "Total", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
<input type="text" id="Total" name="Total" />
#*#Html.EditorFor(model => model.Total)*#
#Html.ValidationMessageFor(model => model.Total)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.money1, "money1", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
#*#Html.EditorFor(model => model.money1)*#
<input type="text" id="money1" onkeyup="sum();" name="money1" />
#Html.ValidationMessageFor(model => model.money1)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.money2, "money2", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
#*#Html.EditorFor(model => model.money2)*#
<input type="text" id="money2" onkeyup="sum();" name="money2" />
#Html.ValidationMessageFor(model => model.money2)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.money3, "money3", new { #class = "control-label col-md-5" })
<div class="col-md-offset-0">
#*#Html.EditorFor(model => model.money3)*#
<input type="text" id="money3" onkeyup="sum();" name="money3" />
#Html.ValidationMessageFor(model => model.money3)
</div>
</div>
This all works fine. When I type a value into the 3 money fields the resulting value appears in the Total field. Within MVC if I click on the details view it shows all four values, however if I click on the edit view all four fields are blank. Question is how do I get the values to appear and remain in edit mode?
Well, for starters your model-bound input fields are commented out:
#*#Html.EditorFor(model => model.money1)*#
In order to get those to work you'd need to un-comment them.
You could just manually populate your markup with the model values, something like this:
<input type="text" id="money1" onkeyup="sum();" name="money1" value="#model.money1" />
That should pre-populate that input with the model's money1 value. Though you're assuming the responsibility of manually implementing anything else that the built-in HTML helpers would provide for you. Unless there's a compelling reason not to use Html.EditorFor() I imagine that would be the better option.
The selected values are not getting posted back when I group my radio buttons,
So, with this the SelectedQuestionId is blank
<div class="row">
<div class="col-md-4">
<div class="form-group">
#Html.HiddenFor(x => x.UserResponses[0].QuestionId)
#Html.RadioButtonFor(x => x.UserResponses[0].SelectedQuestionId, Model.UserResponses[0].QuestionId, new { Name ="selectone"})
#Html.DisplayTextFor(x => x.UserResponses[0].QuestionText)
#Html.HiddenFor(x => x.UserResponses[0].QuestionText)
#Html.HiddenFor(x => x.UserResponses[0].InputType)
#Html.HiddenFor(x => x.UserResponses[0].Points)
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="text-muted">#Html.DisplayTextFor(x => x.UserResponses[0].Points)</span> #Html.LabelFor(x => x.UserResponses[0].Points, new { #class = "text-muted" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
#Html.HiddenFor(x => x.UserResponses[1].QuestionId)
#Html.RadioButtonFor(x => x.UserResponses[1].SelectedQuestionId, Model.UserResponses[1].QuestionId, new { Name = "selectone"})
#Html.DisplayTextFor(x => x.UserResponses[1].QuestionText)
#Html.HiddenFor(x => x.UserResponses[1].QuestionText)
#Html.HiddenFor(x => x.UserResponses[1].InputType)
#Html.HiddenFor(x => x.UserResponses[1].Points)
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="text-muted">#Html.DisplayTextFor(x => x.UserResponses[1].Points)</span> #Html.LabelFor(x => x.UserResponses[1].Points, new { #class = "text-muted" })
</div>
</div>
</div>
But the moment i remove the grouping from the radiobuttonfor then all works well, and the SelectedQuestionId is populated with questionid. So, replacing the RadioButtonFor above with these allow the SelectedQuestionId to be populated when the form is posted.
The code above is based on this question and though I have asked a related question here - this question is entirely separate.
#Html.RadioButtonFor(x => x.UserResponses[0].SelectedQuestionId, Model.UserResponses[0].QuestionId)
#Html.RadioButtonFor(x => x.UserResponses[1].SelectedQuestionId, Model.UserResponses[1].QuestionId)
found a solution to this rather intractable problem.
#Html.RadioButtonFor(x => x.UserResponses[0].SelectedQuestionId, Model.UserResponses[0].QuestionId)
#Html.RadioButtonFor(x => x.UserResponses[1].SelectedQuestionId, Model.UserResponses[1].QuestionId)
with the code above each radiobutton had a unique name during the deserialization process the SelectedQuestionId property would be populated for a given item if it was selected as one would expect. However, for the radiobutton to belong to a group they would need to have the same name attribute and since this was not the case in the above scenario one could select both the radio buttons. Which also meant that with multiple radiobuttons being selcted selectedId property for all the selected radio buttons would be populated with their respective QuestionId.
To get around this one could always write code as so,
#Html.RadioButtonFor(x => x.UserResponses[0].SelectedQuestionId, Model.UserResponses[0].QuestionId, new { Name = "selectone"})
#Html.RadioButtonFor(x => x.UserResponses[1].SelectedQuestionId, Model.UserResponses[1].QuestionId, new { Name = "selectone"})
And, now one gets the ability to select only one radiobutton but then during the deserialization process in the HttpPost method the SelectedQuestionId property for each item in the collection would be null. Obviously, the name of the radiobuttons were now "selectone" and so in the key/value pairing for SelectedQuestionId the value would not be getting populated, in other words the SelectedQuestionId would always be null even for the radio button that was selected.
So, the solution was the following:
#Html.RadioButtonFor(x => x.SelectedId, Model.UserResponses[i].QuestionId)
x.SelectedId lies in the ParentModel, and gets populated with the QuestionId of the question that is selected and since both the radio button share the same name they therefore belong to the same group and hence only one of the radio buttons can be selected.
Suppose this is my view...
<div class="control-group">
#Html.LabelFor(model => model.Title, new { #class = "control-label" })
#Html.ValidationMessageFor(model => model.Title, null, new { #class = "help-inline" })
<div class="controls">
#Html.EditorFor(model => model.Title)
</div>
</div>
In case of error How we can hide the Label and display validation message in place of Label?
Please suggest on this...
You could display the Label only if the ModelState is valid:
<div class="control-group">
#if (this.ViewData.ModelState.IsValid)
{
#Html.LabelFor(model => model.Title, new { #class = "control-label" })
}
#Html.ValidationMessageFor(model => model.Title, null, new { #class = "help-inline" })
<div class="controls">
#Html.EditorFor(model => model.Title)
</div>
</div>
Notice that if you are using client side validation you will also need to hook up to the validate method on the client and toggle the corresponding label visibility as well.
Just to compliment Darin's answer, if you are using client-side validation you will need to do something like
$("#myForm").validate({
invalidHandler: function(event, validator) {
$('.control-label').hide();
}
});
Otherwise the label won't hide.
It's worth still checking ModelState.IsValid when the page loads as well though incase the user has JS disabled.