Question

我正在尝试创建一个菜单，允许用户将列表项重新排序为新订单。列表数据从数据库中提取。我为我的菜单编写了jQuery可排序功能，但是，在用户重新排序列表之后，我很难将新订单中的数据保存回模型。

这是我的可排序代码，除var objmodel行外，它都有效。创建此变量时，它会设法从数据库中获取一个空对象，并使用新的shuffle函数值填充空对象（检查指向图像的链接）。我需要做的是抓取用户点击的对象，然后用新订单填充该对象。

我确实在控制器中使用了我的方法的断点，我注意到它从数据库中获取数据，但是将字段分配给null，这会产生NullReferenceException错误。该方法的屏幕截图如下：

enter image description here

数据示例：

饼干
饼干
巧克力

用户重新订购后：

巧克力
饼干
饼干

如果有人可以提供帮助，我一直在努力解决这个问题吗？

 $(document).ready(function () {
    $('#MenuItem tbody').sortable({
        axis: 'y',
        update: function (event, ui) {
            alert(ui.item.context.id);
            var order = 1;
            var model = [];
            // var sortedIDs = $("#MenuItem tbody").sortable("serialize");
            //alert(sortedIDs);
            //alert(objModel);

            //$.getJSON('ProductsList', { ID: objModel }, function (result) {

            $("#MenuItem tbody tr").each(function () {

                var objModel = { Id: ui.item.data("model"), ShuffleFunction: order }; //This is for example to build your object and push in a modal array.

                //building a new object and pushing in modal array 
                //Here I am setting OrderNo property which is i am using in my db and building my object
                model.push(objModel);
                     order++;
                    //alert(result);
                //});
            });

           if (model.length > 1) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("MoveFunction", "Product")', //This is my url put your url here and pass model as data it is an array of my items
                    data: JSON.stringify({ model: model }),
                    success: function (data) {
                        //do something
                    },
                    error: function (e) {
                        //do something
                    }
                });
            }
        }
    });

});

 <table id = "MenuItem"  class="promo full-width alternate-rows" style="text-align: center;">  <!-- Cedric Kehi DEMO CHANGE -->




        <tr>
            <th>Product Code
            </th>
            <th>Product Template
            </th>
            @*<th>
                @Html.DisplayNameFor(model => model.IndexList[0].Priority)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IndexList[0].WindowProduct)
            </th>*@
            <th>Description <!-- JACK EDIT -->
            </th>
            <th>Actions</th>
        </tr>
        <tbody >


        @foreach (var item in Model.IndexList)
        {




            <tr id ="trendingDisplay">

                <td class="center-text">

                    @Html.DisplayFor(modelItem => item.ProductCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ProductTemplate.Description)
                </td>
                @*<td class="center-text">
                    @Html.DisplayFor(modelItem => item.Priority)
                </td>
                <td class="center-text">
                    @Html.Raw(item.WindowProduct ? "Yes" : "No")
                </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.Description)

                </td>



            </tr>



        }


            </tbody>

    </table>

 [HttpPost]
    // This Code Needs Fixing 
    public void MoveFunction(List<Product> model)
    {

        int id = (int)System.Web.HttpContext.Current.Session["CustomerID"];
        int customerid = (int)System.Web.HttpContext.Current.Session["CustomerID"];
        int promotionid = (int)System.Web.HttpContext.Current.Session["PromotionID"];

        List<Product> productList = new List<Product>();
        productList = ProductLogic.GetBy(x => x.PromotionID == promotionid && x.Active == true);
        int i = 1;

        foreach (var item in model)
        {
            var status = ProductLogic.GetBy(x => x.ProductID == item.ProductID).FirstOrDefault();
            if (status != null)
            {
                status.ShuffleFunction = item.ShuffleFunction;
            }
            ProductLogic.Update(status);
            i++;
        }

    }

Answer 1

我评论了以下一行：

alert(ui.item.context.id);

我认为你的意思是：

alert(ui.item.attr("id"));

或者也许：

alert(ui.item[0].context.id);

无论如何，它在我的测试中引起了一个问题。接下来，我必须查看您的循环并确定您在排序后尝试使用的信息。由于每个排序项都是一行，我找不到行的data-model属性;因此，我添加了一个。如果这是您的.NET脚本生成的HTML，请考虑。由于这是你的jQuery将使用的，在你的例子中不值得使用.NET脚本，但是某些类型的示例输出。

工作示例：https://jsfiddle.net/Twisty/45dw9fve/3/

<强> HTML

<table id="MenuItem" class="promo full-width alternate-rows" style="text-align: center;">
  <!-- Cedric Kehi DEMO CHANGE -->
  <tr>
    <th>Product Code</th>
    <th>Product Template</th>
    <th>Priority</th>
    <th>Window Product</th>
    <th>Description</th>
    <th>Actions</th>
  </tr>
  <tbody>
    <tr id="trendingDisplay" data-model="model-1">
      <td class="center-text">0001</td>
      <td>Template 1</td>
      <td class="center-text">1</td>
      <td class="center-text">Yes</td>
      <td>Description 1</td>
      <td>X</td>
    </tr>
    <tr id="trendingDisplay" data-model="model-2">
      <td class="center-text">0020</td>
      <td>Template 1</td>
      <td class="center-text">5</td>
      <td class="center-text">Yes</td>
      <td>Description 2</td>
      <td>X</td>
    </tr>
    <tr id="trendingDisplay" data-model="model-3">
      <td class="center-text">0300</td>
      <td>Template 3</td>
      <td class="center-text">1</td>
      <td class="center-text">No</td>
      <td>Description 3</td>
      <td>X</td>
    </tr>
    <tr id="trendingDisplay" data-model="model-4">
      <td class="center-text">4000</td>
      <td>Template 4</td>
      <td class="center-text">1</td>
      <td class="center-text">Yes</td>
      <td>Description 4</td>
      <td>X</td>
    </tr>
  </tbody>
</table>

您的.NET脚本将填充表格，您可能需要调整它的循环以将data-model属性放入每一行。

<强>的jQuery

$(document).ready(function() {
  $('#MenuItem tbody').sortable({
    axis: 'y',
    update: function(event, ui) {
      //alert(ui.item.context.id);
      var order = 1;
      var model = [];

      $("#MenuItem tbody tr").each(function(key, elem) {
        model.push({
          id: $(elem).data("model"),
          ShuffleFunction: order
        });
        order++;
      });
      console.log(model);

      if (model.length > 1) {
        $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          //url: '@Url.Action("MoveFunction", "Product")', //This is my url put your url here and pass model as data it is an array of my items
          url: '/echo/json/',
          data: {
            json: JSON.stringify({
                model: model
              })
            },
          success: function(data) {
            //do something
            console.log(data);
          },
          error: function(e) {
            //do something
          }
        });
      }
    }
  });
});

对于jsfiddle示例，我使用了他们的/echo/json/网址，在这种情况下只会将json的数据回传给data。

当您移动项目，对其进行排序时，您可以打开控制台并查看模型数组。如果您有疑问，请发表评论。

如何使用JQuery Sortable从数据库中获取数据并将数据发回

1 个答案: