|
| 1 | +page_title: The Telerik UI Filter in RazorPages |
| 2 | +description: "Telerik UI Filter for {{ site.framework }} in a RazorPages application." |
| 3 | +slug: razorpages_filterhelper_aspnetcore |
| 4 | +position: 2 |
| 5 | +--- |
| 6 | + |
| 7 | +# Telerik UI Filter in Razor Pages |
| 8 | + |
| 9 | +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 {{ site.framework }} in Razor Pages applications. |
| 10 | + |
| 11 | +For a runnable example, refer to the [Filter in RazorPages example](https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.RazorPages/Telerik.Examples.RazorPages/Pages/Filter/FilterBinding.cshtml). |
| 12 | + |
| 13 | +## Getting Started |
| 14 | + |
| 15 | +To configure the Telerik UI Filter widget within a `RazorPage`: |
| 16 | + |
| 17 | +1. Configure the Read URL in the `DataSource`. The URL in these methods must refer to the method name in the `PageModel`: |
| 18 | + |
| 19 | + |
| 20 | + ``` |
| 21 | + @(Html.Kendo().DataSource<CustomerViewModel>() |
| 22 | + .Name("dataSource1") |
| 23 | + .Ajax(t => |
| 24 | + { |
| 25 | + t.Read(r=>r.Url("/Filter/FilterBinding?handler=Customers").Data("forgeryToken")); |
| 26 | + t.Model(model => model.Id(p => p.CustomerID)); |
| 27 | + t.PageSize(20); |
| 28 | + }) |
| 29 | + ) |
| 30 | +
|
| 31 | + @(Html.Kendo().Filter<CustomerViewModel>() |
| 32 | + .Name("filter") |
| 33 | + .ApplyButton(true) |
| 34 | + .ExpressionPreview(true) |
| 35 | + .Fields(f => |
| 36 | + { |
| 37 | + f.Add(p=>p.CustomerID); |
| 38 | + f.Add(p=>p.Position); |
| 39 | + f.Add(p=>p.CompanyName); |
| 40 | + f.Add(p=>p.Country); |
| 41 | + }) |
| 42 | + .FilterExpression(f => { |
| 43 | + f.Add(p => p.Position).IsEqualTo("Sales Representative"); |
| 44 | + }) |
| 45 | + .DataSource("dataSource1") |
| 46 | + ) |
| 47 | + ``` |
| 48 | +
|
| 49 | +1. Add an AntiForgeryToken at the top of the RazorPage: |
| 50 | +
|
| 51 | +
|
| 52 | + ``` |
| 53 | + @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf |
| 54 | + @Html.AntiForgeryToken() |
| 55 | + ``` |
| 56 | +
|
| 57 | +1. Send the AntiForgeryToken with each POST request of the page. Additional parameters can also be supplied: |
| 58 | +
|
| 59 | +
|
| 60 | + ``` |
| 61 | + <script> |
| 62 | + function forgeryToken() { |
| 63 | + return kendo.antiForgeryTokens(); |
| 64 | + } |
| 65 | + </script> |
| 66 | + ``` |
| 67 | +
|
| 68 | +1. Within the `.cs` file, introduce ActionMethod for the Read operation |
| 69 | +
|
| 70 | + ``` |
| 71 | + public JsonResult OnPostCustomers([DataSourceRequest]DataSourceRequest request) |
| 72 | + { |
| 73 | + return new JsonResult(Customers.ToDataSourceResult(request)); // Where Customers is a colection of objects |
| 74 | + } |
| 75 | + ``` |
| 76 | +
|
| 77 | +## See Also |
| 78 | +
|
| 79 | +* [Server-Side API](/api/filter) |
0 commit comments