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

Telerik UI Filter 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 Filter for ASP.NET MVC in Razor Pages applications.

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

Getting Started

To configure the Telerik UI Filter widget within a RazorPage:

  1. Configure the Read URL in the DataSource. The URL in these methods must refer to the method name in the PageModel:

        @(Html.Kendo().DataSource<CustomerViewModel>()
            .Name("dataSource1")
                .Ajax(t =>
                        {
                    t.Read(r=>r.Url("/Filter/FilterBinding?handler=Customers").Data("forgeryToken"));
                    t.Model(model => model.Id(p => p.CustomerID));
                    t.PageSize(20);
                })
        )
    
        @(Html.Kendo().Filter<CustomerViewModel>()
            .Name("filter")
            .ApplyButton(true)
            .ExpressionPreview(true)
            .Fields(f =>
            {
                f.Add(p=>p.CustomerID);
                f.Add(p=>p.Position);
                f.Add(p=>p.CompanyName);
                f.Add(p=>p.Country);
            })
            .FilterExpression(f => {
                f.Add(p => p.Position).IsEqualTo("Sales Representative");
            })
            .DataSource("dataSource1")
        )
    
  2. Add an AntiForgeryToken at the top of the RazorPage:

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

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

        public JsonResult OnPostCustomers([DataSourceRequest]DataSourceRequest request)
        {
            return new JsonResult(Customers.ToDataSourceResult(request)); // Where Customers is a colection of objects 
        }
    

See Also

In this article