Mvc4将Jquery可排序列表项的顺序保留到控制器答案

【问题标题】：Mvc4 persist order of Jquery sortable list items to controllerMvc4将Jquery可排序列表项的顺序保留到控制器
【发布时间】：2013-12-10 09:32:10
【问题描述】：

我有一个项目列表，我希望用户使用可排序的 Jquery 进行排序。项目的结构是这样的：

public class SortableItems
{

    public int Code { get; set; }
    public byte? Priority   { get; set; }
    public string Name { get; set; }
    public int IsActive { get; set; }
}

在我看来，我通过以下方式在表单中呈现可排序：

            @using (Html.BeginForm("TestAction", "TestController", FormMethod.Post, new { id = "submitTest" }))
            {
                <ul id="sortable" style="padding:0px;">

                    @for (int i = 0; i < Model.List.Count(); i++)
                    {
                        <li class="ui-state-default">
                            @Html.HiddenFor(x => Model.List[i].Code, new { @class = "id" })
                            @Html.HiddenFor(x => Model.List[i].Priority, new { @class = "order" })
                            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                            @Model.List[i].Name
                        </li>
                    }
                </ul>
                  <input type="submit" class="btn btn-primary" value="Update" />
                }

现在用户可以根据自己的意愿对列表中的 N 个项目进行排序。但是我还没有找到更新优先级的pidden值的方法（用户排序的项目的顺序）

如何将项目的顺序保存到我的控制器？

【问题讨论】：

控制器上没有持久化数据这样的东西。您的意思是将值保存到一些持久性存储中，例如 RDBMS 吗？
@emrenevayeshirazi 是的，我只需要将项目的顺序发送到控制器，然后我就可以轻松地将所有内容保存到数据库中。
您需要通过 ajax 更新来执行此操作，因为数据是动态的，并且不再与在请求时将其放入表单的顺序有关。我以前成功地做到了这一点，但刚刚在运输中。我会在接下来的一个小时左右更新一个可以帮助你的答案。很抱歉没有提供示例，但您可能会在此期间发现该方法
其实快速搜索了一下。以下是 jquery 中的方法的胆量（忽略 php lpart obvs）：stackoverflow.com/questions/7342727/…

标签： javascript jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

这就是我设法解决问题的方法：

在客户端我做了以下操作：

var neworder = new Array();

$("#sortable").disableSelection();


$("#sortable").sortable({
    stop: function (event, ui) {
        neworder = new Array();
        $('#sortable li').each(function () {
            //get the id
            var id = $(this).attr("data-id");
            neworder.push(id);
        });
    }
});


$(function () {
    $('#submitTest').submit(function () {

        if (neworder.length < 1) {
            return false;
        }
        $.ajax({
            url: "GuardarPrioridad", type: "POST", dataType: "json",
            data: { orden: neworder.toString() },
            success: function (result) {
                $('#ShowResultHere').text(result);
                $("#submitTest").hide();//  .tex.html(result);
            }
        });
        return false;
    });
});

每次用户移动一个元素时，我都会更新一个数组，该数组按照用户放入元素的顺序包含元素的 ID。

然后我通过 ajax 提交这个数组，它被控制器接收。

我的控制器看起来像这样：

public JsonResult SavePriority(string orden)
{
  string[] data= orden.Split(',');

   for (int i = 0; i < droguerias.Length; i++)
  {
   //save to DB

  }
  return Json("Saved!");
}

【讨论】：