我正在开发一个ASP.NET MVC应用程序。我现在正在开发一个搜索数据库用户的搜索页面。此页面包含Partialview,将搜索结果显示为Jquery数据表。 现在,当我更新用户时,我想用新值重新加载/刷新Jquery数据表。
1。更新jquery数据表的给定用户的Ajax函数代码
function Update() {
var res = validate();
if (res == false) {
return false;
}
var userObj = {
Id: $('#userId').val(),
Matricule: $('#userMatricule').val(),
LastName: $('#userLastName').val(),
FirstName: $('#userFirstName').val(),
dateRecrutement: $('#userDateRecrutement').val(),
entiteId: $('#entite').val(),
roleId: $('#role').val(),
};
$.ajax({
url: '/User/updateUserAjax',
data: JSON.stringify(userObj),
type: 'POST',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function (result) {
jQuery("#MessageUpdateUserConfirm").text(result);
$("#dialog-confirm-update").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
$('#myModal').modal('hide');
('#userId').val("");
('#userMatricule').val("");
('#userLastName').val("");
('#userFirstName').val("");
('#userDateRecrutement').val("");
('#entite').val("");
('#role').val("");
location.reload();
//let dt = $("#dataTables-userSearchResults").datatable();
//dt.draw('full-reset');
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}
2。包含搜索表单的主页的代码&部分视图
<div class="row">
<fieldset class="col-md-10" id="infoForm">
<form name="form-recherche" id="FormUsersSearch" class="form-horizontal">
<div class="form-group">
<div class="col-md-3">
<label for="matricule">Matricule</label>
</div>
<div class="col-md-3">
@Html.EditorFor(model => model.matricule, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="col-md-3">
<label for="nom"> Nom :</label>
</div>
<div class="col-md-3">
@Html.EditorFor(model => model.nom, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="prenom"> Prénom:</label>
</div>
<div class="col-md-3">
@Html.EditorFor(model => model.prenom, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="col-md-3">
<label for="service">Direction:</label>
</div>
<div class="col-md-3">
@Html.DropDownListFor(model => model.direction, ViewBag.DirectionId as SelectList, "---Select a Direction---", new { id = "Direction", @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="division">Division :</label>
</div>
<div class="col-md-3">
@Html.DropDownListFor(model => model.division, ViewBag.division as SelectList, "---- Sélectionnez ----", new { id = "Division", @class = "form-control" })
</div>
<div class="col-md-3">
<label for="service">Service :</label>
</div>
<div class="col-md-3">
@Html.DropDownListFor(model => model.service, ViewBag.service as SelectList, "---- Sélectionnez ----", new { id = "service", @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="dateRecrutementDebut">Date recrutement début :</label>
</div>
<div class="col-md-3">
@Html.EditorFor(model => model.dateRecrutementDebut, new { htmlAttributes = new { @class = "form-control datepicker" } })
</div>
<div class="col-md-3">
<label for="dateRecrutementDebut">Date recrutement fin :</label>
</div>
<div class="col-md-3">
@Html.EditorFor(model => model.dateRecrutementFin, new { htmlAttributes = new { @class = "form-control datepicker" } })
</div>
</div>
</form>
<div class="b-right">
<a class="btn btn-custom" onclick="location.href='@Url.Action("Create", "User")'">
<i class="fa fa-plus"></i>
Ajouter
</a>
<a class="btn btn-custom" id="searchUsers" >
<i class="fa fa-search"></i>
Rechercher
</a>
</div>
</fieldset>
<div id="usersearchResult">
</div>
</div>
第3。 Jquery / AjaX函数提供数据表
$(function ()
{
var submitButton = $("#searchUsers");
var infoForm = $("#infoForm");
// Attach event handler to submit button
submitButton.click(function () {
SubmitInfo(infoForm);
});
});
function SubmitInfo(formContainer)
{
//event.preventDefault();
$.ajax({
url: "@(Url.Action("UserSearch"))",
type: "GET",
data: formContainer.serialize(),
success: function (data) {
//Fill div with results
$("#usersearchResult").html(data);
},
error: failedSearch
});
}
function failedSearch() {
$("usersearchResult").html = "There was a problem in the search. Please, try later on";
}
我尝试了$('#dataTables-userSearchResults').DataTable().ajax.reload()
,但它没有用。
感谢您的帮助