能够将JQuery Sortable（新订单）保存到ASP.Net MVC控制器吗？ [英] able to save JQuery Sortable (new order) to ASP.Net MVC controller?

问题描述

我已经实现了JQuery sortable，它工作正常。问题是我无法将新订单中的列表传递给控制器​​，所以我可以保存它。

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.

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

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

用户拖车和度假村

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

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>

推荐答案

试试这样

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

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

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.

这篇关于能够将JQuery Sortable（新订单）保存到ASP.Net MVC控制器吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！