ASP.NET MVC 5 model binding list is empty

Question

I stuck on this issue for a while..

I've created a simple view model:

public class AddTranslationViewModel
{
    public List<ProjectTranslation> ProjectTranslations { get; set; }
    public AddTranslationViewModel()
    {
        ProjectTranslations = new List<ProjectTranslation>();
    }
}

ProjectTranslation class:

public class ProjectTranslation
{
    public int ProjectTranslationId { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string Address { get; set; }

    public int LanguageId { get; set; }
    public Language Language { get; set; }

    public int ProjectId { get; set; }
    public Project Project { get; set; }

}

A simple view which uses the AddTranslationViewModel

<table class="table">

    @foreach (var item in Model.ProjectTranslations)
    {
        @Html.HiddenFor(modelItem => item.ProjectTranslationId)
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Language.LanguageCode)
            </td>
            <td>
                @Html.EditorFor(modelItem => item.Title)
            </td>
        </tr>
    }

</table>
<input type="submit" value="Send" />

and finally my POST Method:

    public ViewResult AddTranslation(AddTranslationViewModel projectTranslations)
    {
        if (ModelState.IsValid)
        {
           //...
        }
        return View(projectTranslations);
    }

The idea is very basic, I want to show a list of items where it should be possible to change/edit the values.

However, the model binding is not working, the projectsTranslations param in the HTTPPost-Method AddTranslation is always empty.

What's the mistake here?

Answer 1

Binding to a list of object requires creating input field structure with names containing indexes, i.e:

<input type="text" name="YourArrayOrList[0].SomeProperty" value="123" />
<input type="text" name="YourArrayOrList[0].SomeOtherProperty" value="321" />
<input type="text" name="YourArrayOrList[1].SomeProperty" value="123" />
<input type="text" name="YourArrayOrList[1].SomeOtherProperty" value="321" />

Moreover, you need to point the form to the proper Action Method in your Controller using Razor's Html.BeginFrom method (see documentation). In you case it should look like this:

@using(Html.BeginForm("AddTranslation","YourControllerName"))
{
    for (int i=0;i<Model.ProjectTranslations.Count; i++)
    {
        @Html.HiddenFor(model => model.ProjectTranslations[i].ProjectTranslationId)
        <tr>
            <td>
                @Html.DisplayFor(model => model.ProjectTranslations[i].Language.LanguageCode)
            </td>
            <td>
                @Html.EditorFor(model => model.ProjectTranslations[i].Title)
            </td>
        </tr>
    }
}

If your method is not edit, but CREATE method, then obviously your List in model will have 0 elements. In this case, change the stop condition in for loop to desired count.

Keep in mind that this topic was discussed many times before:

ASP.NET MVC bind array in model

ASP.NET MVC - Can't bind array to view model