Populate child view model collection when posting to controller

I have a page where you can add a Company. A company has multiple Employees. Here are my view models:

public class CompanyViewModel
{
    [ScaffoldColumn(false)]
    public int CompanyId { get; set; }

    public string Name{ get; set; }

    public List<EmployeeViewModel> Employees { get; set; }
}

public class EmployeeViewModel
{
    [ScaffoldColumn(false)]
    public int EmployeeId { get; set; }

    public int CompanyId { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }
}

On my page, I have jQuery functionality to add/delete Employees dynamically. When I post my form, my view looks like this:

<input id="CompanyId" name="CompanyId" type="hidden" value="0" />

<input id="Name" name="Name" type="text" value="Test company name" />

<input id="Employees[1].FirstName" name="Employees[1].FirstName" type="text" value="fn1" />
<input id="Employees[1].LastName" name="Employees[1].LastName" type="text" value="ln1" />

<input id="Employees[2].FirstName" name="Employees[2].FirstName" type="text" value="fn2" />
<input id="Employees[2].LastName" name="Employees[2].LastName" type="text" value="ln2" />

<input id="Employees[3].FirstName" name="Employees[3].FirstName" type="text" value="fn3" />
<input id="Employees[3].LastName" name="Employees[3].LastName" type="te开发者_运维问答xt" value="ln3" />

And my controller method:

[HttpPost]
public ActionResult Create(CompanyViewModel viewModel)
{
    ...
}

When I go through the debugger to see what's in my view model after I post the form, the Employees collection is null. CompanyId and Name are passed through, but not the Employees collection.

I've also tried changing the id and name of the input from Employees[1].FirstName to Model.Employees[1].FirstName, but that didn't help either.

What am I doing wrong here?

I'm using MVC 3 and Razor.

I might be wrong but here is how i handle this.

create a a partial view to show all employees. create a partial view to show a single employee.

pass the employees model to the employees partial view which in turn loops through and renders the employee partial view for each emplyee.

then at run time, when a user adds an employee i post back to the controller using jQuery ajax.

The controller adds the employee and returns a rendered Employee partial control.

The success of the ajax call then (appends) that new employee partial views html to the list of employees already there.

My view takes a formviewmodel that contains the company and a List<Employee>

edit

However, you might look into using the [bind] decorator for your controller.

[Bind(Prefix="ContactDetails")] userDetail UserDetail

edit 2

remove the numbering on the Names of the employees. then in your controller you can use the following

[HttpPost]
public ActionResult Create(CompanyViewModel viewModel, [Bind(Prefix="Employees")] List<EmployeeViewModel> Employees)
{
    ...
}

This is how I used a similar thing in another project

I would suggest doing

@Html.TextBoxFor(m => m.Employees[i].FirstName)

and then inspecting the html that is generated to see that you have the naming convention correct. It may be more like Employees__1_FirstName or something like that.

Can you try the following statement instead

@Html.HiddenFor(x => x.itemlist[i].Id)
@Html.DisplayFor(x => x.itemlist[i].Name)
@Html.DisplayFor(x => x.itemlist[i].Surname)