本系列文章将为大家介绍如何实现和应用模板，模板允许您自定义控件部分（标题、单元格、项目等）的呈现方式。

DevExtreme Complete Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

使用 *Template() 方法定义模板，例如：

DataGridColumnBuilder.CellTemplate - 为DataGrid控件中的列单元格指定模板。ListBuilder.ItemTemplate - 为 List 控件中的项目指定模板。PopupBuilder.ContentTemplate - 为 Popup 控件的内容指定模板。模板语法

模板由 Razor 标记和可以使用参数的 ERB 样式构造 (<% %>) 组成，要定义模板，请在控件的 *Template(RazorBlock templateContent) 方法中使用 @<text> 块。

注意：Razor VB：当您使用 @<text> 块时：

用@Code/End Code 附上控件配置；使用 Render() 结束控件配置。

Razor C#

@(Html.DevExtreme().List().DataSource(DataSource).ItemTemplate(@<text><div><%- Name %></div></text>))

Razor VB

@CodeHtml.DevExtreme().List() _.DataSource(DataSource) _.ItemTemplate(Sub()@<text><div><%- Name %></div></text>End Sub) _.Render()End Code

List 控件绑定到以下数据源：

C#

object[] DataSource = new[] {new { Name = "John" },new { Name = "Jane" }};

VB

Dim DataSource = {New With {.Name = "John"},New With {.name = "Jane"}}

您还可以在模板中使用 @Html，例如嵌套控件或访问标准 HTML 帮助程序。

如果模板很短且不使用 Razor 构造（以 @ 开头），则可以使用带有 String 参数的 *Template 方法的速记重载：

Razor C#

@(Html.DevExtreme().List().DataSource(DataSource).ItemTemplate("<div><%- Name %></div>"))

Razor VB

@(Html.DevExtreme().List() _.DataSource(DataSource) _.ItemTemplate("<div><%- Name %></div>"))

您可以在控件声明之外定义模板，这在以下情况下很有用：

模板很大；想重用一个模板；需要嵌套模板（下面的代码演示了如何将 List 控件嵌套在 Popup 控件中）。

Razor C#

@(Html.DevExtreme().Popup().ID("myPopup").ContentTemplate(@<text>@Html.Partial("_MyPopupContentTemplate")</text>))

Razor VB

@CodeHtml.DevExtreme().Popup() _.ID("myPopup") _.ContentTemplate(Sub()@<text>@Html.Partial("_MyPopupContentTemplate")</text>End Sub) _.Render()End Code

Shared/_MyPopupContentTemplate.cshtml

@(Html.DevExtreme().List().DataSource(ListDataSource).ItemTemplate(@<text><div><%- Name %></div></text>))

Shared/_MyPopupContentTemplate.vbhtml

@CodeHtml.DevExtreme().List() _.DataSource(ListDataSource) _.ItemTemplate(Sub()@<text><div><%- Name %></div></text>End Sub) _.Render()End Code

使用命名模板。

在 using(Html.DevExtreme().NamedTemplate(...)) 块中定义模板。在 *Template(TemplateName name) 方法中指定模板名称。

Razor C#

@(Html.DevExtreme().Popup().ID("myPopup").ContentTemplate(new TemplateName("myPopupContentTemplate")))@using (Html.DevExtreme().NamedTemplate("myPopupContentTemplate")) {@(Html.DevExtreme().List().DataSource(ListDataSource).ItemTemplate(@<text><div><%- Name %></div></text>))}

Razor VB

@CodeHtml.DevExtreme().Popup() _.ID("myPopup") _.ContentTemplate(New TemplateName("myPopupContentTemplate")) _.Render()End Code@Using (Html.DevExtreme().NamedTemplate("myPopupContentTemplate"))@CodeHtml.DevExtreme().List() _.DataSource(ListDataSource) _.ItemTemplate(Sub()@<text><%- Name %></text>End Sub) _.Render()End CodeEnd Using

可以在声明控件或布局的同一 Razor 文件中声明命名模板。

注意：

模板名称在整个应用程序中应该是唯一的。命名模板应该在顶层定义，它们不能在另一个模板中声明。

使用 Razor @helper 指令将模板标记提取到函数中。

Razor C#

@(Html.DevExtreme().Popup().ID("myPopup").ContentTemplate(@<text>@MyPopup_List()</text>))@helper MyPopup_List(){@(Html.DevExtreme().List().ItemTemplate(@<text>@MyPopup_List_Item()</text>))}@helper MyPopup_List_Item(){<text><div><%- Name %></div></text>}

Razor VB

@CodeHtml.DevExtreme().Popup() _.ID("myPopup") _.ContentTemplate(Sub() Write(MyPopup_List())) _.Render()End Code@helper MyPopup_List()@(Html.DevExtreme().List() _.ItemTemplate(Sub() Write(MyPopup_List_Item())))End Helper@helper MyPopup_List_Item()@<text><div><%- Name %></div></text>End Helper

DevExtreme

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。