当我在执行CRUD操作时从我的控制器返回JSON成功时,我尝试刷新DataTable数据。 CRUD操作正常工作并且出现了toastr成功消息,当模态关闭时,我似乎无法让数据表刷新操作。我不想做location.reload(),因为在页面其余部分输入的数据将会丢失。我正在使用模态的部分视图,不确定这是否与我的问题有关。我已经研究过并试过了几件事,但却无法让它发挥作用。
代码:
[HttpPost]
public ActionResult CreateFooterLink(footer_links footer_link)
{
try
{
if (ModelState.IsValid)
{
db.footer_links.Add(footer_link);
db.SaveChanges();
return Json(new { success = true, message = "Saved Link Successfully." },JsonRequestBehavior.AllowGet);
}
return View("_CreateFooterLink", footer_link);
}
catch (Exception ex)
{
return new JsonResult
{
Data = new { ErrorMessage = ex.Message, Success = false },
ContentEncoding = System.Text.Encoding.UTF8,
JsonRequestBehavior = JsonRequestBehavior.DenyGet
};
}
}
@model WST___Dev.Models.footer_links
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Add New Link</h3>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "CreateLink" }))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(m => Model.name, new { @class = "control-label col-sm-3 required"})
<div class="col-sm-9">
@Html.TextBoxFor(m => m.name, new { @class = "form-control", id="name"})
<div>
@Html.ValidationMessageFor(m => m.name)
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => Model.target_url, new { @class = "control-label col-sm-3 required" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.target_url, new { @class = "form-control", id="target_url" })
<div>
@Html.ValidationMessageFor(m => m.target_url)
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="submit" value="Save" id="btnSubmit" />
</div>
<div class="col-sm-6">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
}
<script>
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#btnSubmit").click(function (e) {
e.preventDefault();
var name = $('#name').val();
var target_url = $('#target_url').val();
var JSONObject = {
name: name,
target_url: target_url
};
$.ajax({
url: '@Url.Action("CreateFooterLink", "StyleEditor")',
type: "POST",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(JSONObject),
dataType: "json",
success: function (result) {
if (result.success == true) {
$("#MyModal").modal('hide');
toastr.success(result.message);
//window.location.reload(true);
//setTimeout(location.reload.bind(location), 6);
//setInterval(function () {
// table.ajax.reload();
//}, 3)
//table.draw();
//table.fnClearTable();
//table.fnAddData();
//table.fnDraw();
//var oTableToUpdate = $(tblLinks).dataTable({ bRetrieve: true });
//$oTableToUpdate.fnAddData();
//$oTableToUpdate.fnDraw();
} else {
$("#MyModal").modal('show');
toastr.error(result.ErrorMessage);
}
},
error: function (xml, message, text) {
toastr.error("Msg: " + message + ", Text: " + text);
}
});
});
});
</script>
DataTable初始化:
var table;
$(document).ready(function () {
table = $('#tblLinks').DataTable({
"ordering": true,
"bServerSide": true,
"serverSide": true,
"orderMulti": false,
"deferRender": true,
"pageLength": 5,
'columnDefs': [{
'targets': 2,
'title': '',
'sortable': false,
}],
"stateSave": true,
"stateDuration": -1,
});
});