able to save JQuery Sortable (new order) to ASP.Net MVC controller?

问题

I have already implemented JQuery sortable, and it works fine. The problem is I can't pass the list in its new order to a controller so i can save it.

If the original list looks like this 1 - Cookies 2 - chocalate 3 - biscuits 4 - sweets

And the user drags and resorts to be

1 - chocolate 2 - biscuits 3 - sweets 4 - cookies

How can i pass the new order to my controller in order to re-order the data in my model.

  $('td, a', '#MenuItem').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});
$(document).ready(function () {
    $('#MenuItem tbody').sortable({
        axis: 'y',
        update: function (event, ui) {
            var data = $(this).sortable('serialize');

            // POST to server using $.post or $.ajax
            $.ajax({
                data: data,
                type: 'POST',
                url: 'MoveFunction'
            });
        }
    });
});

[HttpPost]

    public ActionResult MoveFunction(Product vm)
    {




        return View(vm);
    }



  public class Product
{
    //ID's
    [Key]
    public int ProductID { get; set; }

    //Members


 <fieldset class="fieldset">
        <legend class="legend">Products</legend>

        <table id = "MenuItem"  class="promo full-width alternate-rows" style="text-align: center;">  <!-- Cedric Kehi DEMO CHANGE -->



            <tr>
                <th>Product Code
                </th>
                <th>Product Template
                </th>
                @*<th>
                    @Html.DisplayNameFor(model => model.IndexList[0].Priority)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.IndexList[0].WindowProduct)
                </th>*@
                <th>Description <!-- JACK EDIT -->
                </th>
                <th>Actions</th>
            </tr>
            <tbody>
            @foreach (var item in Model.IndexList)
            {


                <tr>
                    <td class="center-text">
                        @Html.DisplayFor(modelItem => item.ProductCode)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ProductTemplate.Description)
                    </td>
                    @*<td class="center-text">
                        @Html.DisplayFor(modelItem => item.Priority)
                    </td>
                    <td class="center-text">
                        @Html.Raw(item.WindowProduct ? "Yes" : "No")
                    </td>*@
                    <td>
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>


  <td class="center-text nowrap">
                        @Html.ActionLink(" ", "Edit", new { id = item.ProductID }, new { title = "Edit", @class = "anchor-icon-no-text edit" })
                        @Html.ActionLink(" ", "Details", new { id = item.ProductID }, new { title = "Details", @class = "anchor-icon-no-text details" })
                        @Html.ActionLink(" ", "Delete", new { id = item.ProductID }, new { title = "Delete", @class = "anchor-icon-no-text delete" })
                    </td>
                </tr>

            }

                </tbody>

        </table>

回答1:

Try like this

Js Code

$('#MenuItem tbody').sortable({
        axis: 'y',
        update: function (event, ui) {
            var order = 1;
            var model = [];

            $("#MenuItem tbody tr").each(function () {
                //building a new object and pushing in modal array 
                //Here I am setting OrderNo property which is i am using in my db and building my object
                var objModel = { Id: 1, OrderNo: order }; //This is for example to build your object and push in a modal array.
                model.push(objModel);
                order++;
            });

            if (model.length > 1)
            {               
                $.ajax({
                    type: "POST",                            
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("UpdateStatusOrder", "Status")', //This is my url put your url here and pass model as data it is an array of my items
                    data: JSON.stringify({ model : model }),
                    success: function (data) {
                        //do something
                    },
                    error: function (e) {
                        //do something
                    }
                });
            }
        }
    });     

Controller Code

[HttpPost]
public ActionResult UpdateStatusOrder(List<StatusModel> model)
{
     //Update code to update Orderno     
    foreach (var item in model)
    {
        var status = DBContext.Status.Where(x => x.Id == item.Id).FirstOrDefault();
        if (status != null)
        {
            status.OrderNo = item.OrderNo;
        }      
        DBContext.SubmitChanges();
    }
}

Note : This is not exact answer for your question but this is same scenario and working for me you can follow it. Hope it will be helpful to you.

来源：https://stackoverflow.com/questions/39661264/able-to-save-jquery-sortable-new-order-to-asp-net-mvc-controller