使用ASP.NET MVC将JQuery.Sortable结果保存到SQL

Question

我一直在寻找许多与此相关的话题，但我只是不明白。

我有一个表，可以从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调用传递给控制器​​以进行处理。 我尝试了其中一些代码，但没有成功。

任何帮助将是巨大的！

Answer 1

作为一个大概的想法（与您的问题下的评论有关），您可以遍历Sortable的更新回调中的表行。 在这里，您可以根据需要访问当前元素，获取ID，其他属性和索引。

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