The ValidateAntiForgeryToken not work again in the update action. It not fire the update action in controller. In the client side, it keep call onActionFailure function event there is no error. I use custom dialog to display the details for update. I have add the antiforgery service in startup.
Below is the grid code
@Html.AntiForgeryToken()
<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })" actionComplete="actionComplete" actionFailure="onActionFailure">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" showDeleteConfirmDialog="true" template='#dialogTemplate'></e-grid-editSettings>
<e-grid-pagesettings pageSize="8" pageSizes="true"></e-grid-pagesettings>
<e-data-manager adaptor="UrlAdaptor" url="/Product/DataSoruce" insertUrl="/Product/Create" updateUrl="/Product/Update" removeUrl="/Product/Delete"></e-data-manager>
<e-grid-columns>
<e-grid-column field="Id" headerText="Id" textAlign="Left" width="120" isPrimaryKey="true" visible="false"></e-grid-column>
<e-grid-column field="Code" headerText="Code" textAlign="Left" width="120"></e-grid-column>
@*<e-grid-column field="Description" headerText="Description" textAlign="Left" width="120" validationRules="@(new { required = true})"></e-grid-column>*@
<e-grid-column field="Description" headerText="Description" textAlign="Left" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script id="dialogTemplate" type="text/x-template">
<div id="dialogTemp"></div>
</script>
<script type="text/javascript">
function onLoad() {
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
}
function onActionFailure(args) {
var errorMsg;
if (args.error) {
errorMsg = args.error[0].error.responseText;
} else {
errorMsg = args[0].error.responseText;
}
var grid = document.getElementById("Grid").ej2_instances[0];
//this is ej2 old version to get control from dialog template, the dialog template is render inside the grid.
//In the latest version of ej2, the dialog template is render outside the grid.
//var validationEle = grid.element.querySelector(".e-edit-dialog .form-row div.e-float-input #ErrorMessages");
if (document.getElementById(this.element.id + '_dialogEdit_wrapper') != null) {
var validationEle = document.getElementById(this.element.id + '_dialogEdit_wrapper').querySelector('#ErrorMessage');
var errormessageEle = document.getElementById(this.element.id + '_dialogEdit_wrapper').querySelector('#spanerrormessage');
if (errormessageEle != null) {
errormessageEle.remove();
}
var spanEle = document.createElement("span");
spanEle.textContent = '*' + errorMsg;
spanEle.style.color = "red";
spanEle.id = "spanerrormessage";
validationEle.parentElement.appendChild(spanEle)
}
else {
alert(errorMsg);
}
}
function actionComplete(args) {
if (args.requestType === 'beginEdit' || args.requestType === 'add') {
let spinner = ej.popups.createSpinner({ target: args.dialog.element });
ej.popups.showSpinner(args.dialog.element);
if (args.requestType === 'add') {
// args.form.ej2_instances[0].addRules("ShipCountry", { required: true })
var ajax = new ej.base.Ajax({
url: "@Url.Action("CreatePartial", "Product")", //render the partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form with selected record
args.form.elements.namedItem('Code').focus();
ej.popups.hideSpinner(args.dialog.element);
}).catch(function (xhr) {
console.log(xhr);
ej.popups.hideSpinner(args.dialog.element);
});
}
if (args.requestType === 'beginEdit') {
var ajax = new ej.base.Ajax({
url: "@Url.Action("EditPartial", "Product")", //render the partial view
type: "POST",
contentType: "application/json",
data: JSON.stringify({ value: args.rowData })
});
ajax.send().then(function (data) {
appendElement(data, args.form); //Render the edit form with selected record
args.form.elements.namedItem('Code').focus();
ej.popups.hideSpinner(args.dialog.element);
}).catch(function (xhr) {
console.log(xhr);
ej.popups.hideSpinner(args.dialog.element);
});
}
}
}
function appendElement(elementString, form) {
form.querySelector("#dialogTemp").innerHTML = elementString;
var script = document.createElement('script');
script.type = "text/javascript";
var serverScript = form.querySelector("#dialogTemp").querySelector('script');
script.textContent = serverScript.innerHTML;
document.head.appendChild(script);
serverScript.remove();
}
