c# - 从 MVC View 模型中保存重新排序的列表项

Question

我有一个绑定(bind)到“TreasureHuntDetails”对象的 View 模型，其中包含一个线索列表。这是它的数据模型的一部分。

    public TreasureHuntDetails()
    {
        Clues = new List<Clue>();
    }

    [Key]
    public int TreasureHuntId { get; set; }

    public List<Clue> Clues { get; set; }

在页面上，我有一张 table 。 foreach 循环遍历线索列表以将它们添加到表中，例如

@for (int i = 0; i < Model.Clues.Count; i++)

for 循环中的表元素非常大，但这里是其中一个表元素列的示例:

<td>@Html.DisplayFor(m => Model.Clues[i].Location)</td>

到目前为止一切都很好。然后我使用 JQuery UI 允许使用拖放对表格的项目进行重新排序，如下所示:

        <script type="text/javascript">
        $(document).ready(function()
        {
            $("#clueTable tbody").sortable().disableSelection();
        });
        </script>

一切都很好，我可以拖放元素。

问题是我不知道如何保存元素的新顺序并将它们存回数据库。

我尝试的第一件事是简单地将线索列表传递给 Controller ​​方法，但我发现一旦线索列表到达 Controller 方法，它总是为空。

例如:

@Url.Action("ViewCluePage", @Model.Clues)

即使我发送了整个@Model，其中的线索列表也始终为空。从数据模型的构造函数中删除新的列表实例并没有解决这个问题。

我尝试的另一件事是将整个表格包装成 HTML 表单，但线索列表仍然为空。

所以基本上，这个问题实际上是两个问题:

1) 为什么在将模型对象发送到 Controller 后线索列表始终为空。

2) 如何保存项目列表的新顺序？

更新:根据@recursive 的建议，我发现在尝试将线索元素提交到 HTML 表单时出错的地方。

我在遍历线索元素的 for 循环之外使用了它:

@Html.HiddenFor(m => m.Clues)

我必须在 for 循环内添加 HiddenFor 行(针对每个线索项)，以及针对线索项的每个属性，例如

@Html.HiddenFor(m => m.Clues[i].Id)

所以这将是向前迈出的一步，能够将列表项发送到 Controller ，但我认为我仍然需要代码来反射(reflect)线索项在发送到 Controller 时的新顺序。目前，在使用 JQuery sortable() 方法重新排列元素在屏幕上的顺序时，这不会更改元素的顺序，因为它们存储在绑定(bind)到 View (@Model.Clues) 的数据模型中。

Answer 1

1) 正如@resursive 在他的评论中所说，您需要在页面上隐藏元素，这些元素映射到您的 Clue 类中的属性。

2) 至于保持线索的顺序，您需要在数据库中添加一个列来保存列表中每个线索的位置，并将位置属性添加到您的类中。所以你的类(class)需要包括

public int Position {get;set;}

创建页面时应该从数据库中提取。然后就在呈现页面之前，您应该根据 Position 变量重新排序线索列表。

编辑:使用 jquery 的 sortable 属性。 Check out this thread for reference.在停止拖动事件中(或就在您提交之前)，遍历每个可拖动对象并设置对象的每个隐藏 Position 属性的值。

var positionIndex = 0;
$('.draggableObjectClass).each(function () {
    $(this).find('input[id$=_Position]').val(positionIndex++);
});