將JQuery.Sortable結果保存到SQL與ASP.NET MVC

我一直在尋找一些關於此的線程，但我只是沒有得到它。將JQuery.Sortable結果保存到SQL與ASP.NET MVC

我有一個從SQL中拉取列表的表。我正在使用JQuery.sortable在客戶端痛苦行。

理想情況下，我想以不同的順序拖動和排序行，並通過使用AJAX的控制器自動將它們保存在SQL中。

這是我的代碼：

<div class="container"> 

    <table id="example" class="table table-responsive table-striped sorted_table"> 
     <thead> 
      <tr> 
       <th>Display Order</th> 
       <th>Image/Video</th> 
       <th>Title</th> 
       <th>Meta Data</th> 
       <th>Action</th> 
      </tr> 
     </thead> 
     <tbody> 
      @foreach (var item in Model) 
      { 
       order++; 
       <tr id="@item.Id"> 
        <td>@order</td> 
        <td><img src="~/Images/Home/@item.Location" style="width: 100px;" /></td> 
        <td>@item.Title</td> 
        <td>@item.Meta</td> 
        <td> 
         <a href="@Url.Action("HomeBgDelete", "Admin", new {id = item.Id})">Delete</a> 
        </td> 
       </tr> 
      } 
     </tbody> 
    </table> 
    <div class="col-sm-4">@Html.ActionLink("Add Another", "HomeBG", "Admin")</div> 
    <div><button id="submit-list" class="btn btn-default">Save Order</button></div> 


</div> 


<script> 
    // Sortable rows 
    $('.sorted_table').sortable({ 
     containerSelector: 'table', 
     itemPath: '> tbody', 
     itemSelector: 'tr', 
     placeholder: '<tr class="placeholder"/>', 
    }); 


</script>

我看一個方法中，通過DOM其中迭代並建立新訂單的陣列，然後通過一個AJAX調用到控制器以通過所述陣列處理。我試過一些沒有成功的代碼。

任何幫助將是偉大的！

來源

2014-11-01 user2960038

我會建議[更新]（http://api.jqueryui.com/sortable/#event-change）回調。你看過哪種方法？ – Felix 2014-11-01 02:55:40

謝謝菲利克斯。所以更新是事件...你將如何收集元素ID和訂單？如果你看到了一個很好的例子，那麼很樂意看看它。 – user2960038 2014-11-01 03:19:47

作爲一個粗略的想法（涉及您的問題中的註釋），您可以迭代Sortable的update回調中的錶行。在那裏你可以訪問當前元素，獲取ID，其他屬性和索引，這取決於你需要什麼。

var ids = []; 
$('#example tbody').sortable({ 
    update: function(event, ui) { 
    $('#example tbody tr').each(function(index) { 
     ids.push($(this).attr('id')); 
    }); 
    } 
});

來源

2014-11-01 03:36:40 Felix

出於某種原因，我無法通過更新來實現該功能。 //可排序行 $（ 'sorted_table。'）排序（{ containerSelector： '表'， itemPath： '> TBODY'， itemSelector： 'TR'，佔位符：「'，更新：function（event，ui）{ alert（'you just changed it'）; } }）; – user2960038 2014-11-01 04:48:04

將JQuery.Sortable結果保存到SQL與ASP.NET MVC

回答

相關問題