首页 > 编程语言> 文章详细

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 模板语法（一）

2022-04-21 09:34:17 阅读：160 来源： 互联网

标签：控件 ASP Razor List DevExtreme Html 模板

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 控件绑定到以下数据源：

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

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

使用命名模板。

在 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

@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 欢迎一起进群讨论

更多DevExpress线上公开课、中文教程资讯请上中文网获取

标签：控件,ASP,Razor,List,DevExtreme,Html,模板
来源： https://www.cnblogs.com/AABBbaby/p/16172764.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 模板语法（一）

模板语法

外部模板