I Have a dropdownlist that allows you to selcect an exsiting Driver ID. when the page loads the first Driver ID is already selected and I would rather allow the Driver ID dropdownlist to first have a null value selected when the page loads. How will I do this?
This is my Driver ID view:
<div class="form-group">
#Html.LabelFor(model => model.DriverID, "Driver Cell", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DriverID", null, htmlAttributes: new { #class = "box" })
#Html.ValidationMessageFor(model => model.DriverID)
</div>
</div>
You can use
#Html.DropDownList("DriverID", null, "Select a driver", htmlAttributes: new { #class = "box" })
but this dropdown will be empty since you are passing null as SelectList.
You can also use the asp-for tag helper with a SelectListItem list
Then this is what you write in your form in the view
<select asp-for="(Whatever the value is associated to)" asp-items="The List<SelectListItem> list">
<option disabled selected>---Select---</option>
<!-- This line will go to the top of the dropdown list -->
</select>
This will create a dropdown list where by default nothing is selected and this default value will be null
You can also refer to this other post on stack overflow:
Set Default/Null Value with Select TagHelper
Related
I need a way to set already selected values in a multi select dropdown
in a edit view in a web application (ASP.NET, Mvc 5) :
<div class="form-group">
<div class="col-md-10">
#Html.DropDownList("EntityId", selectList: (IEnumerable<SelectListItem>)ViewBag.EntityId, htmlAttributes: new { #class = "form-control select2", multiple = "multiple" })
</div>
</div>
//Controller
ViewBag.EntityId = new SelectList(context.CompanyEntity.Where(x => x.UserProfile.Any(u => u.UserProfileId == id)), "EntityId", "EntityName");
I need a edit view by set selecting already selected values.
I'm trying to incorporate a modal for a user creation menu that has 15 mandatory
sign up boxes that are displayed from the model to the UI using their model properties through the
#Html.LabelFor(model => model.Address2, htmlAttributes: new { #class = "control-label col-md-2" })
command. I want to add a mouse over modal to the fields so the user knows the field is mandatory to fill out before missing the field and getting the validation errors if the boxes are left empty. I want to use something like this but I don't know how to incorporate it into the #html label assignment.
address2
You just need to add the relevant data attributes needed to enable popover. The second parameter of LabelFor helper method accepts an annonymous object for the html attributes. Make sure you pass the data attributes there.
#Html.LabelFor(model => model.Address2, new { #class = "control-label col-md-2",
data_toggle = "popover",
data_placement = "left",
data_trigger = "hover",
title = "Address2 is mandatory" })
One thing to remember is, to build the markup for data attribute, you need to replace - with _ when passing the htmlAttributes to the helper method, that means, to get the output "data-toggle", you should pass "data_toggle"
Also make sure that you have enabled the popover functionality by calling the popover() method on the element(s)
$(function () {
$('[data-toggle="popover"]').popover()
});
<div class="form-group">
#Html.LabelFor(model => model.Address2, htmlAttributes: new {#class ="control-label col-md-2",
data_toogle= "popover",
data_placement = "right",
data_trigger = "hover",
title = "Address2 is mandatory"
})
<div class="col-md-10">
#Html.EditorFor(model => model.Address2)
#Html.ValidationMessageFor(model => model.Address2)
</div>
</div>
The above code is just displaying the control-label but it doesn't have the popover functionality. The script is the first script after the body and is exactly the way that was instructed.
I am working an asp.net mvc in visual studio 2013 and one of the fields is a date input but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up. If I put the field in manually it comes up but then it doesn't map to that particular field. In the data annotations I have included [DataType(DataType.Date)] but this doesn't bring up the HTML5 date picker. How do I achieve this in asp.net below is the code for the field in particular
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
</div>
Can't remember exactly when this was added but in older versions of ASP.NET MVC you could either modify the default editor template to add support for it or use TextBoxFor which allows you to specify any custom attributes:
#Html.TextBoxFor(model => model.CustomerJoinDate, new {
#class = "form-control",
type = "date"
})
If you want your DateTime model properties to use the same template without having to repeat the same Razor code over and over, define a partial view called DateTime.cshtml (or DateTime.vbhtml) in your Shared/EditorTemplates folder, with content similar to:
#model DateTime
#Html.TextBoxFor(
m => m,
"{0:MM/dd/yyyy}",
new { #class = "form-control date", type = "date" })
Then replace your Razor bindings with:
#Html.EditorFor(model => model.CustomerJoinDate)
and so on, for each date field which should use this template.
This uses an overload of TextBoxFor that allows you to specify a format string for the input, which is helpful for "masking" the time portion of the DateTime value (assuming you only want to enter a date).
Since not every browser supports a native datepicker, you could use the date class in this example to apply a polyfill as necessary (or simply use type=date as your selector).
MVC 5.1 now supports using html attributes directly like so. You should be able to put date into the type attibute.
<div class="form-group">
#Html.LabelFor(model => model.CustomerJoinDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerJoinDate, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.CustomerJoinDate, "", new { #class = "text-danger" })
</div>
See Darin's answer regarding input type="date" via TextBoxFor
"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"
At the base level, not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker and such)
Example:
<p>
See if you get a datepicker in Firefox (as of v40.0.2):
<br />
<input type="date" name="foo" />
</p>
Hth...
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.
If I put a disabled='disabled' propertie in a TextBox with Razor, when I submit my form, the value of this TextBox isn't sent to the controller.
#using (Html.BeginForm("Principal", "Home")) {
<div class="form-group">
#Html.LabelFor(m => m.Fornecedor, new { #class = "col-sm-2 control-label" })
<div class="col-sm-9">
#Html.TextBox("Fornecedor", Model.Fornecedor, new { #class = "form-control", type = "text", disabled = "disabled" })
</div>
</div>
}
When submitted, the Model.Fornecedor value in controller is null, but without the disabled propertie, the value return correctlly.
Can someone help me, to put a TextBox field disabled but pass his default value to controller when the form is submitted ?