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

[GW Consultancy]

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]

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]

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]

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]

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]

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]

Hi Grant,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S.