Try to post table rows back to MVC controller as a List<> object

Question

For our site we have an Admin section and a user section. We want to allow Admins to specify which order items are listed to the users in the user section.

I have an MVC list table, and I've enabled sorting the rows to actually change the sort value. But I'm trying to save the sort to the database. As you can see below, I have hidden elements for certain properties, and my javascript sets the HiddenFor(item.SortOrder) correctly. It then calls the controller. But I would like the entire collection of rows to be passed back as a List<> object. Are there any good examples?

@model System.Collections.Generic.IList<PublicationSystem.Model.CustomField>
<table class="table sortable-table"
data-source-href='@Url.RouteUrl("Default",
    new { action = "_CustomFieldSort" },
    Request.Url.Scheme)'>
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model[0].ColumnName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model[0].ColumnCaption)
            </th>
            <th></th>
        </tr>
    </thead>

    @for (var i=0; i < Model.Count; i++) //each (var item in Model)
    {
        <tr>
            <td>
                @Html.HiddenFor(modelItem => Model[i].CustomFieldId,new {name="fieldsToEdit["+i+"].CustomFieldId"})
                @Html.HiddenFor(modelItem => Model[i].CustomFormId, new { name = "fieldsToEdit[" + i + "].CustomFormId" })
                @Html.HiddenFor(modelItem => Model[i].SortOrder, new { name = "fieldsToEdit[" + i + "].SortOrder", @class = "SortOrder" })
                @Html.DisplayFor(modelItem => Model[i].ColumnName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => Model[i].ColumnCaption)
            </td>
            <td>
                ... buttons
            </td>
        </tr>
    }
</table>

My javascript:

$(".sortable-table tbody").sortable({
    stop: function (event, ui) {

        $(".sortable-table tr").each(function (index, element) {
            var hiddenInput = $(element).find(".SortOrder").first();
            hiddenInput.val(index);
        });
        $.ajax({
            url: $(".sortable-table").attr("data-source-href"),
            method: "POST",
            data: $(".sortable-table").serialize(),
            success: function (result) {
                ClearAndRefresh(); // Assumes parent has this function
            }
        });
    }
});

My controller method:

public ActionResult _CustomFieldSort(List<CustomField> fieldsToEdit)
{
    if (fieldsToEdit != null) // fieldsToEdit is always null after the sort
    {
        var fieldCount = fieldsToEdit.Count();
    }

    return null;// PartialView();
}

I have my javascript correctly trying an ajax call to my controller method, but 'fieldsToEdit' is null. What am I doing wrong?

Answer 1

Bulk update on sorting? using a for loop will enable you to map back the whole list back to a post/get method on the controller

@model System.Collections.Generic.IList<PublicationSystem.Model.CustomField>
<table class="table sortable-table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ColumnName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ColumnCaption)
        </th>
        <th></th>
    </tr>
</thead>

@for (int i=0; i < Model.Length;i++)
{
    <tr>
        <td>
            @Html.HiddenFor(modelItem => Model[i].CustomFieldId,new {name="fieldsToEdit["+i+"].CustomFieldId")
            @Html.HiddenFor(modelItem =>Model[i].CustomFormId,new {name="fieldsToEdit["+i+"].CustomFormId")
            @Html.HiddenFor(modelItem => Model[i].SortOrder, new { @class = "SortOrder",name="fieldsToEdit["+i+"].SortOrder" })
            @Html.DisplayFor(modelItem => Model[i].ColumnName,new {name="fieldsToEdit["+i+"].ColumnName")
        </td>
        <td>
            @Html.DisplayFor(modelItem => Model[i].ColumnCaption,new {name="fieldsToEdit["+i+"].ColumnCaption")
        </td>
        <td>
            ... buttons
        </td>
    </tr>
}

Then hitting back on button to post button will bulk update the whole list, im not sure if I am answering you question correctly or not though.