【发布时间】：2017-09-25 11:32:45
【问题描述】：
我对如何从控制器绑定数据有疑问。 这是这样的想法： 我在数据表中有数据列表。我需要从数据表中删除 1 个数据。我正在使用 ajax post 在控制器中调用 actionresult 并发送模型。我的控制器将删除数据，并将模型返回给视图。
这是我的视图模型：
public class SampleHeaderViewModels
{
[Display(Name = "ID")]
public int intID { get; set; }
[Display(Name = "Field 1")]
public string txtField1 { get; set; }
[Display(Name = "Field 2")]
public string txtField2 { get; set; }
}
public class SampleDetailViewModels
{
[Display(Name = "ID")]
public int intID { get; set; }
[Display(Name = "Line")]
public int intLine { get; set; }
[Display(Name = "Detail 1")]
public string txtDetail1 { get; set; }
[Display(Name = "Detail 2")]
public string txtDetail2 { get; set; }
}
public class SampleViewModels
{
public SampleHeaderViewModels Header { get; set; }
public List<SampleDetailViewModels> Detail { get; set; }
public SampleViewModels()
{
Header = new SampleHeaderViewModels();
Detail = new List<SampleDetailViewModels>();
}
}
这是我的观点：
<div class="row">
<div class="block">
<div class="block-content controls">
<div class="col-md-6">
<div class="row-form">
<div class="col-md-4">
@Html.LabelFor(m => m.Header.txtField1, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-8">
@Html.HiddenFor(m => m.Header.intID)
@Html.TextBoxFor(m => m.Header.txtField1, htmlAttributes: new { @class = "form-control" })
</div>
</div>
<div class="row-form">
<div class="col-md-4">
@Html.LabelFor(m => m.Header.txtField2, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-8">
@Html.TextBoxFor(m => m.Header.txtField2, htmlAttributes: new { @class = "form-control" })
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="block">
<div class="block-content controls">
<div class="col-md-12">
<div class="row-form">
<table id="tbDataTable" class="table table-bordered">
<thead>
<tr>
<td>
</td>
<td>
@Html.LabelFor(m => m.Detail.FirstOrDefault().intLine)
</td>
<td>
@Html.LabelFor(m => m.Detail.FirstOrDefault().txtDetail1)
</td>
<td>
@Html.LabelFor(m => m.Detail.FirstOrDefault().txtDetail2)
</td>
</tr>
</thead>
<tbody>
@if (Model.Detail != null)
{
for (int x = 0; x <= Model.Detail.Count - 1; x++)
{
<tr>
<td>
<button type="button" class="btn btn-primary" onclick="return DeleteDetail('@Model.Detail[x].intLine');">Delete</button>
</td>
<td>
@Html.DisplayFor(m => @Model.Detail[x].intLine)
@Html.HiddenFor(m => @Model.Detail[x].intLine)
</td>
<td>
@Html.DisplayFor(m => @Model.Detail[x].txtDetail1)
@Html.HiddenFor(m => @Model.Detail[x].txtDetail1)
</td>
<td>
@Html.DisplayFor(m => @Model.Detail[x].txtDetail2)
@Html.HiddenFor(m => @Model.Detail[x].txtDetail2)
</td>
</tr>
}
}
</table>
</div>
<div class="row-form">
<div class="col-md-2">
<button type="button" id="btnAddDetail" class="btn btn-info">Add Detail</button>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的 Javascript：
function DeleteDetail(intLine)
{
debugger;
var modelHeader = {
"intID": $('#@Html.IdFor(m => m.Header.intID)').val(),
"txtField1": $('#@Html.IdFor(m => m.Header.txtField1)').val(),
"txtField2": $('#@Html.IdFor(m => m.Header.txtField2)').val(),
};
var modelDetail = @Html.Raw(JsonConvert.SerializeObject(Model.Detail));
$.ajax({
url: '/Sample/DeleteDetail',
type: 'POST',
datatype: 'JSON',
contentType: 'application/json',
data: JSON.stringify(
{
objHeader : modelHeader,
objDetail : modelDetail,
intLine : intLine
}),
cache: false,
success: function (data) {
@*window.location.replace('@Url.Action("Detail")');*@
},
error: function (data) {
console.log(data);
}
});
}这是我的控制器：
[HttpPost]
public ActionResult DeleteDetail(SampleHeaderViewModels objHeader, List<SampleDetailViewModels> objDetail, int intLine)
{
objDetail.Remove(objDetail.Where(m => m.intLine == intLine).FirstOrDefault());
SampleViewModels obj = new SampleViewModels();
obj.Header = objHeader;
obj.Detail = objDetail;
TempData["model"] = obj;
return View("Index", obj);
}
问题是： 在我的代码中，当我按下数据表中的“删除”按钮时，它将在 javascript 中调用函数 AJAX POST DeleteDetail。它会将 Header 模型和 Detail 模型发送到我的 Controller。我的控制器将删除选定的行并将模型返回给 View。我的 View 得到了最新的模型。已经删除了 1 行。 但它不会呈现数据表。所以删除的数据还在。 当 AJAX 成功时，我正在尝试使用 @url 发布页面，但仍然没有运气。 如何强制数据表绑定最新的模型？
谢谢。
已编辑：
我正在尝试刷新数据而不刷新页面。只需刷新数据表即可。
这是我的控制器：
public ActionResult DeleteDetail(SampleHeaderViewModels objHeader, List<SampleDetailViewModels> objDetail, int intLine)
{
objDetail.Remove(objDetail.Where(m => m.intLine == intLine).FirstOrDefault());
SampleViewModels obj = new SampleViewModels();
obj.Header = objHeader;
obj.Detail = objDetail;
TempData["model"] = obj;
var json = JsonConvert.SerializeObject( new {detail = obj.Detail});
return Content(json, "application/json");
}
这是我的 Javascript：
function DeleteDetail(intLine)
{
debugger;
var modelHeader = {
"intID": $('#@Html.IdFor(m => m.Header.intID)').val(),
"txtField1": $('#@Html.IdFor(m => m.Header.txtField1)').val(),
"txtField2": $('#@Html.IdFor(m => m.Header.txtField2)').val(),
};
var modelDetail = @Html.Raw(JsonConvert.SerializeObject(Model.Detail));
$.ajax({
url: '/Sample/DeleteDetail',
type: 'POST',
datatype: 'JSON',
contentType: 'application/json',
data: JSON.stringify(
{
objHeader : modelHeader,
objDetail : modelDetail,
intLine : intLine
}),
cache: false,
success: function (data) {
debugger;
table = $("#tbDataTable").dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
for (var i=0; i < data.detail.length; i++)
{
table.oApi._fnAddData(oSettings, data.detail[i]);
//this part always send error DataTables warning: table id=tbDataTable - Requested unknown parameter '0' for row 0.
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
},
error: function (data) {
console.log(data);
}
});
}但它向我发送了一个错误 DataTables 警告：table id=tbDataTable - Requested unknown parameter '0' for row 0。 视图和视图模型仍然与第一个问题相同。 请帮我。
【问题讨论】：
-
删除记录成功后重新加载数据表
-
我已经阅读了有关从服务器端重新加载数据表的信息。但我没有运气。也许我不明白这个概念。你能帮我完成上面的所有代码吗？
-
你在使用jquery数据表插件吗？？
-
是的，我愿意。但我不太明白如何重新绑定数据表
-
您正在使用强类型模式绑定显示列表，您需要在成功删除记录后重新加载页面
标签： c# jquery ajax asp.net-mvc datatable