I have question about how to bind data from controller. This is the idea: I have list of data in datatable. I need to delete 1 data from datatable. I'm using ajax post to call actionresult in controller and send the model. And my controller will delete the data, and return the model to view.
Here is my 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>();
}
}
And this is my View:
<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>
This is my 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);
}
});
}And this is my controller:
[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);
}
The question is: In my code, when I pressed "Delete" button in datatable, it will call function AJAX POST DeleteDetail in javascript. And it will send the Header model and Detail model to my Controller. And my controller will remove the selected row and return the model to View. And my View get the latest model. Which is 1 row already deleted. But it will not render the datatable. So the deleted data is still there. I'm trying using @url to post the page when the AJAX succeded, but still no luck. How to force the datatable to bind the latest model?
Thanks.
Edited:
I'm trying to refresh the data without refresh the page. Just refresh the datatable.
Here is my Controller:
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");
}
And this is my 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);
}
});
}But it send me an error DataTables warning: table id=tbDataTable - Requested unknown parameter '0' for row 0. The view and view model is still same like the first question. Please help me.
