允许用户重新排序表行并将更改保存到数据库 (ASP.NET MVC)答案

【问题标题】：Allow user to reorder table's rows and save changes to database (ASP.NET MVC)允许用户重新排序表行并将更改保存到数据库 (ASP.NET MVC)
【发布时间】：2016-05-10 04:47:01
【问题描述】：

我有一个名为“Order”属性的照片列表，客户希望能够对元素重新排序，并将更改保存回服务器。

有人知道我该怎么做吗？在客户端（使用 JQuery 或 JavaScript）以及如何将行的索引发送到控制器？

【问题讨论】：

jQuery UI sortable - sorting images的可能重复
我不会说它是完全重复的（例如不同的堆栈），但无论如何这对于这个问题来说是一个非常好的资源。

标签： jquery asp.net asp.net-mvc twitter-bootstrap html-table

【解决方案1】：

我们不得不做类似的事情，基本上你必须自己管理。

像https://jqueryui.com/sortable/ 这样的插件将有助于对页面上的项目进行物理排序，但是当将其持久化到数据库时，您必须自己管理。

从 UI 的角度来看，您有 2 个选项@

使其成为主要 UI 流程的一部分，或者
使其成为单独的“屏幕”/选项

第一个集成度更高，但最适合“连贯”的页面项目。瓷砖/图像等。第二个更适合复杂元素（例如带有控件的表格行等）。

无论哪种情况，逻辑都是相似的：

在更改顺序时处理事件（请参阅您的插件或选择）
检查新的排序（可能只给您更改的元素，或者您可能需要查看整个集合）
使用元数据（也许您在页面创建时写入data- 属性）将页面上的每个元素映射到您的数据对象之一。您可能正在使用淘汰赛等，这会使这更简单......
保持对数据库的更改（在用户保存/始终）。

对于第 4 步，您只需实现一个新的控制器操作，该操作接受您拥有的有序数据集（id 列表等）。然后它与 DB 对话以更新此 ordering / set ordinal 列。

如果您已经有一个“编辑”样式页面，并且您正在使用现有的复合模型 (List<MyThingEditVM> model) 将其回发到控制器，则为每个包含 Order 值的元素添加一个隐藏的表单字段，重新订购时编辑此客户端，然后它将与其余的表单数据一起发送。

【讨论】：

【解决方案2】：

你看过@DataTables - http://datatables.net/examples/server_side/

过去曾使用过它们并且非常有用 - 在他们的网站上也有很多很好的文档

【讨论】：