从MVC视图模型保存重新排序的列表项 [英] Saving a reordered List item from an MVC View Model

问题描述

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

I have a view model which binds to a 'TreasureHuntDetails' object, which contains a list of clues. Here's part of the data model for it.

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

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

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

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

On the page, I have a table. A foreach loop iterates through the list of clues to add them to the table, e.g.

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

for循环内的表元素很大，但这是表元素列之一的示例:

The table elements inside the for loop are quite large, but here's an example of one of the table element columns:

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

到目前为止一切顺利.然后，我使用JQuery UI允许通过拖放来对表中的项进行重新排序，如下所示:

All well and good so far. Then I'm using JQuery UI to allow the items of the table to be reordered using drag and drop, like this:

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

很好，我可以拖放元素.

All well and good, I can drag and drop the elements.

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

The problem is that I don't know how to save the new order of elements and save them back to the database.

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

The first thing I tried was simply passing the list of clues to a controller method, but I found that once the list of clues reached the controller method, it was always null.

例如:

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

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

Even if I send the whole @Model, list of clues within is always null. Removing the new list instantiation from the constructor of the data model didn't solve this problem.

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

Another thing I tried was wrapping the whole table into a HTML form, but still the list of clues remains null.

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

So basically, this question is really two questions:

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

1) Why is the list of clues always null after sending the model object to a controller.

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

2) How to save the new order of the list of items?

更新:根据@recursive的建议，我看到尝试将线索元素提交到HTML表单时出错了.

UPDATE: As per suggestion by @recursive, I see where I made an error when trying to submit the clue elements to the HTML form.

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

I used this outside the for loop which iterated over the clue elements:

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

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

I had to add the HiddenFor lines inside of the for loop (for each clue item), and for EACH property of the clue item, e.g.

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

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

So that would be one step forward to be able to get the list items sent to the controller, but I think I still need code that will reflect the new order of the clue items when sent to the controller. Currently, on rearranging the order of the elements on screen using the JQuery sortable() method, this doesn't change the order of the elements as they are stored in the data model binded to the view (@Model.Clues).

推荐答案

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

1) As @resursive said in his comment, you need to have hidden elements on the page that map to properties in your Clue class.

2)关于坚持线索的顺序，您需要在数据库中添加一列，以保留每个线索在列表中的位置，并将position属性添加到类中.因此您的班级需要包括

2) As for persisting the order of clues, you'll need to add a column to your database that holds the position of each clue in the list and add the position property to your class. So your class would need to include

public int Position {get;set;}

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

which should pull from the database when the page is created. Then just before rendering the page, you should reorder the clue list based on the Position variable.

使用jquery的sortable属性.查看此线程以供参考.在停止拖动事件中(或之前)您的提交)，循环浏览每个可拖动对象，并设置对象每个隐藏的Position属性的值.

Use jquery's sortable attribute. Check out this thread for reference. In the stop drag event (or right before your submit), loop through each of your draggable objects and set the value of each of the hidden Position properties of your objects.

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

这篇关于从MVC视图模型保存重新排序的列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！