MVC3 - Viewmodel with list of complex types

Question

Apologies if this has been asked before; there are a million ways to phrase it so searching for an answer has proved difficult.

I have a viewmodel with the following properties:

public class AssignSoftwareLicenseViewModel
{
    public int LicenseId { get; set; }
    public ICollection<SelectableDeviceViewModel> Devices { get; set; }
}

A simplified version of SelectableDeviceViewModel would be this:

public class SelectableDeviceViewModel
{
    public int DeviceInstanceId { get; set; }
    public bool IsSelected { get; set; }
    public string Name { get; set; }
}

In my View, I am attempting to display a list of editable checkboxes for the Devices property, inside an input form. Currently, my View looks like this:

@using (Html.BeginForm())
{
    @Html.HiddenFor(x => Model.LicenseId)
    <table>
        <tr>
            <th>Name</th>
            <th></th>
        </tr>
        @foreach (SelectableDeviceViewModel device in Model.Devices)
        {
            @Html.HiddenFor(x => device.DeviceInstanceId)
            <tr>
                <td>@Html.CheckBoxFor(x => device.IsSelected)</td>
                <td>@device.Name</td>
            </tr>
        }
    </table>

    <input type="submit" value="Assign" />
}

The problem is, when the model gets posted back to the controller, Devices is null.

My assumption is that this is happening because even though I'm editing its contents, the Devices property is never explicitly included in the form. I tried including it with HiddenFor, but that just resulted in the model having an empty list instead of null.

Any idea what I'm doing wrong here?

Euphrates

Can you show us your controller code that is populating the data model? – Jolin

+1 for the most elegantly described question covering this area. Trust me, we've spent the last 2 hours looking around for this problem! – Slippery

Answer 1

My assumption is that this is happening because even though I'm editing its contents, the Devices property is never explicitly included in the form.

No, your assumption is wrong. The reason this doesn't get bound properly is because your input fields doesn't have correct names. For example they are called name="IsSelected" instead of name="Devices[0].IsSelected". Take a look at the correct wire format that needs to be used to bind to collections: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

But why this happens?

It happens because of the foreach loop that you used in your view. You used x => device.IsSelected as lambda expression for the checkbox but this doesn't take into account the Devices property at all (as you can see by looking at the generated source code of your web page).

So what should I do?

Personally I would recommend you using editor templates as they respect the navigational context of complex properties and generate correct input names. So get rid of the entire foreach loop in your view and replace it with a single line of code:

@Html.EditorFor(x => x.Devices)

and now define a custom editor template that will automatically be rendered by ASP.NET MVC for each element of the Devices collection. Warning: the location and name of this template are very important as this works by convention: ~/Views/Shared/EditorTemplates/SelectableDeviceViewModel.cshtml:

@model SelectableDeviceViewModel
@Html.HiddenFor(x => x.DeviceInstanceId)
<tr>
    <td>@Html.CheckBoxFor(x => x.IsSelected)</td>
    <td>@Html.DisplayFor(x => x.Name)</td>
</tr>

---

Another approach (which I don't recommend) is to change your current ICollection in your view model to an indexed collection (such as an IList<T> or an array T[]):

public class AssignSoftwareLicenseViewModel
{
    public int LicenseId { get; set; }
    public IList<SelectableDeviceViewModel> Devices { get; set; }
}

and then instead of the foreach use a for loop:

@for (var i = 0; i < Model.Devices.Count; i++)
{
    @Html.HiddenFor(x => x.Devices[i].DeviceInstanceId)
    <tr>
        <td>@Html.CheckBoxFor(x => x.Devices[i].IsSelected)</td>
        <td>@Html.DisplayFor(x => x.Devices[i].Name</td>
    </tr>
}

Akeylah

Great answer but why don't you recommend using indexed collections in the view model? – Rhu

@JamieIde, because I prefer using editor templates. Why writing loops in the views when this is already taken into account for you by the framework? – Akeylah

@DarinDimitrov I see your point, I was wondering if it was personal preference or another reason. It sometimes feels odd to me to have templates that contain partial html (such as representing a table row in your example) or elements that are referenced in the page by jQuery etc. The effect is that the template can only be used on one page so why break it out? – Rhu

@JamieIde, I guess it's really a matter of personal choice. – Akeylah

+1. The only post on the internet after 2 hours of looking and trying things out to work perfectly. – Slippery

Answer 2

EditorFor templates work and keep the code clean. You don't need the loops and the model is posted back correctly.

However, has anyone had problems with validation on complex viewmodels (nested EditorFor templates)? I'm using Kendo Validator and am running into all sorts of jquery errors.

Sanderlin