Razor Pages Grid Binding with AJAX Support desn't work

[Wang Xin]

Dear,

Firstly, I downloaded the test grid file with https://www.telerik.com/forums/razor-pages-grid-binding-with-ajax-support, I tried, the grid works.

when I added "services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");" to ConfigureServices,the dome of grid doesn't work， it is no response to call the read and update handler.

Test Env:VS2017 .net core 2.1 Razor, Telerik:Ver 2018.3.1017

I would appreciate it if you can give me some ideas.

thanks.

 

        ......

          services
                .AddMvc()
                .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
                .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
                
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

            services.AddKendo();
        }

razor page code

<h2>TestGrid</h2>

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

@(Html.Kendo().Grid<WebApplication8.Models.Customer>().Name("grid")
                                            .AutoBind(false)
                                            .Groupable()
                                            .Sortable()
                                            .Columns(x =>
                                            {
                                                x.Bound(c => c.Address);
                                                x.Bound(c => c.Name);
                                                x.Command(c => c.Edit());
                                            })
                                            .DataSource(d => d.Ajax()
                                                   .Read(r => r.Action("Pages", "Contact", new { handler = "ReadRecords" }).Type(HttpVerbs.Post))
                                                   .Update(u => u.Action("Customer", "Index", new { handler = "UpdateRecord" }).Type(HttpVerbs.Post))
                                                   .Model(m => m.Id(id => id.CustomerId))
                                                .PageSize(10)
                                            )
                                            .Pageable()
)



<script>
    $(function () {
        var grid = $("#grid").data("kendoGrid");

        grid.dataSource.transport.options.read.beforeSend = function (req) {
            req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        grid.dataSource.transport.options.update.beforeSend = function (req) {
            req.setRequestHeader('RequestVerificationToken', $('input:hidden[name="__RequestVerificationToken"]').val());
        };

        grid.dataSource.read();
    })
</script>

 

second, If I removed "services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");" from ConfigureServices, The Grid can work fine, but the ajax event doesn't work, I really don know the why.

 

<input asp-for="SearchString" onchange="HandlerTest()" class="form-control" />

<script>
    function HandlerTest() {


        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "About?handler=LoginIn",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            //data: { UserName: $("#UserName").val(), PassWord: $("#PassWord").val() },
            success: function (response) {
                console.log(response);
            },
            failure: function (response) {
                alert(response);
            }
        });
    }


</script>

 

 

[Georgi]

Hi Wang,

The described behavior is expected as the server is configured to search for the forgery token in the header with a name 'XSRF-TOKEN' but the grid sends it within the 'RequestVerificationToken' header.

You could either send the forgery token as an additional parameter to the read request or change the name of the request header.

e.g.

// send as a parameter
 .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))

    function forgeryToken () {
        return kendo.antiForgeryTokens();
    }


// change request header name

req.setRequestHeader('XSRF-TOKEN', $('input:hidden[name="__RequestVerificationToken"]').val());

Please choose one of the above approaches and let me know if the grid sends the forgery token as expected.


Regards,
Georgi
Progress Telerik

[Wang Xin]

yes, you are rgiht, it is fine after changing the request header name.

thank you very much.