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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can not find antiforgerytoken error - how to implement?

Thread ID:

Created:

Updated:

Platform:

Replies:

121647 Jan 12,2016 07:49 PM UTC Jun 28,2016 12:34 PM UTC ASP.NET MVC 5
loading
Tags: Grid
Eamesy
Asked On January 12, 2016 07:49 PM UTC

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);
        }



Sellappandi Ramu [Syncfusion]
Replied On 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

Eamesy
Replied On 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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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


Matt Phung
Replied On 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();
        }

Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;