New to Telerik UI for ASP.NET Core? Download free 30-day trial

Telerik UI Grid in Razor Pages

Razor Pages are an alternative to the MVC pattern. Razor Pages make page-focused coding easier and more productive. This approach consists of a cshtml file and a cs file (generally, the two files have the same name). You can seamlessly integrate the Telerik UI Grid for ASP.NET Core in Razor Pages applications.

For a runnable example, refer to the Grid in RazorPages example.

Getting Started

To enable CRUD operations in the Telerik UI Grid within a RazorPage:

  1. Setup CRUD URLs in the DataSource along with a Model.Id. The URL in these methods must refer to the name of the method in the PageModel.

        .DataSource(ds => ds.Ajax()
            .Read(r => r.Url("/Grid/GridCrudOperations?handler=Read").Data("forgeryToken"))
            .Update(u => u.Url("/Grid/GridCrudOperations?handler=Update").Data("forgeryToken"))
            .Create(c => c.Url("/Grid/GridCrudOperations?handler=Create").Data("forgeryToken"))
            .Destroy(d => d.Url("/Grid/GridCrudOperations?handler=Destroy").Data("forgeryToken"))
            .Model(m => m.Id(id => id.OrderID))
        )
    
  2. Add an AntiForgeryToken on top of the RazorPage

        @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
        @Html.AntiForgeryToken()
    
  3. Send the AntiForgeryToken with each POST request of the page. Additional paratemers can also be supplied.

        <script>
            function forgeryToken() {
                return kendo.antiForgeryTokens();
            }
        </script>
    
  4. Within the .cs file, introduce ActionMethod for each of the CRUD operations

        public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            return new JsonResult(orders.ToDataSourceResult(request));
        }
    
        public JsonResult OnPostCreate([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
        {
            order.OrderID = orders.Count + 2;
            orders.Add(order);
    
            return new JsonResult(new[] { order }.ToDataSourceResult(request, ModelState));
        }
    
        public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
        {
            orders.Where(x => x.OrderID == order.OrderID).Select(x => order);
    
            return new JsonResult(new[] { order }.ToDataSourceResult(request, ModelState));
        }
    
        public JsonResult OnPostDestroy([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
        {
            orders.Remove(orders.FirstOrDefault(x => x.OrderID == order.OrderID));
    
            return new JsonResult(new[] { order }.ToDataSourceResult(request, ModelState));
        }
    

Binding the Grid to a PageModel property

To bind the Telerik UI Grid to a property from the PageModel:

  1. Add a property to the PageModel that holds the collection of data for the grid.

        public class GridPageModel : PageModel
        {
            public IList<OrderViewModel> orders;
    
            //other ActionMethods
        }
    
  2. Declare the PageModel at the top of the RazorPage

        @model GridPageModel
    
  3. Bind the Grid to the collection property

        @(Html.Kendo().Grid<OrderViewModel>(Model.orders)
            .Name("grid")
        )
    

See Also

In this article