MVC view model with a list property that contains complex members

Question

I have a model that looks like the following

class ContainerClass
{
    string Name { get; set;}
    Guid Id { get; set; }

    [UIHint("CustomSelectBox")]
    List<Member> Members { get; set; }
}

class Member
{
    string Name { get; set;}
    Guid Id { get; set; }
    string SomeProperty { get; set;}
}

class DerivedFromMember: Member
{
   string AnotherProperty { get; set;}
}

If the controller action is

    [HttpPost]
    public ActionResult Edit(ContainerClassmodel)
    {
         return null;
    } 

Can anyone tell why the default model binder can't map the list members from tag i.e.

<select id="Members" name="Members" multiple="multiple" >
 <option id="Members[0].Id" selected="selected" name="Members[0].Id" value="9b1ea01c-6dad-470d-a6c1-a0f5009ac069">Member One</option>
<option id="Members[1].Id" selected="selected" name="Members[1].Id" value="adf1dbda-9020-45b7-abd7-a0f5009a9b30">Member two</option>
</select>

Please note that all values are selected.

whereas the following works

 <input type="hidden" name="Members[0].Id" value="9b1ea01c-6dad-470d-a6c1-a0f5009ac069" />
 <input type="hidden" name="Members[1].Id" value="adf1dbda-9020-45b7-abd7-a0f5009a9b30" />

To be honest I know why it doesn't work :( because if I look at http headers incase of select the submitted data is not enough for the default model binder.

Members:9b1ea01c-6dad-470d-a6c1-a0f5009ac069
Members:adf1dbda-9020-45b7-abd7-a0f5009a9b30

Can anyone tell what to change inside tag so that the submited data is

Members[0].Id:9b1ea01c-6dad-470d-a6c1-a0f5009ac069
Members[1].Id:adf1dbda-9020-45b7-abd7-a0f5009a9b30

Answer 1

When using a select list you need two things in your model.

1. The collection to populate the select list.
2. A property to hold the value of the selected item when posting back to the server.

The strongly typed version looks like this:

@Html.ListBoxFor(x=> x.Id, IEnumerable<SelectListItem>)

If you want to specify the name manually you can do this:

@Html.ListBox("Id", IEnumerable<SelectListItem>)

Since the user can select multiple options Id needs to be an array of the type your select list values are in. If they are integers then you need Id to be like this: public int[] Id {get; set;}.

When submitting your form, controls only submit their value, your list box won't send back enough data to bind it back to the original Members list. If for some reason you need additional info you will have to take the id's that came back.

Edit in response to first comment:

Hopefully I understand you correctly.

If you want to query for more options for that select box via AJAX you can set your AJAX endpoint to another action that returns JSON. All you really need to send back is a collection of key/value pairs (for option value and text). and then use JavaScript to append the choices to the original list box. If you're asking about serializing an IEnumerable<SelectListItem>, not sure if that will serialize properly.