@Html.DropDownListFor Basic Usage

Question

I\'m just starting to learn MVC4 and I must admit I\'m a little challenged by all the reliance on lambda expressions, generics and anonymous types, especially when there are man

Answer 1

Part 1: Explaining Lambda magic

You're not alone. Lambdas + MVC make coding wicked easy, but they also make it seem rather magical (due to the abstraction).

Looking at the first param of the DropDownListFor Method [...] Do I understand correctly that the "m" represents the instance of the model class that was passed into the View?

Yes.

HTML Helpers + Lambdas in Razor are simple and magical because they are taking a shortcut and not actually revealing to you what's going on.

First, let's take a look at @Html. We know @ begins our Razor syntax and then Html is magic. Actually, Html is an HtmlHelper object that is automatically initialised and given to you. More specifically it's an HtmlHelper<TModel>. The Razor HTML editor is smart and knows ahead of time what type TModel will be based on what you've said this view's model type is. That's why you have so much intellisense.

When you type

@model IEnumerable<BusinessLayer.Employee>

The editor reads that and makes an assumption now that the HTML Helper will be HtmlHelper<IEnumerable<BusinessLayer.Employee>>. When it comes time to compile the page, the HTML helper will in fact be that type (of course).

So what about DropDownListFor or any other extension method?

Looking at DropDownListFor we can see that it's actually DropDownListFor<TModel, TProperty>. We now understand that TModel is our view's model type. DropDownListFor knows about this because the method is extending HtmlHelper<TModel>. Therefore DropDownListFor knows that the incoming type is whatever type is defined at the top of the view. What about TProperty?

TProperty is the return type. That's the type that you specify when you select your property. The view gives HtmlHelper the model type, who then gives DropDownListFor the model type and now that you're in a lambda expression: (x => x.Property) you select the property which then selects the type for you; in this case a string (Gender).

Part 2: Your problem

It's hard to answer your question without knowing exactly what you're trying to achieve. Do you have a collection of Employees and you want to display multiple gender dropdown boxes for each and then save them?

When dealing with collections it's a little more tricky, since MVC doesn't handle them well out of the box; it's usually best to write your own solutions according to what you need done.

I don't really like the idea of a single view getting a collection of things on a page. Consider this piece of logic:

Your way:

• Get collection of Employees
• Give Employees to a view
• Have view create a single SelectListItem
• Loop through and display the SelectList for each Employee

My way

• Get collection of Employees
• Give employees to a view
• Have the view loop through and pass each Employee to another view (partial)
• Each partial deals with a single Employee

With MVC do try to break things down into small, logical parts. Views should be stupid; meaning they shouldn't really do any logic or thinking. Things become easier this way and it makes sure that your views don't grow into monsters.

Example solution walk-through

Try this:

Create a new PartialView called _EmployeeGender.cshtml in the same folder as the view you're using.

Use this code

_EmployeeGender.cshtml

@model BusinessLayer.Employee

<tr>
    <td>
    @{

        var listItems = new List<SelectListItem>()
        {
            new SelectListItem {Text = "Male",   Value = "M"},
            new SelectListItem {Text = "Female", Value = "F"}
        };

        @Html.DropDownListFor(m => m.Gender, listItems, string.Empty)
    }  

    </td>
</tr>

Your original view

@model IEnumerable<BusinessLayer.Employee>
@{
    ViewBag.Title = "Employees";
}

<h2>Employees</h2>

<table>
    @foreach (var employee in Model) 
    {
        Html.RenderPartial("_EmployeeGender", employee);
    }
</table>

Results

Let's have a look at our generated HTML now:

<table>
<tr>
    <td>
<select id="Gender" name="Gender"><option value=""></option>
<option selected="selected" value="M">Male</option>
<option value="F">Female</option>
</select>  

    </td>
</tr><tr>
    <td>
<select id="Gender" name="Gender"><option value=""></option>
<option value="M">Male</option>
<option selected="selected" value="F">Female</option>
</select>  

    </td>
</tr></table>

We can see that there is now a blank selection and that our dropdown boxes are automatically selected with the Employee's values (I create one male and one female employee).

Do Note that the id and name HTML attributes are the same. If you want to submit a form with these values then it will require more work. But this is a reasonable starting point for you.