DevExtreme v21.2正式版下載

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

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

• DataGridColumnBuilder.CellTemplate - 為DataGrid控件中的列單元格指定模板。
• ListBuilder.ItemTemplate - 為 List 控件中的項目指定模板。
• PopupBuilder.ContentTemplate - 為 Popup 控件的內容指定模板。

JavaScript 函數作為模板

您可以像在DevExtreme中一樣將模板定義為JavaScript 函數，并將它們用于：

• 實現復雜的邏輯（如條件渲染）；
• 修改模板容器元素；
• 訪問 DevExtreme 傳遞的額外參數。

使用 *Template(new JS(...)) 將模板定義為函數。

在下面的示例中，List 的 ItemTemplate 被聲明為 myList_itemTemplate 函數，該函數呈現項目內容并使用 jQuery 將自定義樣式應用于項目。 JavaScript 函數方法用于訪問模板中的 itemIndex 和 itemElement 參數，如果您使用 ERB 樣式的構造，則這些參數不可用。

Razor C#

@(Html.DevExtreme().List()
.DataSource(DataSource)
.ItemTemplate(new JS("myList_itemTemplate"))
)

Razor VB

@(Html.DevExtreme().List() _
.DataSource(DataSource) _
.ItemTemplate(New JS("myList_itemTemplate")) _
)

js

<script>
function myList_itemTemplate(itemData, itemIndex, itemElement) {
itemElement
.addClass("my-custom-style")
.append(
$("<span>").text("Item index: " + itemIndex + ", Name: " + itemData.Name)
);
}
</script>

模板中的HTML助手

如果模板呈現靜態內容，您可以像往常一樣在模板中使用 HTML 助手。 例如，如果您配置網格列，并且列的單元格應顯示相同的鏈接。 下面的代碼展示了如何使用 ActionLink HTML助手來呈現這個鏈接。

Razor C#

@(Html.DevExtreme().DataGrid()
.Columns(columns => {
//...
columns.Add().CellTemplate(@<text>
@Html.ActionLink("Link Text", "Details")
</text>);
})
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.Columns(Sub(columns)
columns.Add().CellTemplate(Sub()
@<text>
@Html.ActionLink("Link Text", "Details")
</text>
End Sub)
End Sub) _
.Render()
End Code

如果您需要使用模板參數，請使用以下方法：

Razor C#

@(Html.DevExtreme().DataGrid()
.Columns(columns => {
columns.Add().CellTemplate(@<text>
@Html.Raw(
Html.ActionLink("Link Text", "Details", "ControllerName", new { id = "ID_PLACEHOLDER" }, null)
.ToString()
.Replace("ID_PLACEHOLDER", "<%- data.OrderID %>")
)
</text>);
})
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.Columns(Sub(columns)
columns.Add().CellTemplate(Sub()
@<text>
@Html.Raw(
Html.ActionLink("Link Text", "Details", "ControllerName", New With {.id = "ID_PLACEHOLDER"}, Nothing) _
.ToString() _
.Replace("ID_PLACEHOLDER", "<%- data.OrderID %>")
)
</text>
End Sub)
End Sub) _
.Render()
End Code

此代碼演示如果網格列中的鏈接依賴于 OrderID，如何創建模板。 ActionLink 具有 data.OrderID 模板參數應提供的動態路由值 (id)，但是您應該使用占位符，因為 data.OrderID 不能傳遞給 id（ActionLink 是在服務器上生成的，而 data.OrderID 只能在客戶端接收一個值）。

結果表達式：

js

<a href="/ControllerName/Details/"<%- data.OrderID %>">Link Text</a>

注意：您可以使用HTML元素替代助手，下面的示例說明了這一點。

Razor C#

@(Html.DevExtreme().DataGrid()
.Columns(columns => {
columns.Add().CellTemplate(@<text>
<a href="@Url.Action("ActionName", "ControllerName")/<%- data.OrderID %>">Link Text</a>
</text>);
})
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.Columns(Sub(columns)
columns.Add().CellTemplate(Sub()
@<text>
<a href="@Url.Action("ActionName", "ControllerName")/<%- data.OrderID %>">Link Text</a>
</text>
End Sub)
End Sub) _
.Render()
End Code

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      歡迎一起進群討論