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

本文关键字：ul 列表 顺序 保存 Jquery ui 按钮 单击 使用 | 更新日期: 2023-09-27 18:12:51

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

现在我需要保存新的列表顺序。我看过很多关于PHP和经典asp.net的例子，但我对它们没有经验，在这里我真的想关注razor和c#。我的数据库是MySQL。

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

<

视图/strong> 

<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"属性，该属性指示项目需要在列表中显示的位置。这也是需要调整的属性

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

我修复了!

为了澄清这个过程:

  • 有一个项目列表
  • 在OL中显示为li
    • 使用JQuery UI可排序方法，列表项是可拖动的
  • 用户拖动列表项
  • 用户保存列表项的新顺序

我所做的是:

我只是将项目加载到视图中。cshtml:

控制器

: 

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

视图/strong> 

@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, 5, 3, 8, 1}

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

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

public int[] alteredList { get; set; }

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

你的控制器的动作方法看起来像这样:

public ActionResult [ListActionMethod](NewViewModel listview)

和你的视图应该改变行:

@model ...NewViewModel

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

相关文章：