我有关于如何绑定控制器数据的问题 . 这是个想法：我有数据表中的数据列表 . 我需要从datatable中删除1个数据 . 我正在使用ajax post在控制器中调用actionresult并发送模型 . 我的控制器将删除数据，并返回模型进行查看 .
这是我的viewmodels：
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获得了最新型号 . 哪一行已被删除 . 但它不会渲染数据表 . 所以删除的数据仍然存在 . 我正在尝试使用@url在AJAX成功时发布页面，但仍然没有运气 . 如何强制数据表绑定最新的模型？
谢谢 .
编辑：
我正在尝试刷新数据而不刷新页面 . 只需刷新数据表 .
这是我的控制器：
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 - 第0行请求的未知参数'0' . 视图和视图模型仍然像第一个问题一样 . 请帮我 .
3 回答
如果您成功从数据库中删除了一条记录，则Action方法返回true，其他方式返回false：
在ajax的成功方法中重新加载当前页面，
jQuery的：