Setting Kendo UI Grid DataSource Read property with Handler in ASP.NET Core MVC with Razor Pages

Blake Rivell

I am using the Kendo UI for ASP.NET Core MVC suite with a Razor Pages web application so I am trying to use the handler technique for the grid's server operations.

@(Html.Kendo().Grid<CustomerViewModel>()
        .Name("CustomersGrid")
        .Columns(columns =>
        {
            columns.Bound(x => x.CustomerId).Title("Student ID");
            columns.Bound(x => x.CustomerName).Title("Name");
        })
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(true)
            .Read(read => read.Url("/Customers?handler=Read")))
         )

I looked in the network tab and it is making the correct POST to http://localhost:5000/Customers?handler=Read however I am not ending up at my breakpoint and I get a status code 400.

In the razor page's code behind the Action method is named OnPostReadAsync

Any idea why this is not working? In addition to .Url also tried using read.Action and read.Route in the .Read property of the DataSource.

Here is the class with the action method:

public class IndexModel : PageModel
{
    private readonly ICustomerRepository _customerRepository;
    private readonly IMapper _mapper;

    public IndexModel(ICustomerRepository customerRepository, IMapper mapper)
    {
        _customerRepository = customerRepository;
        _mapper = mapper;
    }

    public IList<CustomerViewModel> Customers { get; set; }

    public async Task<IActionResult> OnPostReadAsync([DataSourceRequest] DataSourceRequest request)
    {
        // THIS IS WHERE I WANT IT TO GO FOR READ

        var customersFromDb = await _customerRepository.FilterAsync();
        return new JsonResult(_mapper.Map<IList<Customer>, IList<CustomerViewModel>>(customersFromDb).ToDataSourceResult(request));
    }
}
crgolden

You may be doing this already, but I didn't see it in your code. Remember the Razor Pages require the anti-forgery token. You can inject it into your markup like this:

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf

And I added this function to set it on the grid's dataSource requests:

$(function () {
    const requestVerificationToken = '@Xsrf.GetAndStoreTokens(HttpContext).RequestToken';
    const beforeSend = req => req.setRequestHeader('RequestVerificationToken', requestVerificationToken);
    const grid = $("#grid").getKendoGrid();
    grid.dataSource.transport.options.create.beforeSend = beforeSend;
    grid.dataSource.transport.options.update.beforeSend = beforeSend;
    grid.dataSource.transport.options.destroy.beforeSend = beforeSend;
});

Without that token all the PageModel custom handlers will return 400 errors.

Reference: Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

assigning Datasource of kendo grid in Javascript part. (Asp.net MVC-Razor Engine)

Kendo UI Grid MVC dataSource.at(0) undefined with AutoBind = false and after dataSource.Read()

ASP.NET Core Razor pages vs Full MVC Core

ASP .Net Core with Razor Pages Vs Angular for UI

How to read connection string in ASP .NET Core Razor Pages

ASP.NET MVC 4 Kendo Grid - ForeignKeyAttribute on property is not valid

NotSupportedException in Asp.NET Core MVC Razor Pages Rendering

How to extend an ASP.NET Core MVC project by Razor Pages?

Asp.net Core Applications Issue with Razor and MVC Pages

Reference to Kendo UI (ASP.NET MVC) dropdown on a grid

Data does not display in the Kendo MVC Grid ASP.NET Core

Asp.net core mvc + kendo ui for jquery CRUD

ASP.NET Core Razor Pages - How to bind an asp-page-handler to a checkbox without Javascript

Kendo UI MVC Grid - DataSource Interfering With Column Template

ASP.Net Core 3.1 Razor Pages event handler not working in production

Is there a way to catch a HTTP request to a non existing custom handler for Razor Pages in ASP.NET Core 2.1?

partial page model on post handler is not executing | ASP.NET Core Razor Pages 2.0

Pagination and Pages conflict - ASP.Net Core Razor Pages conflicts with MVC controller method pagination

Kendo Grid MVC - DataSource Error

Authorization in ASP .NET Core Razor pages

kendo ui grid not working with .net core

ASP.NET Core Pages Handler

How do I post the row id in a custom built ASP.NET Core Razor Pages editable Grid?

Kendo grid css in asp.net mvc

JQuery Grid for ASP.NET MVC Razor

ASP.NET Core Kendo Grid and model

ASP.NET Core: Razor: Post QueryString as is to a razor handler

ASP.Net Core Razor Pages application not binding to property within model

ASP.NET Core Razor Pages - Complex model property is null after returning Page()