客户端详细信息模板

用于ASP的Telerik UI网格。网络核心enables you to show additional information for a data item by setting the detail template of the Grid.

有关可运行的示例，请参阅在网格中演示详细模板．

配置客户端详细信息模板:

1. 定义客户端详细信息
2. 设置客户端层次结构

定义客户端详细信息

为ASP. Grid配置。网络核心to display additional details of the产品实体的罗斯文数据库:

1. 开放HomeController.cs并添加一个新的动作方法，它将以JSON的形式返回Products。Grid对该操作发出Ajax请求。

   Products_Read() {}

2. 添加一个类型的新参数DataSourceRequest对行动。此参数将包含当前Grid请求信息—页面、排序、分组和筛选。属性来修饰该参数DataSourceRequestAttribute．属性将填充DataSourceRequest对象从发布的数据中获取。

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {}

3. 使用ToDataSourceResult扩展方法将产品转换为DataSourceResult对象。类提供的信息，该扩展方法将对数据进行分页、筛选、排序或分组DataSourceRequest对象。

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable products = northwind. products;DataSourceResult result = products.ToDataSourceResult(request);}}

4. 返回DataSourceResult为JSON。为Ajax绑定配置Grid。

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable products = northwind. products;DataSourceResult result = products.ToDataSourceResult(request);返回Json(结果);}}

5. 在视图中，配置Grid以使用在前面步骤中创建的操作方法。

   @(Html.Kendo(). grid () . name ("grid") . dataSource (dataSource => dataSource . ajax (). read (read => read。Action("Products_Read"， "Home"))) . columns (columns => {columns. column)。Bound(product => product. productid);列。绑定(product => product. productname);}) .Pageable())

    < model id="ProductID">            

6. 方法定义客户端模板jQuery模板的剑道UI语法。模板的上下文是当前Grid行绑定到的数据项(product实体)。

   每一个＃不属于模板表达式的符号#: #，# #或# = #-必须逃脱-\ \ #．

7. 指定id模板的ClientDetailTemplateId方法。

   @(Html.Kendo(). grid () . name ("grid") . dataSource (dataSource => dataSource . ajax (). read (read => read。Action("Products_Read"， "Home"))) . columns (columns => {columns. column)。Bound(product => product. productid);列。绑定(product => product. productname);}) .Pageable() .ClientDetailTemplateId("client-template"))

    < model id="ProductID">            

设置客户端层次结构

为ASP. Grid配置。NET核心显示所有产品对象中可用的实体类别实体的罗斯文数据库:

1. 开放HomeController.cs并添加一个新的操作方法，该方法将返回类别实体作为JSON。Grid对该操作发出Ajax请求。

   分类阅读(){}

2. 添加一个类型的新参数DataSourceRequest对行动。该参数将包含当前网格请求信息——页面、排序、分组和筛选。属性来修饰该参数DataSourceRequestAttribute．属性将填充DataSourceRequest对象从发布的数据中获取。

   public ActionResult categorories_read ([DataSourceRequest]DataSourceRequest request) {}

3. 使用ToDataSourceResult扩展方法将类别转换为DataSourceResult对象。类提供的信息，该扩展方法将对数据进行分页、筛选、排序或分组DataSourceRequest对象。

   public ActionResult categorories_read ([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable categories = northwind. categories;//在JSON序列化过程中，平滑Category以避免循环引用。DataSourceResult result = categories。ToDataSourceResult(request, category => new { category.CategoryID, category.CategoryName }); } }

4. 返回DataSourceResult为JSON。现在让我们为AJAX绑定配置Grid。

   public ActionResult categorories_read ([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable categories = northwind. categories;//在JSON序列化过程中，平滑Category以避免循环引用。DataSourceResult result = categories。ToDataSourceResult(request, category => new { category.CategoryID, category.CategoryName }); return Json(result); } }

5. 开放HomeController.cs并添加一个新的操作方法，该方法将返回产品实体为给定的类别JSON。子Grid对该操作发出Ajax请求。

   public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request, int categoryId) {using (var northwind = new NorthwindEntities()) {IQueryable products = northwind. products。其中(product => product。类别ID == categoryId); // Flatten the Product to avoid circular references during JSON serialization DataSourceResult result = products.ToDataSourceResult(request, product => new { product.ProductID, product.ProductName }); return Json(result); } }

6. 在视图中，配置用于Ajax绑定的GridCategories_Read．

   @(Html.Kendo(). grid () . name ("grid") . columns (columns => {columns。绑定(category => category. categoryid);列。绑定(category => category. categoryname);}) . dataSource (dataSource => dataSource. ajax()。读(Read =>读。动作(" categorories_read "， "Home"))))

    < model id="CategoryID">            

7. 使用定义客户端模板剑道UI模板语法。模板的上下文是类别当前网格行绑定到的实体。模板本身包含另一个Grid，该Grid绑定到Products_Read行动。

   • 总是调用ToClientTemplate方法时使用Telerik UI for ASP。网络核心helpers in a client template.
   • 逃避＃使用列时用于模板表达式的字符ClientTemplate在详细信息模板中，以便在正确的上下文中计算表达式。

    . /script

   @{var url =@ url . action ("HierarchyBinding_Orders"，"Grid");} 

8. 指定id模板的ClientDetailTemplateId方法。

   @(Html.Kendo(). grid () . name ("grid") . columns (columns => {columns。绑定(category => category. categoryid);列。绑定(category => category. categoryname);}) . dataSource (dataSource => dataSource. ajax()。读(Read =>读。Action(" categorories_read "， "Home"))) .ClientDetailTemplateId("client-template"))

    < model id="CategoryID">            

处理嵌套客户端模板

嵌套客户端模板不是一个开箱即用的功能，Kendo UI核心包装器支持。有关此问题的详细信息，请查看中的网格故障排除部分嵌套客户端模板时出现无效模板错误．

另请参阅

• 客户端详细模板由网格HtmlHelper为ASP。NET Core (Demo)
• 服务器端API