How can I bind nested ViewModels from View to Controller in MVC3?

Question

I am developing an ASP.NET MVC 3 application in C# and I use Razor. I am now dealing with a problem concerning the binding of objects through ViewModels passed/received to/from the View by the Controller. Let's make it clear. I have the following ViewModels:

public class ContainerViewModel
{
   public int ContainerId {get; set;}
   public string ContainerName {get; set;}
   public List<ItemPostModel> ItemData {get; set;}
}

public class ItemPostModel
{ 
   public int ItemId {get; set;}
   public string ItemName {get; set;}
   public int ItemValue {get; set;}
}

The ContainerViewModel is used to pass the data to the View. Its properties ContainerId and ContainerName are used just for display purposes. The List<ItemPostModel> property has to be filled using a Form. The View looks something like this (it is a simplified version):

<strong>@Model.ContainerName</strong>


@using (Html.BeginForm()) 
{
    <fieldset>
    @foreach(var item in Model.ItemData)
    {
       @Html.TextBox(item.ItemId);
       @Html.TextBox(item.ItemName);
       @Html.TextBox(item.ItemValue);

       <p>
           <input type="submit" value="Save" />
       </p>
    }
    </fieldset>
}

The Controller corresponding action methods are as follows:

public ActionResult UpdateItems()
{
   //fill in the ContainerViewModel lcontainer

   return View("UpdateItems", lcontainer);
}

[HttpPost]
public ActionResult UpdateItems(int containerId, ItemPostModel itemData)
{
   //store itemData into repository
}

The problem is that with this code the ItemPostModel itemData passed to the Post ActionMethod UpdateItems is always empty. The containerId is correctly passed. Same result if I use the following code in the Controller (obviously not DRY);

[HttpPost]
public ActionResult UpdateItems(ContainerViewModel container)
{
   //extract itemData from ContainerViewModel container
   //store itemData into repository
}

How can I "teach" the application that I want the form elements stored in the List<ItemPostModel>? Shall I modify the ModelBinder or there is a simpler way to perform this task? Thanks everybody for your answers.

Answer 1

Don't write loops in a view. Use editor templates:

<strong>@Model.ContainerName</strong>
@using (Html.BeginForm()) 
{
    <fieldset>
        @Html.EditorFor(x => x.ItemData)
        <input type="submit" value="Save" />
    </fieldset>
}

and inside the corresponding editor template (~/Views/Shared/EditorTemplates/ItemPostModel.cshtml):

@model ItemPostModel
@Html.TextBox(x => x.ItemId)
@Html.TextBox(x => x.ItemName)
@Html.TextBox(x => x.ItemValue)

And in the controller action you might need to specify the prefix:

[HttpPost]
public ActionResult UpdateItems(
    int containerId, 
    [Bind(Prefix = "ItemData")]ItemPostModel itemData
)
{
   //store itemData into repository
}

and that should be pretty much all. The editor template will take care of generating the proper input field names for the binding to work.