组件/数据管理/网格/模板

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

客户端详细信息模板

Telerik UI Grid for ASP。NET MVCenables you to show additional information for a data item by setting the detail template of the Grid.

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

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

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

定义客户端详细信息

为ASP配置Grid。NET MVCto display additional details of the产品实体从罗斯文数据库:

  1. 创建一个新的ASP。NET MVCapplication. If you have installed theTelerik UI for ASP。NET MVCVisual Studio Extensions，为ASP创建一个Telerik UI。NET MVC应用程序。命名应用程序KendoGridClientDetailTemplate．如果您决定不为ASP使用Telerik UI。NET MVC Visual Studio扩展，follow the steps from the介绍性的文章为ASP添加Telerik UI。NET MVCto the application.

  2. 添加一个新的实体框架数据模型．右键单击~ /模型文件夹中的解决方案资源管理器并选择添加>新项目．选择数据>ADO。NET实体数据模型在添加新项目对话框。命名模型Northwind.edmx并点击下一个．这开始了实体数据模型向导．

    用户界面为ASP。NET MVCA new entity data model

  3. 选择从数据库生成并点击下一个．的连接罗斯文数据库。点击下一个．

    用户界面为ASP。NET MVCChoosing the connection

  4. 选择产品表格来自您希望在模型中包括哪些数据库对象?．保留所有其他选项的默认设置。点击完成．

    用户界面为ASP。NET MVCChoosing the Products table in the database objects

  5. 开放HomeController.cs并添加一个新的操作方法，该方法将以JSON形式返回Products。网格向该操作发出Ajax请求。

    Products_Read() {}

  6. 添加一个类型的新参数DataSourceRequest到行动。此参数将包含当前Grid请求信息-页面、排序、分组和筛选。修饰该参数DataSourceRequestAttribute．属性将填充DataSourceRequest对象。

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

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

    public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable products = northwind. products;结果= products.ToDataSourceResult(请求);}}

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

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

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

    @(Html.Kendo(). grid () . name ("grid") . dataSource (dataSource => dataSource . ajax (). read (read => read.)操作("Products_Read"， "Home"))。绑定(product => product. productid);列。绑定(product => product. productname);}) .Pageable())

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

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

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

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

  12. 构建并运行项目。用户界面为ASP。NET MVCThe final result is a Grid with detail template

要下载Visual Studio项目，请参考这个GitHub仓库．

设置客户端层次结构

为ASP配置Grid。NET MVC显示所有产品的实体可用类别实体从罗斯文数据库:

  1. 创建一个新的ASP。NET MVCapplication. If you have installed theTelerik UI for ASP。NET MVCVisual Studio Extensions，为ASP创建一个Telerik UI。NET MVC应用程序。命名应用程序KendoGridClientHierarchy．如果您决定不为ASP使用Telerik UI。NET MVC Visual Studio扩展，follow the steps from the介绍性的文章为ASP添加Telerik UI。NET MVCto the application.

  2. 添加一个新的实体框架数据模型．右键单击~ /模型文件夹中的解决方案资源管理器并选择添加>新项目．选择数据>ADO。NET实体数据模型在添加新项目对话框。命名模型Northwind.edmx并点击下一个．这开始了实体数据模型向导．

    用户界面为ASP。NET MVCA new entity data model

  3. 选择从数据库生成并点击下一个．的连接罗斯文数据库。点击下一个．

    用户界面为ASP。NET MVCChoosing the connection

  4. 选择产品而且类别表从您希望在模型中包括哪些数据库对象?．保留所有其他选项的默认设置。点击完成．

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

    ActionResult categores_read () {}

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

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

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

    public ActionResult categores_read ([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable categories = northwind. categories;//平摊Category以避免JSON序列化期间的循环引用。DataSourceResult result = categories。ToDataSourceResult(request, category => new { category.CategoryID, category.CategoryName }); } }

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

    public ActionResult categores_read ([DataSourceRequest]DataSourceRequest request) {using (var northwind = new NorthwindEntities()) {IQueryable categories = northwind. categories;//平摊Category以避免JSON序列化期间的循环引用。DataSourceResult result = categories。ToDataSourceResult(request, category => new { category.CategoryID, category.CategoryName }); return Json(result); } }

  9. 开放HomeController.cs并添加一个新的操作方法，该方法将返回产品实体作为JSON。子网格向该操作发出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); } }

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

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

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

    • 总是打电话给ToClientTemplate在使用Telerik UI进行ASP。NET MVC帮助程序在客户端模板中。
    • 逃避＃使用列时用于模板表达式的字符ClientTemplate在详细模板中，以便表达式在正确的上下文中求值。

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

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

  13. 构建并运行项目。

    用户界面为ASP。NET MVCThe final result is a hierarchical Grid

要下载Visual Studio项目，请参阅[此GitHub存储库]((https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/client-hierarchy）.

处理嵌套客户端模板

嵌套客户端模板不是Kendo UI Core包装器支持的开箱即用特性。有关此问题的更多信息，请查看中的网格故障排除部分嵌套客户端模板时出现无效模板错误．

另请参阅

在本文中
相关文章
找不到你需要的帮助? 改进本文
Baidu
map