gpt4 book ai didi

jquery - 能够将 JQuery Sortable(新顺序)保存到 ASP.Net MVC Controller 吗?

转载 作者:行者123 更新时间:2023-12-01 07:45:06 25 4
gpt4 key购买 nike

我已经实现了 JQuery 可排序,并且工作正常。问题是我无法将列表按新顺序传递给 Controller ​​,以便我可以保存它。

如果原始列表是这样的1 - cookies 2 - 巧克力3 - cookies 4 - 糖果

用户拖动并诉诸于

1 - 巧克力2 - cookies 3 - 糖果4 - cookie

如何将新订单传递到我的 Controller ,以便对模型中的数据重新排序。

  $('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>

最佳答案

尝试这样

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
}
});
}
}
});

Controller 代码

[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();
}
}

注意:这不是您问题的确切答案,但这是相同的情况,并且为我工作,您可以遵循它。希望对您有所帮助。

关于jquery - 能够将 JQuery Sortable(新顺序)保存到 ASP.Net MVC Controller 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39661264/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com