Binding to a grid using Razor Page code behind

[Henry Derstine]

I have a Kendo Grid on a Razor page and I am trying to understand the syntax for the bindings. Specifically,  t.Read(r => r.Action("Customer", "Index", new { handler = "ReadRecords" }).Type(HttpVerbs.Post)); It seems the parameters are .Action(Folder,Page,Method) which is unusual for me. I was expecting .Action(action,controller). Any explanation on this would be greatly appreciated. Basically I am trying to call methods from the cshtml.cs page instead of going to a controller class.

Thanks

The folder structure is

Pages

--Customer 

------Index.cshtml

 

Index.cshtml

@page
@model RazorPageGridTest.Pages.Customer.IndexModel
@{
    ViewData["Title"] = "Index";
}

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

@using Kendo.Mvc.UI

<h2>Index</h2>

<div id="grid">

</div>

@(Html.Kendo().Grid<RazorPageGridTest.Customer>().Name("grid")
    .AutoBind(false)
    .Columns(x=> {
        x.Bound("address");
        x.Bound("name");
        x.Command(c => c.Edit());
    })
    .DataSource(d=> d.Custom()
        .Transport(t=> {
            t.Read(r => r.Action("Customer", "Index", new { handler = "ReadRecords" }).Type(HttpVerbs.Post));
            t.Update(r => r.Action("Customer", "Index", new { handler = "UpdateRecord" }).Type(HttpVerbs.Post));

        })
        .Schema(s=> s.Model(m=> m.Id(i=>i.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>

 

Index.cshtml.cs

using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

namespace RazorPageGridTest.Pages.Customer
{
    public class IndexModel : PageModel
    {
        public List<RazorPageGridTest.Customer> Data { get; set; }

        public void OnGet()
        {
       
        }

        

        public JsonResult OnPostReadRecords()
        {
            List<RazorPageGridTest.Customer> data = new List<RazorPageGridTest.Customer>();

            for (int i = 1; i <= 100; i++)
            {
                data.Add(new RazorPageGridTest.Customer()
                {
                    CustomerId = i,
                    Name = "Name2 "+ i.ToString(),
                    Address = "Address2 " + i.ToString()                    
                });
            }

            return new JsonResult(data);
        }

        public JsonResult OnPostUpdateRecord([DataSourceRequest] DataSourceRequest request, RazorPageGridTest.Customer customer)
        {
            System.Diagnostics.Debug.WriteLine("Updating");

            return new JsonResult(customer);
        }
        
    }
}

 

 

 

[Georgi]

Hi Henry,

Thanks for the provided information.

Generally speaking the dataSource of the grid needs urls which it will request for the different operations (read, create, update and destroy). The Action method builds that url.

The following configuration:

r.Action("Customer", "Index", new { handler = "ReadRecords" })

Will generate the below url:

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

Basically it is necessary to specify which view is requested and which handler of its code behind should handle the request. For further information about the routing in Razor Pages please refer to the following article:

• https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-2.1&tabs=visual-studio

Regards,
Georgi
Progress Telerik

[Mallika]

Working for me....After adding the correct kendo js script.

Try to dd latest (compatible to your VS)  Kendo.js scripts to your _layout.cshtml. 

<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>