1. |
When using scaffolding and dynamic data on Edit/Create template views, Visual Studio will put in an Html.EditorFor for each data item in your data. This will
render as a simple HTML input element. This is because although MVC is clever, it's not clever enough to discern from your data entity which data items are
free format and which are driven from enumerated lists. For now (until EF gets cleverer) we have to override this default and use Html.DropDownListFor |
2. |
Say you had a simple simple 'Edit' form, created from the Add View wizard using Scaffolding to render firstname and lastname. The generated View might look something like:
@using (Html.BeginForm()) { <fieldset> <legend>Name</legend> <div class="editor-label"> @Html.LabelFor(model => model.FirstName) </div> <div class="editor-label"> @Html.EditorFor(model => model.FirstName) </div> <div class="editor-label"> @Html.LabelFor(model => model.Lastname) </div> <div class="editor-label"> @Html.EditorFor(model => model.Lastname) </div> </fieldset> }Which renders as: I realise names are not good examples of things you would want to use dropdown lists for, but you get the idea. If we want to use a dropdown list instead of a Textbox (EditorFor), we need to tell it to use the DropDownListFor instead. |
3. |
We want to change both of these to dropdowns instead of textboxes. But dropdowns need a list of options, so this must
be supplied. There are two ways to do it, depending on need. if you just need a list of hardwired options in the View
use the following format:
<div class="editor-label"> @Html.DropDownListFor(model => model.FirstName, new SelectList(new List<Object> { new { value = "John", text = "John" }, new { value = "Mary", text = "Mary" }, new { value = "Bob", text = "Bob" } }, "value", "text", Model.FirstName)) </div>The Html helper takes 5 arguments - the LINQ expression to identify the model element this dropdown is an editor for, a new SelectList element containing new anonymous items, the names of the value and text fields in that list of objects to identify the select options, and the final arg is the 'currently selected value' of the dropdown so that it is redered with a value already selected, so this has to be set to the value of the data element. |
4. |
Usually, this list of select options comes from somewhere else, so instead of hard wiring a list, you can get the list from elsewhere
<div class="editor-label"> @Html.DropDownListFor(model => model.FirstName, new SelectList(Mvc3Razor.Models.LookupLists.FirstNames), "value", "text", Model.FirstName)) </div>Now we can set up the list somewhere else, fetch it from a database or whatever. For simplicity in this example, I'll just define the list as a static list somewhere in the solution: namespace Mvc3Razor.Models { public class LookupLists { public static List<Object> FirstNames = new List<Object>{ new { value = "Theo" , text = "Theo" }, new { value = "Jane" , text = "Jane" }, new { value = "Gary" , text = "Gary" } }; } } |
And that's how you can change the scaffolded Edit form elements to use dropdowns! |