mvc ejs(ej2) call all action methods with antiforgerytoken
1 Reply
Hi Francisco,
Greetings From Syncfsuion Support
Query# 1 and 3: add [ValidateAntiForgeryToken] to all methods (include DataSource method), not only CRUD methods and call the method (public ActionResult DataSource) to perform the pagination with take and skip
By default when you set the AntiForgeryToken in load event it will sends the Token to the Datasource method for every Data Operations in server side. Please refer the below code example and screenshot.
|
@Html.AntiForgeryToken()
@Html.EJS().Grid("Grid").AllowFiltering(true).DataSource(dm => dm.Url("Home/DataSource").InsertUrl("Home/Insert").UpdateUrl("Home/Update").RemoveUrl("Home/Delete").Adaptor("UrlAdaptor")).Load("load").ActionComplete("actioncomplete").Columns(col =>
{
. . . . . . .
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
</div>
</div>
<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) {
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 {
// type: "POST",
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'
};
},
});
function load(args) {
this.dataSource.adaptor = customAdaptor;
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
}
function actioncomplete(args) {
if (args.requestType == 'save' || args.requestType == 'delete') {
this.refresh();
}
}
</script>
|
Screenshot:
Query#2 and 4: when change the current item, reload the grid with new selected item in combobox and i want to use the value of combobox to filter the datasource in method (public ActionResult DataSource)
From checked your query, We understand you want to filter the Column by using ComboBox component and you want to handle the filter Operation by the filter value of combo box in Server side. We have achieved your requirement by using FilterBarTemplate . In the following sample combobox is used as custom component in CustomerID column. Please refer the below code example for more information.
|
Index.cshtml
@{
Object filterTemplate = new Object();
filterTemplate = (new { read = "read", write = "write" });
}
@Html.EJS().Grid("Grid").AllowFiltering(true).DataSource(dm => dm.Url("Home/DataSource").InsertUrl("Home/Insert").UpdateUrl("Home/Update").RemoveUrl("Home/Delete").Adaptor("UrlAdaptor")).Load("load").ActionComplete("actioncomplete").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = true }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").FilterBarTemplate(filterTemplate).HeaderText("Customer ID").Width("150").EditType("dropdownedit").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("150").Add();
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
</div>
</div>
<script type="text/javascript">
function write(args) {
var data = [ { text: "Vinet", value: "Vinet" }, { text: "Hanar", value: "Hanar" }, { text: "Nancy", value: "Nancy" }, { text: "Joe", value: "Joe" },
{ text: "Chops", value: "Chops" }
]
var listObj = new ej.dropdowns.ComboBox({
dataSource: data,
placeholder: 'Select CustomerID',
change: function (args) { //Change event gets triggered when you select the item
read(args) // call the read method to perform filtering
}
});
listObj.appendTo(args.element);
}
function read(args) {
var grid = document.getElementById("Grid").ej2_instances[0];
var pred = new ej.data.Predicate(args.element.id.split('_')[0], "equal", args.element.value); //Generate a predicate
var predicate = pred;
grid.query = new ej.data.Query().where(predicate); //set the predicate to grid query it will send the query to the server side
}
</script>
|
|
HomeController.cs
public ActionResult DataSource(DataManagerRequest Dm)
{
IEnumerable DataSource = getData().ToList();
DataOperations operation = new DataOperations();
if (Dm.Where != null && Dm.Where.Count > 0 && Dm.Where[0].value != null) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, Dm.Where, Dm.Where[0].Operator);
}
else
{
DataSource = getData().ToList();
}
if (Dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, Dm.Skip); //Paging
}
int count = DataSource.Cast<OrderData>().Count();
return Json(new { result = DataSource.Cast<OrderData>().Skip(Dm.Skip).Take(Dm.Take), count = count });
}
|
For your both queries we have prepared a sample. Please refer the below sample for more information.
Regards,
Balaji Sekar.
SIGN IN To post a reply.
