- Home
- Forum
- ASP.NET MVC - EJ 2
- Using AntiForgeryToken with Grid Editing
Using AntiForgeryToken with Grid Editing
6 Replies
IR
Isuriya Rajan
Syncfusion Team
March 27, 2018 03:46 AM UTC
Hi Kabanets
Thanks for contacting Syncfusion support,
Here we have provide the code example for how can we add antiForgeryToken for your grid edit operation.
While using the antiForgeryToken we need to refer in html page
Refer the below code example:
|
@Html.AntiForgeryToken()
@Html.EJS().Grid("Grid").DataSource(dm => dm.Url("Home/DataSource").InsertUrl("Home/Insert").UpdateUrl("Home/Update").RemoveUrl("Home/Delete").Adaptor("UrlAdaptor")).Columns(col =>
{
col.Field("ShipCity").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();
}).AllowPaging().Render()
</div>
|
We have achieve this by extending the custom adaptors. In code we have passed the token to server. Like below code you can pass your antiForgery token to server. Using this you can achieve your requirement.
Refer the code example:
|
var customAdaptor = new ej.data.UrlAdaptor();
customAdaptor = ej.base.extend(customAdaptor, {
update: function (dm, keyField, value, tableName) {
return {
type: "POST",
url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
data: JSON.stringify({
__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
value: JSON.stringify(value)
})
};
},
insert: function (dm, data, tableName) {
return {
type: "POST",
url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
data: JSON.stringify({
__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
value: JSON.stringify(data)
})
};
}
}); |
In Sever side you need use this below
|
[controller.cs]
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Insert(OrderData value,string token)
{
//achieve your insert action here
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Update(OrderData value)
{
//achieve your udpate action here
return Json(ord);
}
|
Regards,
Isuriya R
AK
Aaron Khan
April 10, 2018 04:28 PM UTC
I have tried this and it doesn't work.
IR
Isuriya Rajan
Syncfusion Team
April 12, 2018 07:28 PM UTC
Hi Kabanets
For your requirement we have created the sample and attached for your reference.
ValidateAntiForgeryToken attribute is expecting the post data to be in FormData format instead of JSON. Hence in this sample, we have extended the UrlAdaptor to pass the AntiForgery token to server side with contentType as application/x-www-form-urlencoded; charset=UTF-8.
Refer the below code example:
|
window.customAdaptor = new ej.data.UrlAdaptor();
customAdaptor = ej.base.extend(customAdaptor, {
processResponse: function (data, ds, query, xhr, request, changes) {
request.data = JSON.stringify(data);
return ej.data.UrlAdaptor.prototype.processResponse.call(this,data, ds, query, xhr, request, changes)
},
insert: function (dm, data, tableName) {
return {
url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
data: $.param({
__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
value: data,
table: tableName,
action: 'insert'
}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
}
},
update: function (dm, keyField, value, tableName) {
return {
url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
data: $.param({
__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
value: value,
table: tableName,
action: 'insert'
}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
};
},
}); |
Also we have assigned the extended adaptor in grid load event as below.
|
function load(args) {
this.dataSource.adaptor = customAdaptor;
} |
Please get back to us , If you need any other assistance.
Regards,
Isuriya R
KA
Kabanets
December 20, 2018 02:11 PM UTC
Hello Isuriya Rajan,
Thank you for the solution.
I have one problem: if I send in value a field of DateTime type, then asp.net mvc mapping system maps wrong date value.
May be, I should don't use jQuery function param?
Help me, please.
Best regards,
Andrey Kabanets
KA
Kabanets
December 20, 2018 02:16 PM UTC
I attached screenshots of requests. There are requests from a standard adapter and a custom adapter.
Attachment: Requests_c17bfeef.zip
Attachment: Requests_c17bfeef.zip
MS
Madhu Sudhanan P
Syncfusion Team
December 21, 2018 10:29 AM UTC
Hi Kabanets,
We have modified the custom adaptor to handle the date object and convert it to ISO string before sending to the server as follows.
|
<script>
window.customAdaptor = new ej.data.UrlAdaptor();
customAdaptor = ej.base.extend(customAdaptor, {
processResponse: function (data, ds, query, xhr, request, changes) {
request.data = JSON.stringify(data);
return ej.data.UrlAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes)
},
insert: function (dm, data, tableName) {
for (var key in data) {
if (data[key] instanceof Date) {
data[key] = data[key].toJSON(); //Convert date to ISO format
}
}
return {
url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
data: $.param({
__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
value: data,
table: tableName,
action: 'insert'
}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
}
},
update: function (dm, keyField, value, tableName) {
for (var key in data) {
if (data[key] instanceof Date) {
data[key] = data[key].toJSON(); //Convert date to ISO format
}
}
return {
url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
data: $.param({
__RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value,
value: value,
table: tableName,
action: 'insert'
}),
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
};
},
});
</script>
|
Regards,
Madhu Sudhanan P
SIGN IN To post a reply.
- 6 Replies
- 4 Participants
-
KA Kabanets
- Mar 22, 2018 01:17 PM UTC
- Dec 21, 2018 10:29 AM UTC
