【发布时间】：2016-10-10 13:40:21
【问题描述】：
我正在尝试创建一个菜单，允许用户将列表项重新排序为新顺序。列表数据是从数据库中提取的。我已经为我的菜单编写了 jQuery 可排序功能特性，但是，在用户重新排序列表后，我正在努力将数据以新顺序保存回模型。
这是我的可排序代码，除了var objmodel 的行之外，它都可以工作。创建此变量时，它设法从数据库中获取一个空对象，并使用新的 shuffle 函数值填充空对象（检查图像链接）。我需要它做的是抓取用户点击的对象，然后用新订单填充该对象。
我确实在控制器内部的方法中使用了断点，我注意到它正在从数据库中获取数据，但将字段分配给 null 会生成 NullReferenceException 错误。该方法的屏幕截图如下：
数据示例：
- 饼干
- 饼干
- 巧克力
在用户重新订购后：
- 巧克力
- 饼干
- 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
}
});
}
}
});
});
<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++;
}
}
【问题讨论】：
-
为测试创建了一个工作示例：jsfiddle.net/Twisty/45dw9fve 我发现的第一个问题，
ui.item.context未定义。这个对象应该是什么？ -
其次，您调用
Id: ui.item.data("model")，但您的tr元素上没有数据属性，在这种情况下是ui.item。但是您是在 ForEach 循环中执行此操作的，因此每次都会重新编写它。我怀疑您想迭代每一行，收集新订单和相关模型。
标签： jquery ajax asp.net-mvc-4 asp.net-ajax jquery-ui-sortable