ASP.NET MVC 5 form doesn't send table rows details(with jQuery datatables 1.10.15)

Question

I created view with form that included table with rows that initialize from list, the table designed with jQuery.datatables 1.10.15.

When I tried to send the form then the table not send, I get null in the list parameter in the action controller.

View page:

@model List<SendMails.ViewModels.ViewModelDetailsFile> 
@{
    ViewBag.Title = "UpdateItems"; 
}

@using (Html.BeginForm("UpdateItems", "Home", FormMethod.Post)) {
    @Html.AntiForgeryToken()
    <table id="DetailsExcelChoose">
        <thead>
            <tr>
                <th class="RightToLeft wideIndexCol">IndexRow</th>
                <th class="RightToLeft">InvoiceNumber</th>
                <th class="RightToLeft wideIndexCol">NumberClient</th>
                <th class="RightToLeft ">NameClient</th>
                <th class="RightToLeft wideIndexCol">Amount</th>
                <th class="RightToLeft wideIndexCol">Email</th>
                <th class="RightToLeft wideIndexCol">ContactPerson</th>
                <th class="RightToLeft ">Details</th>
            </tr>
        </thead>
        <tbody name="iObjsUpdate">
            @if (Model != null)
            {
                for (var i = 0; i < Model.Count(); i++)
                {
                    <tr>
                        <td name="IndexRow">@Model[i].IndexRow</td>
                        <td name="InvoiceNumber">@Model[i].InvoiceNumber</td>
                        <td name="NumberClient">@Model[i].NumberClient</td>
                        <td name="NameClient">@Model[i].NameClient</td>
                        <td name="Amount">@Model[i].Amount</td>
                        <td name="Email"><input type="email" id="Email" name="Email" value=@Model[i].Email /></td>
                        <td name="ContactPerson"><input type="text" id="ContactPerson" name="ContactPerson" value=@Model[i].ContactPerson></td>
                        <td name="Details">@Model[i].Details</td>
                    </tr>
                }
            }
        </tbody>
    </table>
    <div class="form-group row">
        <button type="submit" class="btn btn-primary">send</button>
    </div> 
}

JS file:

$(document).ready(function () {
    var dataTable = $("#DetailsExcelChoose").DataTable();
});

Controller action:

[HttpPost]
[ValidateAntiForgeryToken]
[Route("UpdateItems")]
public async Task<ActionResult> UpdateItems(List<ViewModelDetailsFile> iObjsUpdate)
{
    /// iObjsUpdate is null
}

I read that need to set the name attribute for the asp.net know what the columns are...

But all my searching in google not success.

If I didn't clear what I want so... I want to send the rows details to controller action as list of object (yes I know that I can do this in ajax but I want in this way)

Answer 1

For send or post row details to controller you have to use hidden fields on .cshtml or view page. try this

for (var i = 0; i < Model.Count(); i++)
   {
     <tr>
         @Html.HiddenFor(x => x.Model[i].IndexRow)
         @Html.HiddenFor(x => x.Model[i].InvoiceNumber)
         @Html.HiddenFor(x => x.Model[i].NumberClient)
         @Html.HiddenFor(x => x.Model[i].NameClient)
         @Html.HiddenFor(x => x.Model[i].Amount)
         @Html.HiddenFor(x => x.Model[i].Email )
         @Html.HiddenFor(x => x.Model[i].ContactPerson)
         @Html.HiddenFor(x => x.Model[i].Details)

         <td name="IndexRow">@Model[i].IndexRow</td>
         <td name="InvoiceNumber">@Model[i].InvoiceNumber</td>
         <td name="NumberClient">@Model[i].NumberClient</td>
         <td name="NameClient">@Model[i].NameClient</td>
         <td name="Amount">@Model[i].Amount</td>
         <td name="Email"><input type="email" id="Email" name="Email" value=@Model[i].Email /></td>
         <td name="ContactPerson"><input type="text" id="ContactPerson" name="ContactPerson" value=@Model[i].ContactPerson></td>
         <td name="Details">@Model[i].Details</td>
     </tr>
   }