能够将JQuery可排序(新订单)保存到ASP.Net MVC控制器吗？
能够将JQuery可排序(新订单)保存到ASP.Net MVC控制器吗？
提问于 2016-09-23 12:51:44
我已经实现了JQuery可排序，而且它工作得很好。问题是，我不能以新的顺序将列表传递给控制器，所以我可以保存它。
如果原来的清单看起来像这个1-饼干，2-巧克力，3-饼干，4-糖果
而用户拖拉和度假村
1-巧克力2-饼干3-糖果4-饼干
如何将新的顺序传递给我的控制器以便重新排序我的模型中的数据。
$('td, a', '#MenuItem').each(function () {
var cell = $(this);
cell.width(cell.width());
});
$(document).ready(function () {
$('#MenuItem tbody').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
// POST to server using $.post or $.ajax
$.ajax({
data: data,
type: 'POST',
url: 'MoveFunction'
});
}
});
});
[HttpPost]
public ActionResult MoveFunction(Product vm)
{
return View(vm);
}
public class Product
{
//ID's
[Key]
public int ProductID { get; set; }
//Members
<fieldset class="fieldset">
<legend class="legend">Products</legend>
<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>
<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>
<td class="center-text nowrap">
@Html.ActionLink(" ", "Edit", new { id = item.ProductID }, new { title = "Edit", @class = "anchor-icon-no-text edit" })
@Html.ActionLink(" ", "Details", new { id = item.ProductID }, new { title = "Details", @class = "anchor-icon-no-text details" })
@Html.ActionLink(" ", "Delete", new { id = item.ProductID }, new { title = "Delete", @class = "anchor-icon-no-text delete" })
</td>
</tr>
}
</tbody>
</table>回答 1
Stack Overflow用户
发布于 2016-09-23 13:08:45
试着像这样
Js代码
$('#MenuItem tbody').sortable({
axis: 'y',
update: function (event, ui) {
var order = 1;
var model = [];
$("#MenuItem tbody tr").each(function () {
//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
var objModel = { Id: 1, OrderNo: order }; //This is for example to build your object and push in a modal array.
model.push(objModel);
order++;
});
if (model.length > 1)
{
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '@Url.Action("UpdateStatusOrder", "Status")', //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
}
});
}
}
}); 控制器代码
[HttpPost]
public ActionResult UpdateStatusOrder(List<StatusModel> model)
{
//Update code to update Orderno
foreach (var item in model)
{
var status = DBContext.Status.Where(x => x.Id == item.Id).FirstOrDefault();
if (status != null)
{
status.OrderNo = item.OrderNo;
}
DBContext.SubmitChanges();
}
}注:，这不是你的问题的确切答案，但这是相同的情况，对我来说，你可以遵循它。希望能对你有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39661264
复制相关文章
相似问题
腾讯云开发者
