Question

我有一个带有几个动态加载列表项的ul（由控制器给视图）。我可以使用JQuery UI和Ruxable Sortable库移动列表项。

现在我需要保存新的列表顺序。我已经看过许多PHP和经典asp.net的例子，但我没有经验，我真的想专注于razor和C＃。我的数据库是MySQL。

当用户点击提交按钮时，所有控制器需要检索的是相同的列表但具有更改的顺序位置。我怎样才能做到这一点？

查看

<ul class="list-group sortable" id="forumlist">
    @{
            for (int i = 0; i < Model.Count(); i++)
            {
                <li id="li"@Model[i].id class="list-group-item">@Model[i].name</li>    
             }
    }
</ul>
<button type="button" class="btn btn-info">Opslaan</button>

因此;有没有办法通过改变索引将项目集合发送回控制器（通过HttpPost）？ Model [i]包含＆＃34; orderposition＆＃34;表示该项目需要在列表中显示的属性。这也是需要调整的属性。

Answer 1

我修好了！

只是为了澄清这个过程：

有一个项目列表
它们作为li
使用JQuery UI可排序方法，列表项可拖动
用户拖动列表项
用户保存列表项的新订单

所以我做的是：

我只是将项目加载到view.cshtml：

<强>控制器：

   public ActionResult Items()
    {
        List<item> items= [METHOD that returns the items]();
        return View(items);
    }

查看

@model List<Models.Items> @using (Html.BeginForm("UpdateItems", "ItemController", FormMethod.Post, new { id = "updateitemform" })) { <ol class="list-group sortable" id="itemlist"> @{ for (int i = 0; i < Model.Count(); i++) { <li data-order="@Model[i].position" id="@Model[i].Forum_id" class="list-group-item">item </li> @Html.HiddenFor(model => Model[i].Item_id) @Html.HiddenFor(model => Model[i].position,new { @id = "item"+@Model[i].Item_id }) } } </ol> <button type="button" id="saveneworderbutton" class="btn btn-info">Save this shit!</button> }

现在神奇：Javascript / jquery！

$(document).on("click", "#saveneworderbutton", function () { $(".list-group-item").each(function (index) { var id = $(this).attr("id"); $("#" + "item" + id).val(index); }); $("#updateitemform").submit(); });

我希望这有助于人们！

Answer 2

你能发送这两个信息吗？我的意思是，你可以发送两个列表，一个应该是改变的索引，一个像这样的列表：

{2, 5, 3, 8, 1}

您的控制器可以预期：(... , int[] alteredList)

嗯，更好的方法是创建一个带有属性的视图模型：

public int[] alteredList { get; set; }

然后，您可以在视图中填充该属性，并且您的控制器将期待新模型（新模型是您为此操作创建的视图模型）

您的控制器的操作方法如下所示：

public ActionResult [ListActionMethod](NewViewModel listview)

并且您的观点应该改变这一行：

@model ...NewViewModel

Answer 3

为每个li元素添加一个属性，例如data =＆lt;％= i％＆gt; 然后使用$（'Your selecter'）访问这些属性.attr（“data”）并检查它是奇数还是偶数

按下按钮后使用Jquery ui

3 个答案: