使用 Jquery ui 单击按钮后保存新的 ul 列表顺序答案

【问题标题】：Save new ul list order after button click using Jquery ui使用 Jquery ui 单击按钮后保存新的 ul 列表顺序
【发布时间】：2015-09-15 11:41:13
【问题描述】：

我有一个带有几个动态加载的列表项的 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] 包含一个“orderposition”属性，指示该项目是否需要显示在列表中。这也是需要调整的属性。

【问题讨论】：

顺便说一句，如果顺序很重要，我使用UL 似乎不合逻辑。使用OL 可能更符合语义，绝对不会产生进一步的影响。我知道，这是吹毛求疵，但是，大多数人在所有情况下都必须使用 UL 的习惯，而 OL 通常适合语义纳粹我 :-)
哈哈你说得对！我向你的语义纳粹部分道歉！什么时候都用 UL 确实是个坏习惯。

标签： javascript c# jquery razor

【解决方案1】：

我修好了！

所以只是为了澄清这个过程：

有一个项目列表
它们在 OL 中显示为 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();
    });

我希望这对人们有所帮助！

【讨论】：

【解决方案2】：

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

{2, 5, 3, 8, 1}

你的控制器可以期待这个：(... , int[] alteredList)

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

public int[] alteredList { get; set; }

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

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

public ActionResult [ListActionMethod](NewViewModel listview)

你的观点应该改变这一行：

@model ...NewViewModel

【讨论】：

我将如何做到这一点？我的意思是，我怎样才能创建第二个列表并将新索引放在那里。并确保控制器知道什么索引到什么模型项。
感谢您的回复。但是，我仍然无法弄清楚您的意思。在获取 POST 的 actionresult 中，它将具有包含项目列表和索引（整数）列表的视图模型。但是，如何填充索引列表并使用列表项的索引更新它们？

【解决方案3】：

为每个 li 元素添加一个属性，例如 data= 然后使用 $('Your selector').attr("data") 访问这些属性并检查它是奇数还是偶数

【讨论】：