Post Form MVC with List of List

Question

Most of the Tutorials, Questions I found online where about when the Model has one List of Items. But In my Case I have a List of Items which further have a List of Items.

I have a ViewModel with List of ItemA, and ItemA has a list of ItemsB

 public class ViewModel
    {
        List<ItemA> Items { get; set; }

        public ViewModel()
        {
            Items = new List<ItemA>();
        }
    }

    public class ItemA
    {
        public int ItemAId { get; set; }
        public List<ItemB> ItemBList { get; set; }

        public ItemA()
        {
            ItemBList = new List<ItemB>();
        }
    }

    public class ItemB
    {
        public int ItemBId { get; set; }

// Need to input this string for each Item in List<ItemA>
        public string NewInput 

    }

My View:

@Html.BeginForm(){

@foreach (var itemA in Model.Items)
{
    <p>@itemA.ItemAId</p>


    for (int i = 0; i < itemA.ItemBList.Count; i++)
    {
        @Html.HiddenFor(m => itemA.ItemBList[i].ItemBId )

        @Html.TextBoxFor(m => itemA.ItemBList[i].NewInput)

    }
<button type="submit">Submit</button>
}

}

My Controller:

public ActionResult SaveInfo(ViewModel model){
// Update
}

My Question is how do I write a Form for this Case so it binds back to ViewModel in Controller?

Answer 1

Its fairly simple - you just need to nest 2 for loops in the view (don't use foreach)

ie change to:

@Html.BeginForm(){

@for(int j = 0; j < Model.Items.Count; j++)
{
    <p>@Model.Items[j].ItemAId</p>
    @Html.HiddenFor(m => m.Items[j].ItemAId)  
    @* (don't forget this!) *@


    for (int i = 0; i < Model.Items[j].ItemBList.Count; i++)
    {
        @Html.HiddenFor(m => m.Items[j].ItemBList[i].ItemBId )

        @Html.TextBoxFor(m => m.Items[j].ItemBList[i].NewInput)

    }

}
<button type="submit">Submit</button>
}

The MVC Model Binder requires form fields representing properties in lists to be named something like [#].property1name, [#].property2name in order to properly associate them to each other during binding after postback. Same principle applies to list properties of listitems. You need to use a for loop rather than a foreach loop to get the right form field names when using HTML helpers!