2

我有一个视图模型，它绑定到一个“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）如何保存项目列表的新顺序？

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

我在迭代线索元素的 for 循环之外使用了它：

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

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

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

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

4

3 回答 3

5

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

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

public int Position {get;set;}

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

编辑：使用 jquery 的 sortable 属性。查看此线程以供参考。在停止拖动事件中（或在您提交之前），循环遍历每个可拖动对象并设置对象的每个隐藏位置属性的值。

var positionIndex = 0;
$('.draggableObjectClass).each(function () {
    $(this).find('input[id$=_Position]').val(positionIndex++);
});
于 2013-04-24T18:29:05.667 回答
0

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

您不会，因为您现在正在循环中迭代它们for，它们将按照您将它们发送到视图的顺序进行索引。您的订单必须已被维护。

于 2013-04-24T18:52:49.583 回答
0

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

已经有了这个方法来实现 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 的新顺序。重新排序表元素后，包含项目的数据模型不会改变，因此这是必要的。

然后，它使用 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;
}

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

于 2013-04-25T19:05:05.660 回答