剃须刀页面
在Razor页面中TreeList CRUD操作
本文将展示如何在Razor Pages场景中使用TreeList组件执行CRUD操作。
设置TreeList组件绑定:
- 配置
创建，读，更新，删除方法数据源实例。这些方法中的url必须引用PageModel中的方法名。 - 设置
Id在模型的数据源．这是强制性的创建，更新，删除操作。
参见下面示例中的实现细节。对于Razor Pages示例的完整项目，请访问我们的GitHub库．
@page @model Telerik.Examples.RazorPages.Pages.TreeList.TreeListCrudOperationsModel @{ViewData["Title"] = "TreeListCrudOperations";} @using telerik . example . razorpages . models @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @ html . antiforgerytoken () @(Html.Kendo(). treelist () . name ("treelist") . toolbar (toolbar => toolbar. create ()) . columns (columns => {columns. add()。字段(e => e.f firstname)。标题(“名字”).Width (220);columns.Add()。字段(e => e. lastname)。标题(“姓”).Width (200);columns.Add()。Field(e => e. position);columns.Add()。字段(e => e.HireDate)。Format("{0:MMMM d, yyyy}"); columns.Add().Width(350).Command(c => { c.CreateChild().Text("Add child"); c.Edit(); c.Destroy(); }) .HtmlAttributes(new { style = "text-align: center;" }); }) .Editable() .DataSource(dataSource => dataSource .Read(r => r.Url("/TreeList/TreeListCrudOperations?handler=Read").Data("forgeryToken")) // Specify the url to the OnPostRead method. .Update(u => u.Url("/TreeList/TreeListCrudOperations?handler=Update").Data("forgeryToken")) .Create(c => c.Url("/TreeList/TreeListCrudOperations?handler=Create").Data("forgeryToken")) .Destroy(d => d.Url("/TreeList/TreeListCrudOperations?handler=Destroy").Data("forgeryToken")) .Model(m => { m.Id(f => f.EmployeeId); // Provide the Id property of the model. m.ParentId(f => f.ReportsTo); // Provide the Child Id property of the model. m.Expanded(true); // Set to true if you want the TreeList to be expanded by default. m.Field(f => f.FirstName); m.Field(f => f.LastName); m.Field(f => f.ReportsTo); m.Field(f => f.HireDate); m.Field(f => f.Position); }) ) .Height(540) ) <工具栏>< treelist-toolbar-button name="create" /> < TreeList -column width="350px"> < TreeList -column-command name="createChild" text="Add child" /> < TreeList -column-command name="edit" /> < TreeList -column-command name="destroy" /> < /运输> <模式数据=“数据”=“总”错误=总“错误”> < treelist-model id = " EmployeeId "父id =“ReportsTo”扩大= " true " > <字段> <字段name = " EmployeeId类型= number > < /字段> <字段名= " ReportsTo nullable = " true " > < /字段> <字段名称=“FirstName”类型=“字符串”> < /字段> <字段名= "姓" type = "字符串" > < /字段> <字段名称=“位置”类型=“字符串”> < /字段> <字段name = " HireDate类型=“日期”> < /字段> < /字段> < / treelist-model > < /模式> 使用系统;使用System.Collections.Generic;使用来;使用Kendo.Mvc.Extensions;使用Kendo.Mvc.UI;使用Microsoft.AspNetCore.Mvc;使用Microsoft.AspNetCore.Mvc.RazorPages;使用Telerik.Examples.RazorPages.Models;命名空间telerick . examples . razorpages . pages . treelist{公共类TreeListCrudOperationsModel: PageModel{私有静态IList employees;OnGet() {GetDirectory(); // Retrieve the sample data. } public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request) { // Apply any DataSource operations such as Paging/Filtering/Sorting to the List. var result = employees.ToTreeDataSourceResult(request, e => e.EmployeeId, e => e.ReportsTo, e => e ); return new JsonResult(result); } public JsonResult OnPostCreate([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee) { // Assign an Id to the newly created employee and add them to the list. employee.EmployeeId = employees.Count + 2; employees.Add(employee); return new JsonResult(new[] { employee }.ToTreeDataSourceResult(request, ModelState)); } public JsonResult OnPostUpdate([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee) { var target = employees.FirstOrDefault(x => x.EmployeeId == employee.EmployeeId); // Update the data for the employee that was edited. if(target != null) { target.FirstName = employee.FirstName; target.LastName = employee.LastName; target.HireDate = employee.HireDate; target.Position = employee.Position; target.ReportsTo = employee.ReportsTo; } return new JsonResult(new[] { employee }.ToTreeDataSourceResult(request, ModelState)); } public JsonResult OnPostDestroy([DataSourceRequest] DataSourceRequest request, EmployeeDirectoryModel employee) { employees.Remove(employees.FirstOrDefault(x => x.EmployeeId == employee.EmployeeId)); return new JsonResult(new[] { employee }.ToTreeDataSourceResult(request, ModelState)); } // Add some sample data to the list. private IList GetDirectory() { if (employees == null) { employees = new List(); employees.Add(new EmployeeDirectoryModel { EmployeeId = 1, FirstName = "Daryl", LastName = "Sweeney", ReportsTo = null, HireDate = DateTime.Now.AddDays(1), Position = "CEO", }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 2, FirstName = "Guy", LastName = "Wooten", ReportsTo = 1, HireDate = DateTime.Now.AddDays(2), Position = "Chief Technical Officer" }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 3, FirstName = "Buffy", LastName = "Weber", ReportsTo = 2, HireDate = DateTime.Now.AddDays(3), Position = "VP, Engineering" }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 4, FirstName = "Hyacinth", LastName = "Hood", ReportsTo = 3, HireDate = DateTime.Now.AddDays(4), Position = "Team Lead" }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 5, FirstName = "Akeem", LastName = "Carr", ReportsTo = 4, HireDate = DateTime.Now.AddDays(5), Position = "Junior Software Developer" }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 6, FirstName = "Rinah", LastName = "Simon", ReportsTo = 4, HireDate = DateTime.Now.AddDays(6), Position = "Software Developer" }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 7, FirstName = "Gage", LastName = "Daniels", ReportsTo = 3, HireDate = DateTime.Now.AddDays(7), Position = "Software Architect", }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 8, FirstName = "Constance", LastName = "Vazquez", ReportsTo = 3, HireDate = DateTime.Now.AddDays(8), Position = "Director, Engineering", }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 9, FirstName = "Darrel", LastName = "Solis", ReportsTo = 8, HireDate = DateTime.Now.AddDays(9), Position = "Team Lead", }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 10, FirstName = "Brian", LastName = "Yang", ReportsTo = 9, HireDate = DateTime.Now.AddDays(10), Position = "Senior Software Developer", }); employees.Add(new EmployeeDirectoryModel { EmployeeId = 11, FirstName = "Lillian", LastName = "Bradshaw", ReportsTo = 9, HireDate = DateTime.Now.AddDays(11), Position = "Software Developer", }); } return employees; } } } 使用系统;使用System.ComponentModel.DataAnnotations;命名空间Telerik.Examples.RazorPages.Models{公共类EmployeeDirectoryModel {[ScaffoldColumn(false)] public int EmployeeId {get;设置;}[必选][Display(Name = "First Name ")] public string FirstName {get;设置;} [Display(Name = "姓")]public string LastName {get;设置;} [ScaffoldColumn(false)]公共int?report to {get; set; } public string Position { get; set; } [ScaffoldColumn(false)] public bool hasChildren { get; set; } private DateTime? hireDate; [DataType(DataType.Date)] [Display(Name = "Hire Date")] public DateTime? HireDate { get { return hireDate; } set { if (value.HasValue) { hireDate = value.Value; } else { hireDate = null; } } } } }