Model binding postback data to a controller action parameter of type List<T>

Question

I have a strong type view of type

List<List<MyViewModelClass>>

The outer list will always have two lists of List<MyViewModelClass>. For each of the two outer lists I want to display a group of checkboxes. Each set can have an arbitrary number of choices.

My view model class looks similar to this:

public class MyViewModelClass
{
    public Area Area { get; set; }

    public bool IsGeneric { get; set; }

    public string Code { get; set; }

    public bool IsChecked { get; set; }
}

So the final view will look something like:

---

Please select those that apply:

First set of choices:

• x Option 1
• x Option 2
• x Option 3
• etc.

Second set of choices:

• x Second Option 1
• x Second Option 2
• x Second Option 3
• x Second Option 4
• etc.

---

Checkboxes should display MyViewModelClass.Area.Name, and their value should be related to MyViewModelClass.Area.Id. Checked state is of course related to MyViewModel.IsChecked.

Question

I wonder how should I use Html.CheckBox() or Html.CheckBoxFor() helper to display my checkboxes? I have to get these values back to the server on a postback of course.

I would like to have my controller action like one of these:

public ActionResult ConsumeSelections(List<List<MyViewModelClass>> data)
{
    // process data
}

public ActionResult ConsumeSelections(List<MyViewModelClass> first, List<MyViewModelClass> second)
{
    // process data
}

If it makes things simpler, I could make a separate view model type like:

public class Options
{
    public List<MyViewModelClass> First { get; set; }

    public List<MyViewModelClass> Second { get; set; }
}

As well as changing my first version of controller action to:

public ActionResult ConsumeSelections(Options data)
{
    // process data
}

Answer 1

Generally I create a type (Model) that "models" the view that I want to create. i.e.

public class FooViewModel
{
    public List<Option> General { get; set; }
    public List<Option> Others { get; set; }

    //Some Methods and other properties
}
public FooController :...
{
    private FooViewModel fooViewModel = new FooViewModel();
}

Edit: Have a look at this post, as it's exactly what you want!

Answer 2

Solution

It turns out this is not so complicated at all. All you have to do is name your controls appropriately and everything will be bound together as it should be. So. Whatever your controls, they should always be named like:

name="first[0].propName"
name="first[1].propName"
name="first[2].propName"
name="first[3].propName"
...

// or
name="first[0].data[0].property"
name="first[0].data[1].property"
name="first[0].data[2].property"
...
name="first[1].data[0].property"
name="first[1].data[1].property"
...

All these will get bound to List<SomeType> first controller action parameter (the second one has another collection inside a collection).

Very important note
If you add/remove these controls dynamically using Javascript, you have to make sure, that indexes are consecutive starting from 0, and not having any gaps. And you will have a nice working app with dynamic number of elements in a collection.

You can read about it in my blog post as well.