如何使用JQuery Sortable从数据库中获取数据并将数据发回
我正在尝试创建一个菜单，允许用户将列表项重新排序为新订单。 列表数据从数据库中提取。 我为我的菜单编写了jQuery可排序function，但是，在用户重新排序列表之后，我很难将新订单中的数据保存回模型。
这是我的可排序代码，它除了包含var objmodel的行外都有效。 创建此变量时，它会设法从数据库中获取空对象，并使用新的shuffle函数值填充空对象（检查指向图像的链接）。 我需要它做的是抓取用户点击的对象然后用新订单填充该对象。
我确实在控制器中使用了我的方法的断点，我注意到它从数据库中获取数据但是将字段分配给null，这会产生NullReferenceException错误。 该方法的屏幕截图如下：
数据示例：
- 曲奇饼
- cookies
- 巧克力
并在用户重新订购后：
- 巧克力
- cookies
- cookies
我一直在努力解决这个问题，如果有人可以提供帮助，我会解决这个问题吗？
$(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 } }); } } }); }); Product Code Product Template @* @Html.DisplayNameFor(model => model.IndexList[0].Priority) @Html.DisplayNameFor(model => model.IndexList[0].WindowProduct) *@ Description Actions @foreach (var item in Model.IndexList) { @Html.DisplayFor(modelItem => item.ProductCode) @Html.DisplayFor(modelItem => item.ProductTemplate.Description) @* @Html.DisplayFor(modelItem => item.Priority) @Html.Raw(item.WindowProduct ? "Yes" : "No") *@ @Html.DisplayFor(modelItem => item.Description) }
[HttpPost] // This Code Needs Fixing public void MoveFunction(List 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 productList = new List(); 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++; } }
我注释掉了以下内容：
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
Product Code Product Template Priority Window Product Description Actions 0001 Template 1 1 Yes Description 1 X 0020 Template 1 5 Yes Description 2 X 0300 Template 3 1 No Description 3 X 4000 Template 4 1 Yes Description 4 X
您的.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/ url，在这种情况下，它只是将json的数据回传给data 。
当您移动项目，对其进行排序时，您可以打开控制台并查看模型arrays。 如果您有疑问，请发表评论。