从MVC视图模型中保存重新排序的列表项

本文关键字：排序 列表 新排序 视图 MVC 模型 保存 | 更新日期: 2023-09-27 18:10:40

我有一个绑定到'TreasureHuntDetails'对象的视图模型，该对象包含一个线索列表。下面是它的部分数据模型。

    public TreasureHuntDetails()
    {
        Clues = new List<Clue>();
    }
    [Key]
    public int TreasureHuntId { get; set; }
    public List<Clue> Clues { get; set; }

在页面上，我有一个表。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>

很好，我可以拖放元素。

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

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

例如:

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

即使我发送整个@Model，其中的线索列表也总是空的。从数据模型的构造函数中删除新的列表实例化并不能解决这个问题。

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

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

1)为什么在将模型对象发送给控制器后线索列表总是为空?

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

更新:根据@递归的建议，我看到我在试图向HTML表单提交线索元素时犯了一个错误。

我在迭代线索元素的for循环之外使用了这个:

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

我必须在for循环中添加HiddenFor行(对于每个线索项目)，并且对于线索项目的每个属性，例如

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

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

从MVC视图模型中保存重新排序的列表项

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

2)为了保持线索的顺序，你需要在你的数据库中添加一列来保存列表中每个线索的位置，并在你的类中添加position属性。所以你的类需要包含

public int Position {get;set;}

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

编辑:使用jquery的sortable属性。查看这个线程作为参考。在停止拖动事件中(或在提交之前)，循环遍历每个可拖动对象，并设置对象的每个隐藏位置属性的值。 
var positionIndex = 0;
$('.draggableObjectClass).each(function () {
    $(this).find('input[id$=_Position]').val(positionIndex++);
});

，但我认为我仍然需要代码，将反映的线索项目的新顺序，当发送到控制器。

你不会，因为你现在在for循环中迭代它们，它们将按照你发送给视图的顺序被索引。

从这里发布的答案中得到建议，我想出了以下解决方案。

已经有了这个方法来实现UI元素的拖放重新排序，

    $(document).ready(function()
    {
        $("#clueTable tbody").sortable().disableSelection();
    });

我需要一种能够读取项目的新顺序并将其发送给MVC控制器的方法。为了做到这一点，我使用了Razor @Html。AttributeEncode方法，将每个项目的Id写入表的每行上的一列，如下所示:

<td class="Ids" id="@Html.AttributeEncode(Model.Clues[i].Id)">@{var number = i + 1; @number}</td>

(这是一个for循环，迭代遍历列表项)

然后，我创建了以下Javascript函数，它是从我放置在元素表上方的'SaveNewOrder'按钮调用的(用户在完成表上的项目重新排序后按下此按钮):

    function getNewOrder()
    {
        var positions = new Array();
        for (var i = 0; i < $('.Ids').length; i++)
        {
            positions[i] = $('.Ids')[i].id;
        }
        $.ajax(
            {
                type: "POST",
                url: "@Url.Action("ReorderClues", "Clues")",
                data:{ treasureHuntDetails: $("form").serialize(), ids: JSON.stringify(positions) }
                contentType:'application/json'
            }).done(function()
            {
                 window.location.href = '@Url.Action("Clues", Model)';  
            }).   
    }

它所做的是从每个表项中读取Id元素，并将它们写入数组-因此该数组包含Id的NEW顺序。在重新排序表元素后，包含这些项的数据模型不会改变，这就是为什么需要这样做的原因。

然后使用JQuery Ajax方法在我的'Clues' MVC控制器上调用'ReOrderClues'方法，传递数据模型的序列化版本(包含原始顺序的线索项目列表)和包含新顺序的线索Id列表的数组。当结果从控制器(.done)返回时，我调用一个刷新页面元素的控制器。

因此，与其维护与每个线索相关的位置值(这将涉及代码中其他地方的重大重构)，我所做的是交换周围线索的内容以反映新的顺序，但保持Id在相同的位置。

这就是我如何实现使用MVC控制器:

public ActionResult ReorderClues(TreasureHuntDetails treasureHuntDetails, int[] ids)
{
    using (var db = new TreasureHuntDB())
    {
        var clues = treasureHuntDetails.Clues;
        var newClues = NewOrderList(clues, ids);
        // Save the changes of each clue
        for (var i = 0; i < newClues.Count;i++ )
        {
            db.Entry(clues[i]).CurrentValues.SetValues(newClues[i]);
            db.SaveChanges();
        }
        treasureHuntDetails.Clues = newClues;
        TempData["Success"] = "Clues reordered";
    }
    return RedirectToAction("Clues", treasureHuntDetails);
}
public List<Clue> NewOrderList(List<Clue> clues, int[] ids)
{
    var newClueOrder = new List<Clue>();
    // For each ID in the given order
    for (var i = 0; i < ids.Length; i++)
    {
        // Get the original clue that matches the given ID
        var clue = clues.First(clue1 => clue1.Id == ids[i]);
        var newClue = Clue.Clone(clue);
        // Add the clue to the new list. 
        newClueOrder.Add(newClue);
        // Retain the ID of the clue 
        newClueOrder[i].Id = clues[newClueOrder.Count - 1].Id;
    }
    return newClueOrder;
}

在上面的代码片段中，treasury是我的实体框架数据库上下文。

相关文章：