We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Can not find antiforgerytoken error - how to implement?

I do not seem to be able to make use of the MVC 5 antiforgery token - I post here my simple grid and controller action for update - am getting the usual not found error for the token - no clear implementation documents found as yet for this...
I have tried some bits of JS of stackoverflow to no avail.
Any help please, this must be a common issue?

<div class="row">
        <div class="col-sm-12 col-md-12 ">
            @Html.AntiForgeryToken()

            @(Html.EJ().Grid<UserViewModel>("Grid")
                    // .Datasource(ds => ds.URL("/User/DataSource").Adaptor("UrlAdaptor")
                         .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource)
                                                 .UpdateURL("/User/Update")
                                                 .InsertURL("/User/Add")
                                                .RemoveURL("/User/Remove")
                                                .Adaptor(AdaptorType.RemoteSaveAdaptor)
                                                )
                    .IsResponsive()
                    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal); })
                    .AllowPaging()
                    .PageSettings(pagee => pagee.PageSize(5))
                    .AllowSorting()
                    .AllowTextWrap()

            .ToolbarSettings(toolbar =>
             {
                 toolbar.ShowToolbar().ToolbarItems(items =>
                  {
                      items.AddTool(ToolBarItems.Add);
                      items.AddTool(ToolBarItems.Edit);
                      items.AddTool(ToolBarItems.Delete);
                      items.AddTool(ToolBarItems.Update);
                      items.AddTool(ToolBarItems.Cancel);
                  });
             })

            .Columns(col =>
                {
                    col.Field("Id").HeaderText("ID").IsPrimaryKey(true).Visible(false).Add();
                    col.Field("FirstName").HeaderText(@Resources.FirstName).Add();
                    col.Field("LastName").HeaderText(@Resources.LastName).Add();
                    col.Field("Email").HeaderText(@Resources.Email).AllowEditing(false).Add();
                    col.Field("EmailConfirmed").HeaderText(@Resources.EmailConfirmed).AllowEditing(false).EditType(EditingType.Boolean).Add();
                    col.Field("PhoneNumber").HeaderText(@Resources.PhoneNo).AllowEditing(false).Add();
                    col.Field("PhoneConfirmed").HeaderText(@Resources.PhoneConfirmed).AllowEditing(false).EditType(EditingType.Boolean).Add();
                    col.Field("Culture").HeaderText(@Resources.Language).EditType(EditingType.Dropdown).DataSource((IEnumerable<object>)ViewBag.Cultures).Add();
                    col.Field("GroupList").HeaderText(@Resources.Permissions).AllowEditing(false).Add();

                    col.Field("DivisionId").HeaderText(@Resources.Division).ForeignKeyField("Id").ForeignKeyValue("DivName").DataSource((IEnumerable<object>)ViewBag.Divisions).Add();
                    col.Field("UnitId").HeaderText(@Resources.Unit).ForeignKeyField("Id").ForeignKeyValue("Name").DataSource((IEnumerable<object>)ViewBag.Units).Add();
                })
             
         
            )

          
        </div>


    </div><!--End row-->
</div>

Controller Post Action which works without attribute...

        [HttpPost]
        [Authorize(Roles = "Administrator")]
        [ValidateAntiForgeryToken]
        public ActionResult Update(UserViewModel value)
        {

                    var user = Dellegance.Security.User.LoadByEntityKey(value.Id.ToString());
                    TryUpdateModel(user);
                    user.Save();
                    return Json(value, JsonRequestBehavior.AllowGet);
        }



5 Replies

SR Sellappandi Ramu Syncfusion Team January 13, 2016 11:58 AM UTC

Hi Jonathan,

Thanks for contacting Syncfusion support.

We have created a sample based on your requirement using AntiForgeryToken and we found that you have used normal editing to grid. While using AntiForgeryToken to editing we need to use AntiForgeryToken() html method in edit form. So we suggest you to use template editing to grid.

Please refer to the code example and sample,

<script>

    var dmAdaptorUpdate = function (keyField, value, tableName) {

        var res = this.adaptor.update(this, keyField, value, tableName);

        return $.ajax($.extend({

            beforeSend: ej.proxy(this._beforeSend, this)

        }, res));

    }

    var dmAdaptorInsert = function (data, tableName) {

        var res = this.adaptor.insert(this, data, tableName);

        var deffer = $.Deferred();

        $.ajax($.extend({

            beforeSend: ej.proxy(this._beforeSend, this),

            success: ej.proxy(function (record, status, xhr, request) {

                record = function () {

                    if (data.d)

                        data = data.d;

                    return data;

                };

                deffer.resolveWith(this, [{ record: record, dataManager: this }]);

            }, this),

            error: function (e) {

                deffer.rejectWith(this, [{ error: e, dataManager: this }]);

            }

        }, res));


        return deffer.promise();

    }

    var adaptor = new ej.UrlAdaptor().extend({

        update: function (dm, keyField, value, tableName) {

            var token = value.__RequestVerificationToken;

            delete value['__RequestVerificationToken'];

            return {

                type: "POST",

                url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,

                data: {

                    __RequestVerificationToken: token,

                    value: value

                }

            };

        },

        insert: function (dm, data, tableName) {

            var token = value.__RequestVerificationToken;

            delete data['__RequestVerificationToken'];

            return {

                type: "POST",

                url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,

                data: {

                    __RequestVerificationToken: token,

                    value: data

                }

            };

        }

    })


    function load(args) {

        this.model.dataSource.adaptor = new adaptor();

        this.model.dataSource.update = dmAdaptorUpdate;

        this.model.dataSource.insert = dmAdaptorInsert;

    }
</script>

<script type="text/template" id="template">

    <b>Order Details</b>

    @Html.AntiForgeryToken()

    <table cellspacing="10">

        . . . .

    </table>
</script>

[Controller]

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult Update(EmployeeView value)

        {

            OrderRepository.Update(value);

            var data = OrderRepository.GetAllRecords2();

            return Json(value, JsonRequestBehavior.AllowGet);

        }

        [ValidateAntiForgeryToken]

        public ActionResult Insert(EmployeeView value)

        {

            OrderRepository.Add(value);

            var data = OrderRepository.GetAllRecords2();

            return Json(data, JsonRequestBehavior.AllowGet);
        }


Sample: http://www.syncfusion.com/downloads/support/forum/121647/ze/EJGrid_121647-548266114

In the above sample we have extend the adaptor to include the AntiForgeryToken key before send post to server side.

Refer to the online help documentation for custom adaptor for adaptor extend,

Document: http://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor

Regards,
Sellappandi R


EA Eamesy January 13, 2016 05:08 PM UTC

Thank you, this works however I was planning to use in-line grid editing... so this throws up some more issues for me

1. Can I use my own bootstrap form styling css per the rest of my site and do I have to stay with your template syntax (e.g using tables rather than bootstrap form elements configured to my styling?)

2. How do I change the dialog title using a js function

    function complete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add")
            $("#editTemplate").ejDialog("option", "title", "Dialog Editing");
    }

but it returns "Error: ejDialog: methods/properties can be accessed only after plugin creation"

Many thanks
Jonathan


PK Prasanna Kumar Viswanathan Syncfusion Team January 14, 2016 08:17 AM UTC

Hi Jonathan,

        Queries
                        Response

How do I change the dialog title using a JS function?


We found that you have not get the proper ID for the dialogBox. In dialog mode, the dialog box id will generate with the grid id. So, we suggest to you to use the proper id in the following manner.

Please find the code example, screenshot and sample:



@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("Editing")

        .Datasource(ds => ds.URL("/Home/DataSource").Adaptor("UrlAdaptor").UpdateURL("/Home/Update").InsertURL("/Home/Insert").RemoveURL("/Home/Remove"))

            .EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"))


--------------------------------

  .ClientSideEvents(eve => eve.Load("load").ActionComplete("complete"))


)

function complete(args) {

        if (args.requestType == "beginedit" || args.requestType == "add") {

           $("#" + this._id + "_dialogEdit").ejDialog("option", "title", "Dialog Editing")

        }
    }


Screenshot :



Sample: http://www.syncfusion.com/downloads/support/forum/121647/ze/EJGrid673211952


Can I use my own bootstrap form styling css?


Yes, you can use the bootstrap form elements in the template. 

Please find the code example and sample:


<script type="text/template" id="template">

    @Html.AntiForgeryToken()

    <div class="form-group">

        <label for="usr">Employee ID:</label>

        <input type="text" class="form-control" id="usr" value="{{: EmployeeID}}">

    </div>

    <div class="form-group">

        <label for="pwd">First Name:</label>

        <input type="text" class="form-control" id="pwd" value="{{:FirstName}}">

    </div>
</script>





Regards,
Prasanna Kumar N.S.V



MP Matt Phung June 27, 2016 04:44 AM UTC

Hi,

I tried implementing your custom adaptors using UrlAdaptor type but I get the following error:
ej.web.all.min.js:10 Uncaught TypeError: Cannot read property 'ejPvtData' of undefined

You can reproduce the error by changing your datasource and adaptor type like below:

        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource)
        .Adaptor(AdaptorType.UrlAdaptor)

Here is my controller
        public ActionResult Index()
        {
            IEnumerable<EmployeeView> DataSource = OrderRepository.GetAllRecords2().ToList();

            ViewBag.dataSource = DataSource;

            return View();
        }


PK Prasanna Kumar Viswanathan Syncfusion Team June 28, 2016 12:34 PM UTC

Hi Jonathan, 

In your code example, we found that you have bound local data on the Grid. If you need to bind the local data and interact with server-side for CRUD operations, use remoteSave adapter. We also found that you are using custom adaptor for Antiforgery Token(), so if you are using remoteSaveAdaptor we have to extend the remoteSave adapter.   
 
Find the code example and sample: 
 

.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).Adaptor(AdaptorType.RemoteSaveAdaptor).UpdateURL("/Home/Update").InsertURL("/Home/Insert").RemoveURL("/Home/Remove")) 
            .EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template")) 
--------------------------- 

 


Refer to the Help document for the remoteSave Adaptor 


Regards, 
Prasanna Kumar N.S.V 


Loader.
Live Chat Icon For mobile
Up arrow icon