ASP MVC Model List<object> Returned Empty in POST action

Question

I have got this problem that I am having a difficulty to solve. I am creating a page where the user will be presented with a list of items (Product Types). Each item will have a dropdown list next to it so that the user can make appropriate selection to create a mapping. After making selection then the user submits the form, and the value will be written to the database.

The problem is that when it is submitted, I am not getting any values back. Specifically, 'Mappings' is empty in the model that is returned by the POST action. The GET action works fine. The following is the essence of what I have written:

Model:

public class ProductTypeMappingViewModel
{
    //this is empty in the POST object
    public List<ProductTypeMapping> Mappings { get; set; }

    public ProductTypeMappingViewModel()
    {
        Mappings = new List<ProductTypeMapping>();
    }

    public ProductTypeMappingViewModel(string db)
    {
        //use this to populate 'Mappings' for GET action
        //works fine
    }

    public void UpdateDB()
    {
        //to be called on the object
        //returned from POST action
        foreach(var mapping in Mappings)
        {
        //Mappings is always empty after POST
        //Suppose to add to db
        }
    }
}

public class ProductTypeMapping
{
    public string ProductTypeName { get; set; }
    public int SelectedStandardProductTypeKey { get; set; }
    public SelectList StandardProductTypes { get; set; }

    public ProductTypeMapping() 
    {
        StandardProductTypes = new SelectList(new List<SelectListItem>());
    }

    public int GetSelectedProductTypeKey() { //return selected key}

    public string GetSelectedProductTypeName() { //return selected name} 
}

View:

@model CorporateM10.Models.ProductTypeMappingViewModel

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true)

        <table class="table">
            @foreach (var dept in Model.Mappings)
            {
            <tr>
                <td>
                    @Html.DisplayFor(model => dept.ProductTypeName, new { })
                </td>
                <td>
                    @Html.DropDownListFor(model => dept.SelectedStandardProductTypeKey, dept.StandardProductTypes, "(Select Department)", new { })
                </td>
            </tr>
            }
        </table>

        <div>
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
}

Any insight will be greatly appreciated.

Answer 1

foreach here causes select element in final HTML to have incorrect name attribute. Thus nothing is posted to the server. Replace this with for loop:

<table class="table">
    @for (int i=0; i<Model.Mappings.Count; i++)
    {
    <tr>
        <td>
            @Html.DisplayFor(model => model.Mappings[i].ProductTypeName, new { })
        </td>
        <td>
            @Html.DropDownListFor(model => model.Mappings[i].SelectedStandardProductTypeKey, model.Mappings[i].StandardProductTypes, "(Select Department)", new { })
        </td>
    </tr>
    }
</table>