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 Core 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
:
-
Configure the Read URL in the
DataSource
. The URL in these methods must refer to the method name in thePageModel
:@(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") )
-
Add an AntiForgeryToken at the top of the RazorPage:
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken()
-
Send the AntiForgeryToken with each POST request of the page. Additional parameters can also be supplied:
<script> function forgeryToken() { return kendo.antiForgeryTokens(); } </script>
-
Within the
.cs
file, introduce ActionMethod for the Read operationpublic JsonResult OnPostCustomers([DataSourceRequest]DataSourceRequest request) { return new JsonResult(Customers.ToDataSourceResult(request)); // Where Customers is a colection of objects }