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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add additional data to request payload (e.g. AntiForgeryToken)

Thread ID:

Created:

Updated:

Platform:

Replies:

120821 Oct 19,2015 12:34 PM UTC Oct 26,2015 05:44 AM UTC ASP.NET MVC 6
loading
Tags: Grid
GW Consultancy
Asked On October 19, 2015 12:34 PM UTC

How can additional data be added to the request payload? 

I have attempted to use the BeginAction client event, however it is not clear which property can be appended to. In the MVC (classic) documentation it refers to a "data" property however this is not visible in the latest MVC release.

Regards
Grant

GW Consultancy
Replied On October 19, 2015 06:09 PM UTC

I have resolved this by adding the following in the BeginAction event.

args.model.query.addParams("__RequestVerificationToken", $('input[name=__RequestVerificationToken]').val());

It would be useful to understand if this action can be completed using a CustomAdaptor extended from UrlAdaptor. 

Thanks
Grant

Ragavee U S [Syncfusion]
Replied On October 20, 2015 09:57 AM UTC

Hi Grant,

We analyzed your requirement to pass additional parameters to the request payLoad by extending the UrlAdaptor.

We have created a sample, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/120821/ze/Sample125790530

In the above sample, we have extended the UrlAdaptor. In the processQuery function, we have appended the additional parameter with the data returned to the server such that we can get the additional parameter at the server side.

Please refer to the code example.

<div style="margin-top:30px">

    @(Html.EJ().Grid<object>("Grid")

            .Datasource(d=>d.URL("/Home/DataSource").Adaptor("UrlAdaptor"))

            . . . .

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

    )

</div>


<script type="text/javascript">

  


        //custom adaptor implementation extending url adaptor         


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


            processQuery: function (dm, query, hierarchyFilters) {

                var obj = ej.UrlAdaptor.prototype.processQuery(dm, query, hierarchyFilters); // reused process query from url adaptor

                var data = ej.parseJSON(obj.data);

                data.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();//appended additional parameter to the request payload


                return {

                    data: JSON.stringify(data),

                    url: obj.url,

                    ejPvtData: obj.ejPvtData,

                    type: "POST",

                    contentType: "application/json; charset=utf-8"

                }

            }

        });


    function load(args) {

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

    }
</script>

[In Controller]

[ValidateAntiForgeryToken]

public ActionResult DataSource(DataManager dm)
        {}


Regards,
Ragavee U S.

GW Consultancy
Replied On October 22, 2015 03:00 PM UTC

Thank you for your response, however this approach will not work for the RequestVerificationToken as this field cannot be included in the JSON data as it will not be picked up on the server.

The sample you provided does not specifically address the RequestVerificationToken issue, rather it shows to append any additional data fields.

Thanks
Grant

Ragavee U S [Syncfusion]
Replied On October 23, 2015 10:20 AM UTC

Hi Grant,

We have achieved your requirement by extending the UrlAdaptor and DataManager. Please refer to the below code example.

<script type="text/javascript">

  

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

    }

        //custom adaptor implementation extending url adaptor         


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


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

                return {

                    type: "POST",

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

                    data: {

                        __RequestVerificationToken: value.__RequestVerificationToken, //appending the AntiForgery token to the request payload during update action

                        value: JSON.stringify(value)                       

                    }

                };

            },

            insert: function (dm, data, tableName) {

                return {

                    type:"POST",

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

                    data: {

                        __RequestVerificationToken: data.__RequestVerificationToken, //appending the AntiForgery token to the request payload during insert action

                        value: JSON.stringify(data)

                    }

                };

            }

        });


    function load(args) {

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

        this.model.dataSource.update = dmAdaptorUpdate;

        this.model.dataSource.insert = dmAdaptorInsert;

    }
</script>


We have modified the sample, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/120821/ze/Sample_modified-1649369553

Regards,
Ragavee U S.

GW Consultancy
Replied On October 23, 2015 11:36 AM UTC

This is a great solution to the problem thanks.

For others who may also experience a similar issue, as an alternative approach I also experimented with passing the token as a request header. This also works well:

var verificationAdaptor = new ej.UrlAdaptor().extend({
        processQuery: function (dm, query, hierarchyFilters) {
            var obj = ej.UrlAdaptor.prototype.processQuery(dm, query, hierarchyFilters);
            var data = ej.parseJSON(obj.data);

            var token = $('[name=__RequestVerificationToken]').val();
            return {
                data: JSON.stringify(data),
                url: obj.url,
                headers: { "__RequestVerificationToken": token },
                ejPvtData: obj.ejPvtData,
                type: "POST",
                contentType: "application/json; charset=utf-8"
            }
        }
    });

On the server side you then need to roll-your-own AntiForgeryAttribute to check the form post, or if AJAX (i.e. HttpContext.Request.IsAjaxRequest()) then check the request headers.

Thanks for your help.
Grant

Ragavee U S [Syncfusion]
Replied On October 26, 2015 05:44 AM UTC

Hi Grant,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S.

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.

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

;