DevExtreme v21.2正式版下載

本系列文章將為大家介紹如何實現和應用模板，模板允許您自定義控件部分（標題、單元格、項目等）的呈現方式。

使用 *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

@Code
Html.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

@Code
Html.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

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

使用命名模板。

1. 在 using(Html.DevExtreme().NamedTemplate(...)) 塊中定義模板。
2. 在 *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

@Code
Html.DevExtreme().Popup() _
.ID("myPopup") _
.ContentTemplate(New TemplateName("myPopupContentTemplate")) _
.Render()
End Code

@Using (Html.DevExtreme().NamedTemplate("myPopupContentTemplate"))
@Code
Html.DevExtreme().List() _
.DataSource(ListDataSource) _
.ItemTemplate(Sub()
@<text>
<%- Name %>
</text>
End Sub) _
.Render()
End Code
End 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

@Code
Html.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和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群6：600715373      歡迎一起進群討論