asp.net core mvc form viewmodel empty on post

Question

When I click the button to submit my form, the viewModel is not being bound. I'm not sure whether this is to do with the model property being an array.

Controller

[HttpPost]
        public async Task<IActionResult> CommodityAdditionalCodes(CommodityAdditionalCodesViewModel viewModel)
        {
            //todo code in here which calls webservice 

            return View(viewModel);
    }

ViewModel

 public class CommodityAdditionalCodesViewModel
    {
        public CommodityAdditionalCodeType[] Types { get; set; }
    }

View

@model Asm.Helios.ToolboxMvc.ViewModels.CommodityAdditionalCodesViewModel

@{
    ViewData["Title"] = "CommodityAdditionalCodes";
}

<Section>

    <button type="button" id="btnCommit">Commit Changes</button><span id="isDirtyMessage" class="warning" style="display:none">There are unsaved changes, press the commit changes button to save them</span>
</Section>

<form id="frmAdditionalCodes" name="frmAdditionalCodes"  method="post" >
<table class="table header-fixed">
    <thead>
        <tr >
            <th>Origin</th>
            <th>Description</th>
            <th>Valid From</th>
            <th>Valid To</th>
            <th>Type</th>
            <th>Customs Identifier</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Types)
        {
            <tr>
                <td>
                    <span>@item.Origin</span>
                    <input type="text" value="@item.Origin" style="display:none"/>
                </td>
                <td>
                    <span>@item.Description</span>
                    <input type="text" value="@item.Description" style="display:none" />
                </td>
                <td>
                    <span>@item.ValidFrom</span>
                    <input type="text" value="@item.ValidFrom" style="display:none" />
                </td>
                <td>
                    <span>@item.ValidTo</span>
                    <input type="text" value="@item.ValidTo" style="display:none" />
                </td>
                <td>
                    <span>@item.Type</span>
                    <input type="text" value="@item.Type" style="display:none" />
                </td>
                <td>

                    <span>@item.CustomsIdentifier</span>
                    <!--<input type="text" value="@item.CustomsIdentifier" style="display:none" />-->
                    @Html.TextBoxFor(m=>item.CustomsIdentifier, new {@style="display:none"})</td>
                <td>
                    <button type="button" id="deleteItem">Delete</button>
                    <button type="button" id="editItem">Edit</button>
                    <button type="button" id="updateItem" style="display:none">Update</button>
                    <button type="button" id="cancelItem" style="display:none">Cancel</button>
                </td>
            </tr>
        }

    </tbody>
</table>
</form>

Answer 1

Don't use a foreach loop, instead use a classic for and index the model, for example Model.Types[index] .

Also you should consider using tag helpers, it makes your Razor code much easier to read as it more closely resembles real HTML.

@for (var index = 0; index < Model.Types.Count; index++)
{
    <input type="text" asp-for="Model.Types[index].Origin" />

    <!-- etc... -->
}