我的数据表中有近150行,并且有一个输入字段值,用户可以在任何行中更改该值,然后按批量更新以提交表单,目前我正在使用serializeArray()函数发送所有150行。不论用户是否插入新值,都会导致回发延迟过多,有一种方法是我仅绑定表单中的更改值,而不是全部150行。
<form id="share">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="container col-md-12">
<table id="myTable" class="table table-hover table-striped table-bordered dataTable">
<thead>
<tr>
<th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().Id)</th>
<th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagName)</th>
<th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagCategory)</th>
<th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagValue)</th>
<th style="text-align:center"> Action</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.tags.Count(); i++)
{
<tr>
<td>
@Html.DisplayFor(m => Model.tags[i].Id)
@Html.HiddenFor(m => Model.tags[i].Id)
</td>
<td>
@Html.DisplayFor(m => Model.tags[i].TagName)
</td>
<td>
@Html.DisplayFor(m => Model.tags[i].TagCategory)
</td>
<td>
@Html.EditorFor(m => Model.tags[i].TagValue, new { htmlAttributes = new { @id = "TagVaule_" + Model.tags[i].Id, @class = "form-control" } })
@Html.ValidationMessageFor(m => Model.tags[i].TagValue, "", new { @class = "text-danger" })
</td>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" id="myModalContent">
</div>
</div>
</div>
<button type="submit" class="btn btn-danger" id="bulkupdate">BulkUpdate</button>
</div>
</div>
$('#share').on('submit', function (e) {
debugger;
// Prevent actual form submission
e.preventDefault();
var data = table.$('input').serializeArray();
// Submit form data via Ajax
$.ajax({
type: 'POST',
url: '@Url.Action("BulkUpdate", "Home")',
data: data,
success: function (data) {
$('#myModalContent').html(data);
$('#myModal').modal('show');
}
});
});