asp網站模板（B）

本系列文章將為大傢介紹如何實現和應用模板，模板允許您自定義控件部分（標題、單元格、項目等）的呈現方式。DevExtreme Complete Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網使用 *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 CodeDevExtremeDevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。