I am attempting to set up a Grid in ASP.Net Core 2.1 using Razor Pages.  This grid could potentially load thousands of records so I want to only load those that I need and use ajax server side sorting/grouping etc.  I have searched around and had trouble getting this to work as I like, which is completely inside the PageModel.  Using Razor Pages it is very easy to load all the data locally, but am I correct that you can not load the data remotely Ajax style without setting it up in a separate service layer?  I can set up my own remote endpoints if needed, but am confused as to why the Grid can not treat the page handlers of the PageModel as usable endpoints as long as they return the appropriate JSON.  If it can do this, could I be pointed to a simple sample?   Thanks.

The project that was attached worked fine and I was able to get mine to work as well with good success.  However, I found that the Grid stops working (no data) as soon as you add a Controller to the project.  It may be something simple, but I have not been able to find out why.  I am assuming that the grid begins looking to the Controllers folder for the action rather than the PageModel, I did not see how to mix the two. If you simply add a Controllers folder to the root with a TestController.cs file like below, any grid with PageModel binding fails and the read url for the grid is blank.

In order to reproduce failure, all I need to do is download the ajax-binding-test project from this thread, add a controllers folder and a controller underneath it by any name.

I tried VS2017 and 2019, I tried .net core 2.1 and 2.2 and I tried multiple Telerik control versions including the latest 2019.1.220

I also tried a second computer with a fresh install of VS.

It is certainly a routing issue at some level.  The customers page works fine if I put in a full path of: 

/Customer?handler=ReadRecords&action=Customer&controller=Index

If it is better, I can open up a ticket and post files.  Am I able to set the Grid paths directly for Read and Update?

Actually all that is needed to load the page instead of blank is to use the path

/Customer?handler=ReadRecords

I do not think it is accurate to say that MVC and Razor pages are not intended to be used together.  Microsoft's own principal Core sample app and ebook mix the two freely.  https://github.com/dotnet-architecture/eShopOnWeb

That said, my Razor Pages + Telerik has been mostly an exploration and I think it will be easier to just stick with MVC for the time being which is much more likely to work as expected and be fully documented.  The documentation and support for Razor Pages without workarounds has been lacking to date in the Telerik controls.

It looks like the the problem is simply how the datasource is bound.  In the initial project (ajax-binding-test) it used a different way to map the handler commands and is what is shown throughout documentation (Pic #1).  In your most recently attached project the handlers are matched directly with Url which makes sense.  

I realize the same documentation can be used that is in place for MVC and generally it does work the same and as expected.  There are just things such as this that are not clear it needs to be done a specific way for Razor Pages for someone who does not know the ins and outs of Kendo.  On the Ajax Grid binding page (https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding)  it should reference that direct Url needs to be used for Razor pages.  Things like that would go a long way.  Sorry if that info is somewhere that I did not see.  Now that I know what needs to be done and I am able to find it on a couple forum posts.

Thank you and I appreciate your correspondence.

• https://docs.telerik.com/aspnet-core/getting-started/razor-pages-integration

In your example, how do I pass a parameter when using the handler ReadRecord.

My model has the value for companyid which I need to pass to the ReadRecord 

Hello,

I have noticed that you have submitted a support thread in the private system. It is recommended to avoid submitting duplicate tickets. Nevertheless, I am sharing the provided answer in case anyone else from the community come across this scenario:

The Kendo UI Grid data source exposes a Data() option that allows for sending additional parameters to the server-side:

.Read(r => r.Action("Company", "Index", new { handler = "ReadRecords",  }).Data("additionalData")

    function additionalData() {
         //return $.extend(true, {}, kendo.antiForgeryTokens(), {companyId: '@Model.CompanyId'});
         return {companyId: '@Model.CompanyId'};
    }

       public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request, string companyId)
        {
            return new JsonResult(orders.ToDataSourceResult(request));
        }

Best regards,
Tsvetomir
Progress Telerik

This worked. However, when I bring the data back it shows nothing in the grid

Here is the grid control

Here is the method

public async Task<JsonResult> OnPostRead([DataSourceRequest] DataSourceRequest request ,string companyId , string primarycategory)
        {
           if( String.IsNullOrEmpty(companyId))
               {
                return new JsonResult(" ");
            }

            TokenResponse token = await GetToken.HandleToken();

            List<CategoryView> categorylist = await GetListCategories(token);

            List<CompanyCategory> pccat = new List<CompanyCategory>();
            pccat = await GetCategory(token, companyId, primarycategory, categorylist);

            return new JsonResult(pccat.ToDataSourceResult(request)) ;
        }

Here is my grid

Html.Kendo().Grid<CompanyCategory>()
                      .Name("grid")
                      .AutoBind(false)
                      .Columns(x =>
                      {
                          
                          x.Bound(c => c.category);
                          x.Bound(c => c.id);
                          x.Bound(c => c.company);
                          x.Bound(c => c.primarycategory);

                          x.Command(command => { command.Destroy(); }).Width(250);
                      })

                      .DataSource(d => d.Ajax()
                       .Read(r => r.Action("Company", "Index", new { handler = "Read" }).Data("additionalData").Type(HttpVerbs.Post))
                        .Destroy(u => u.Action("Company", "Index", new { handler = "Update" }).Data("deleteData").Type(HttpVerbs.Post))
                        .Model(m=> m.Id(id=>id))
                           //.PageSize(10)
                           )

                      )

Hi,

Passing of one parameter to the server-side could be done with the help of a plain object. However, with the introduction of the RazorPages, it is mandatory to send an anti-forgery token as well. Could you try the same approach but with the commented section of the script tag from my previous response?

    function additionalData() {
         return $.extend(true, {}, kendo.antiForgeryTokens(), {companyId: '@Model.CompanyId'});
        // return {companyId: '@Model.CompanyId'};
    }

Also, can you check the console of the browser for any errors that might have been thrown? In case the issue persists, is it possible for you to share a sample where the faulty behavior could be reproduced, as the provided code snippets seem correct?

Regards,
Tsvetomir
Progress Telerik

Hello Mad,

You can find a sample which contains a grid with enabled crud operations in Razor Pages in the following repository:

• https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Grid/GridCrudOperations.cshtml

Regards,
Georgi
Progress Telerik