Send anti forgery token AND additional data

[Dan]

I want to send the token and additional data on my update call.

Something like the below, is this possible? Do i even need the token for an intranet app? If not, how do I get rid of it?

Javascript

function additionalInfo() {
        return {
            token: kendo.antiForgeryTokens(),
            whatChanged: 2
        }
    }

 

PageModel 

   public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, OCHODisplayReply reply, int whatChanged) {

            if (reply != null && ModelState.IsValid) {
                       /...
              }
}

 

Grid method

.Update(u => u.Url("/Index/?handler=Update").Data("additionalInfo")

[Eric]

function sendingAdditionalParameter() {
        var testInputVal = $("#testInput").val();
        return $.extend(kendo.antiForgeryTokens(), testInputVal);
    }

This did NOT work for me today in Visual Studio 2022.. .net 6 asp core

I had to fully make the object and extend like so...

        var theval = $("#testInput").val();
        var theobj =  {testInput: theval};
        var ext = $.extend(kendo.antiForgeryTokens(), theobj );
        return ext;

 

[Tsvetomir]

The solution that you have proposed is the correct approach when more than a single value should be sent, or if the binder on the server-side is restrictive and the property name from the client-side should match the property accepted in the ActionMethod.

When more than one parameters have to be sent, the following line of code could be used:

function parameterData() {
     return $.extend(true, {}, kendo.antiForgeryTokens(), {text: "my val"}); // or obj reference
}

[Anton Mironov]

Hello Dan,

Thank you for the provided code snippets. In order to send an additional parameter to the Razor Controller, try extending the "kendo.antiForgeryTokens" object.

Here is an example:

Grid method

.Update(u => u.Url("/Index?handler=Update").Data("sendingAdditionalParameter"))

Function handler (returning a value from a custom input field)

<input type="type" name="testInputVal" id="testInput"/>

    function sendingAdditionalParameter() {
        var testInputVal = $("#testInput").val();

        return $.extend(kendo.antiForgeryTokens(), testInputVal);
    }

In the Update method of the Controller, the input value will be received as a string "testInputVal" parameter:

        public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, OrderViewModel order, string testInputVal)
        {
            orders.Where(x => x.OrderID == order.OrderID).Select(x => order);

            return new JsonResult(new[] { order }.ToDataSourceResult(request, ModelState));
        }

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

[Dan]

Anton,

 

Thank you that worked. Follow up question. I am trying now to determine which fields on my pop up editor have changed so that when I send the data to my back end code I don't have to make separate calls for fields that were not updated.I was attempting to do this with JS but cannot make a working solution. Is it possible to send the grid's current data in the .Data( "my grid fields value here"  ) method? That way I can pass the values along with the Edit values and compare the two to see if they are different then only act on the dirty values.

 

Any help is appreciated thanks.

[Anton Mironov]

Hi Dan,

In order to send the current state of items from the Kendo UI Grid, use the "view" method of the dataSource. Here is an example:

.Editable(e => e.Mode(GridEditMode.InLine))

.Update(u => u.Url("/Index?handler=Update").Data("sendingAdditionalParameter"))

    function sendingAdditionalParameter() {

        var grid = $("#grid").data("kendoGrid");
        var dataSourceOfView = grid.dataSource.view();

        return $.extend(kendo.antiForgeryTokens(), dataSourceOfView);
    }

I hope this information helps.

 

Best Regards,
Anton Mironov
Progress Telerik

[Dan]

Is there a way to send model.dirtyFields through to the .Data method? It doesnt seem like its something I can stringify or pass.

[Anton Mironov]

Hello Dan

The recommended way to get the dirty (changed) fields is represented in the following forum answer:

• https://www.telerik.com/forums/how-to-send-only-the-changed-fields-to-the-server-during-update-in-kendo-ui-grid-batch-save#dnso85K6MUaDUPl9aWVyQA

After getting the needed models (keep in mind the whole model needs to be sent, not just the changed field) in the "changedModels" array send it with the "Data" method as in my previous response.

I hope this information helps.

Greetings,
Anton Mironov
Progress Telerik

[Dan]

Anton,

Which event needs to be subscribed to for that code? I would assume Edit, but that seems to trigger this code when the edit button is clicked not AFTER the fields have been edited and submitted. Meaning when I try to see what changedModels array looks like after I submit the edit values, it is empty.

Save event doesn't seem relevant to Edit.

This is the code at the moment:

function onEdit(e) {
        var dataSource = $("#Grid").data("kendoGrid").dataSource,
            data = dataSource.data(),
            changedModels = [];

        if (dataSource.hasChanges()) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].dirty) { changedModels.push(data[i].toJSON()) }
            }
        }
        console.log(changedModels)
}

[Dan]

Anton,

I realize that code needs to be in the function I use for .Data("additionalInfo") method. This seems to solve my case. Thank you!

[Anton Mironov]

Hi Dan,

I am glad to hear that the issue you were facing is now resolved.

I will close this ticket thread now. If assistance for anything else is needed, feel free to open a new one.

 

Greetings,
Anton Mironov
Progress Telerik