能够将 JQuery Sortable（新订单）保存到 ASP.Net MVC 控制器吗？

Question

我已经实现了可排序的 JQuery，它运行良好。问题是我无法以新顺序将列表传递给控制器​​，因此我可以保存它。

如果原始列表看起来像这样 1 - 饼干 2 - 巧克力 3 - 饼干 4 - 糖果

而用户拖拽成为

1 - 巧克力 2 - 饼干 3 - 糖果 4 - 饼干

如何将新订单传递给我的控制器，以便对模型中的数据重新排序。

  $('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>

Answer 1

这样试试

Js 代码

$('#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
                    }
                });
            }
        }
    });     

控制器代码

[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();
    }
}

注意：这不是您问题的确切答案，但这是相同的场景，为我工作，您可以遵循它。希望对你有所帮助。