Telerik UI for ASP。NET MVC?下载30天免费试用

Ajax绑定

您可以为Ajax绑定配置Telerik UI树列表,以便在加载子节点、排序或筛选时发出Ajax请求。

当配置为Ajax绑定时,用于ASP的Telerik UI树列表。NET MVCmakes Ajax requests when doing sorting, filtering or when expanding a node.

ajax绑定模式具有以下特点:

  • TreeList只检索表示当前关卡项目的数据(JSON格式)。

    要利用惰性加载,请定义hasChildren模型的属性

    public class EmployeeViewModel {// Id。public int EmployeeID {get;设置;}

    公共字符串FirstName {get;设置;} //该属性区分大小写。只有当您想使用惰性加载时才定义它。//如果没有定义,树列表将在客户端上计算并赋值。public bool hasChildren {get;设置;}

  • 所有列模板都在客户端执行。他们遵循jQuery模板的Kendo UI定义规则,可能包含嵌入的JavaScript代码。

为ASP配置树列表。NET MVC做Ajax绑定:

  1. 创建一个新的ASP。NET MVCweb application. Follow the steps from the介绍性的文章为ASP添加Telerik UI。NET MVCto the application.
  2. 打开HomeController.cs并添加一个新的操作方法,它将以JSON的形式返回项目。TreeList向该操作发出Ajax请求。

    public IActionResult TreeList_Read() {}
  3. 添加一个类型的新参数Kendo.Mvc.UI.DataSourceRequest到行动。它将包含关于排序、聚合和过滤的当前TreeList请求信息。修饰该参数Kendo.Mvc.UI.DataSourceRequestAttribute.属性将填充DataSourceRequest对象。现在导入Kendo.Mvc.UI名称空间。还要添加另一个参数,以指示展开了哪个父节点。

    public IActionResult TreeList_Read([DataSourceRequest]DataSourceRequest request, int?Id) {}
  4. 使用ToTreeDataSourceResult扩展方法将项集合转换为Kendo.Mvc.UI.TreeDataSourceResult对象。该扩展方法将过滤、排序、计算聚合并仅找到您的数据的当前级别项使用的信息DataSourceRequest对象。要使用ToTreeDataSourceResult扩展方法,导入Kendo.Mvc.Extensions名称空间。

    public JsonResult Index([DataSourceRequest] DataSourceRequest请求,int?id) {var result = ((EmployeeDirectoryService) employeeDirectory). getallremote()。ToTreeDataSourceResult(request, e => e. employeeid, e => e. reportto, e => id。HasValue吗?e. reportto == parentId: e. reportto == null, e => e);}
  5. 返回TreeDataSourceResult为JSON。为Ajax绑定配置Telerik UI树列表。

    public JsonResult Index([DataSourceRequest] DataSourceRequest请求,int?id) {var result = ((EmployeeDirectoryService) employeeDirectory). getallremote()。ToTreeDataSourceResult(request, e => e. employeeid, e => e. reportto, e => id。HasValue吗?e. reportto == parentId: e. reportto == null, e => e);返回Json(结果,JsonRequestBehavior.AllowGet);}
  6. 在视图中,配置TreeList以使用在前面步骤中创建的操作方法。

    @(Html.Kendo(). treelist () . name ("treelist") . columns (columns => {columns. add()。字段(f => f.FirstName). width(250)。标题(“名字”);columns.Add()。字段(e => e. lastname)。标题(“姓”);columns.Add()。Field(e => e. position);columns.Add()。字段(e = > e.Extension) .Title (Ext) .Format(“{0:#}”);}) . filterable () . sortable () . dataSource (dataSource => dataSource . read (read => read.)Action("Index", "EmployeeDirectory")) .Model(m => {m.e id (f => f. employeeid);f. parentid (f => f. reportto).Nullable(true);m.Field(f => f. firstname); m.Field(f => f.LastName); m.Field(f => f.ReportsTo); }) .Aggregates(x=> x.Add(y=> y.BirthDate).Count()) ) )
  7. 构建并运行应用程序。

另请参阅

在本文中
Baidu
map