jquery 可在 asp.net mvc 中排序
jquery sortable in asp.net mvc
每当用户根据他们的偏好对 table 行进行排序时,我正在尝试使用 ajax 发送任务 ID。但是 ajax 中捕获的数据似乎并没有发送到控制器。我已经调试了代码,数据被捕获到 jQuery,但是 ajax 没有发送它。可能是什么问题?这是我的代码。
我的任务索引
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
@section scripts {
<script type="text/javascript">
$("#sortable").sortable({
update: function (event, ui) {
var itemIds = "";
$("#sortable").find(".taskSingleInline").each(function ()
{
var itemId = $(this).attr("data-taskid");
itemIds = itemIds + itemId + ",";
});
$.ajax({
url: '@Url.Action("UpdateItem", "TaskBoard")',
data: { itemIds: itemIds },
type: 'POST',
success: function (data) {
},
error: function (xhr, status, error) {
}
});
}
});
</script>
}
<style>
#sortable tr:hover {
background-color: cadetblue;
color: beige;
}
</style>
@using (Html.BeginForm("Index", "TaskBoard", FormMethod.Post))
{
<div class="container">
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody id="sortable" style="cursor:pointer;">
@foreach (var i in Model)
{
<tr>
<td>@i.Id</td>
<td class="taskSingleInline" id="task@(i.Id)" data-taskid="@(i.Id)">@i.Name</td>
<td>@i.RowNo</td>
</tr>
}
</tbody>
</table>
<button type="submit"> submit</button>
</div>
</div>
}
这是我的控制器
public ActionResult UpdateItem(string itemIds)
{
int count = 1;
List<int> itemIdList = new List<int>();
itemIdList = itemIds.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).ToList();
foreach( var i in itemIdList)
{
try
{
First f = TE.Firsts.Where(x => x.Id == i).FirstOrDefault();
f.RowNo = count;
TE.Firsts.AddOrUpdate(f);
TE.SaveChanges();
} catch(Exception)
{
continue;
}
count++;
}
return Json(true, JsonRequestBehavior.AllowGet);
}
其中 TF 是我的数据库上下文
我的模特 "first"
enter image description here
并且我已经在我的共享 _layout 中进行了渲染
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
事实证明问题出在我的第一次 table 上。我删除了 try-catch 块以查看异常,显然我第一个 table 中的所有字段都被设置为主键?我不记得这样做了,我不知道它是怎么发生的,所以我从除 id 之外的所有字段中删除了身份并且它工作得很好,我希望这在某种程度上有所帮助。
每当用户根据他们的偏好对 table 行进行排序时,我正在尝试使用 ajax 发送任务 ID。但是 ajax 中捕获的数据似乎并没有发送到控制器。我已经调试了代码,数据被捕获到 jQuery,但是 ajax 没有发送它。可能是什么问题?这是我的代码。 我的任务索引
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
@section scripts {
<script type="text/javascript">
$("#sortable").sortable({
update: function (event, ui) {
var itemIds = "";
$("#sortable").find(".taskSingleInline").each(function ()
{
var itemId = $(this).attr("data-taskid");
itemIds = itemIds + itemId + ",";
});
$.ajax({
url: '@Url.Action("UpdateItem", "TaskBoard")',
data: { itemIds: itemIds },
type: 'POST',
success: function (data) {
},
error: function (xhr, status, error) {
}
});
}
});
</script>
}
<style>
#sortable tr:hover {
background-color: cadetblue;
color: beige;
}
</style>
@using (Html.BeginForm("Index", "TaskBoard", FormMethod.Post))
{
<div class="container">
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody id="sortable" style="cursor:pointer;">
@foreach (var i in Model)
{
<tr>
<td>@i.Id</td>
<td class="taskSingleInline" id="task@(i.Id)" data-taskid="@(i.Id)">@i.Name</td>
<td>@i.RowNo</td>
</tr>
}
</tbody>
</table>
<button type="submit"> submit</button>
</div>
</div>
}
这是我的控制器
public ActionResult UpdateItem(string itemIds)
{
int count = 1;
List<int> itemIdList = new List<int>();
itemIdList = itemIds.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).ToList();
foreach( var i in itemIdList)
{
try
{
First f = TE.Firsts.Where(x => x.Id == i).FirstOrDefault();
f.RowNo = count;
TE.Firsts.AddOrUpdate(f);
TE.SaveChanges();
} catch(Exception)
{
continue;
}
count++;
}
return Json(true, JsonRequestBehavior.AllowGet);
}
其中 TF 是我的数据库上下文 我的模特 "first" enter image description here
并且我已经在我的共享 _layout 中进行了渲染
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
事实证明问题出在我的第一次 table 上。我删除了 try-catch 块以查看异常,显然我第一个 table 中的所有字段都被设置为主键?我不记得这样做了,我不知道它是怎么发生的,所以我从除 id 之外的所有字段中删除了身份并且它工作得很好,我希望这在某种程度上有所帮助。