允许用户重新排序表的行并保存对数据库的更改（ASP.NET MVC）

Question

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

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

Answer 1

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

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

从UI的角度来看，你有两个选项@

1. 将其作为主UI流程的一部分或
2. 将其设为单独的“屏幕”/选项

第一个更集成，但最适合“coherant”页面项目。瓷砖/图像等。第二种方法更适用于复杂的元素（如带控件的表格行等）。

在任何一种情况下，逻辑都类似：

1. 更改订购时处理事件（请参阅您的插件或选择）
2. 检查新订单（您可能只是更改了元素，或者您可能需要查看整个订单）
3. 使用元数据（也许您在页面创建时以data-属性编写）将页面上的每个元素映射到您的一个数据对象。您可能正在使用淘汰等，这会使这更简单......
4. 将更改保留在数据库中（在用户保存/总是）。

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

如果您已经有一个“编辑”样式页面，您将使用现有的复合模型（List<MyThingEditVM> model）回发到控制器，然后为包含{{1}的每个元素添加一个隐藏的表单字段值，在重新排序时编辑此客户端，然后它将通过邮件中的其余表单数据发送。

Answer 2

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

吗？

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