ListView in Razor Pages
Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a cshtml
file and a cshtml.cs
file (by design, the two files have the same name).
You can seamlessly integrate the Telerik UI ListView for ASP.NET Core in Razor Pages applications.
This article describes how to configure the ListView component in a Razor Pages scenario.
For the complete project, refer to the ListView in Razor Pages example.
Getting Started
To configure the CRUD operations of the ListView DataSource
within a Razor Pages application, follow the next steps:
-
Specify the
Read
,Create
,Update
, andDestroy
options of theDataSource
configuration. The URL in each of these options must refer to the method name in thePageModel
HtmlHelper_Index.cshtml@page @model IndexModel @(Html.Kendo().ListView<OrderViewModel>() .Name("listview") .Pageable() .Editable() .TagName("div") .ClientTemplateId("template") .DataSource(ds => ds .Ajax() .Model(model => model.Id(p => p.OrderID)) .PageSize(18) .Create(create => create.Url("/Index?handler=Create").Data("forgeryToken")) .Read(read => read.Url("/Index?handler=Read").Data("forgeryToken")) .Update(update => update.Url("/Index?handler=Update").Data("forgeryToken")) .Destroy(destroy => destroy.Url("/Index?handler=Destroy").Data("forgeryToken")) ) )
-
Add an
AntiForgeryToken
at the top of the page.Razor@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken()
-
Send the
AntiForgeryToken
with the CRUD requests.Razor<script> function forgeryToken() { return kendo.antiForgeryTokens(); } </script>
Additional parameters can also be supplied.
Razor<script> function forgeryToken() { return { __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken, additionalParameter: "test" } } </script>
-
Within the
cshtml.cs
file, add a handler method for each data operation.Index.cshtml.cspublic static IList<OrderViewModel> orders; public void OnGet() { if (orders == null) { // Populate the "orders" collection with data. orders = new List<OrderViewModel>(); Enumerable.Range(1, 50).ToList().ForEach(i => orders.Add(new OrderViewModel { OrderID = i, Freight = i * 10, ShipName = "ShipName " + i, ShipCity = "ShipCity " + i })); } } public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request) { return new JsonResult(orders.ToDataSourceResult(request)); } public JsonResult OnPostCreate([DataSourceRequest] DataSourceRequest request, OrderViewModel order) { order.OrderID = orders.Count + 1; 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 ListView to a PageModel Property
To bind the ListView to a property from the PageModel
, follow the next steps:
-
Add a property to the
PageModel
that holds the data collection that must be loaded in the ListView.Razorpublic class ListViewPageModel : PageModel { [BindProperty] public IList<OrderViewModel> orders { get; set; } public void OnGet() { orders = new List<OrderViewModel>(); // Populate the collection with data. Enumerable.Range(1, 50).ToList().ForEach(i => orders.Add(new OrderViewModel { OrderID = i + 1, Freight = i * 10, ShipName = "ShipName " + i, ShipCity = "ShipCity " + i })); } }
-
Declare the
PageModel
at the top of the page.Razor@model ListViewPageModel
-
Bind the ListView to the collection property and disable the server data operations (
ServerOperations(false)
).HtmlHelper_Index.cshtml@page @model ListViewPageModel @(Html.Kendo().ListView<OrderViewModel>(Model.orders) .Name("listview") .Pageable() .TagName("div") .ClientTemplateId("template") .DataSource(ds => ds .Ajax() .PageSize(18) .ServerOperation(false) ) )