能夠保存JQuery Sortable（新訂單）到ASP.Net MVC控制器嗎？

Question

我已經實現了JQuery sortable，它工作正常。問題是我無法將其新順序的列表傳遞給控制器​​，因此我可以保存它。

如果原始表看起來是 1 - 餅乾 2 - chocalate 3 - 餅乾 4 - 糖果

而且用戶拖動和度假村是

1 - 巧克力 2 - 餅乾 3 - 糖果 4 - cookies

如何將新訂單傳遞給我的控制器以重新排序模型中的數據。

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

注：這是不準確回答你的問題，但這是相同的情況，爲我工作，你可以按照它。希望它對你有幫助。