DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

B/S端界面控件DevExtreme ASP.NET MVC入门级教程:模板语法(三)

来源:   发布时间:2022-05-06   浏览:97次

DevExtreme v21.2正式版下载

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

使用 *Template() 方法定义模板,例如:

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

您可以在模板中使用 DevExtreme 控件,例如以下代码将DataGrid 控件嵌套在Popup控件中:

Razor C#

@(Html.DevExtreme().Popup()
// ...
// Specifies the contents of the Popup control
.ContentTemplate(@<text>
@(Html.DevExtreme().DataGrid<Sale>()
.Columns(columns => {
columns.AddFor(m => m.Region);
columns.AddFor(m => m.City);
columns.AddFor(m => m.Amount);
columns.AddFor(m => m.Date);
})
)
</text>)
)

Razor VB

@Code
Html.DevExtreme().Popup() _
.ContentTemplate(Sub()
@<text>
@(Html.DevExtreme().DataGrid(Of Sale)() _
.DataSource(Function(d) d.WebApi().Controller("GridData")) _
.Columns(Sub(columns)
columns.AddFor(Function(m) m.Region)
columns.AddFor(Function(m) m.City)
columns.AddFor(Function(m) m.Amount)
columns.AddFor(Function(m) m.Date)
End Sub)
)
</text>
End Sub) _
.Render()
End Code

弹出窗口应如下所示:

B/S端界面控件DevExtreme ASP.NET MVC入门级教程:模板语法(二)

注意:

  • 由于 Razor 只允许一个级别的 @<text> 标记,因此您不能在另一个模板中定义模板,使用外部模板进行高级嵌套。
  • 如果在 ItemTemplate 或 CellTemplate 模板中使用DevExtreme控件,请确保在嵌套控件的 ID 选项中指定唯一 ID,或者不要指定此选项。在这种情况下,嵌套控件实例会获得自动生成的 ID。

将嵌套控件绑定到模板参数

嵌套控件的配置可以依赖于模板参数

下面的示例为 DataGrid 单元格定义了一个模板,一个单元格包含一个按钮,其配置取决于 cellTemplate 的值自由变量。

  • 要将值传递给 Text 方法,使用 Text(JS) 重载。
  • 要将值传递给 handleGridButtonClick(cellValue) 事件处理程序,请使用短匿名函数,此函数捕获无值变量并将其作为参数传递给事件处理程序。

注意:

如果处理程序很短,则不需要将其提取到外部函数 - 您可以使用简短的内联函数,例如:

.OnClick("function() { alert(value); }")

Razor C#

@(Html.DevExtreme().DataGrid()
// ...
.Columns(columns => {
columns.Add()
.DataField("Name")
.CellTemplate(@<text>
@(Html.DevExtreme().Button()
.Text(new JS("value"))
.OnClick("function() { handleGridButtonClick(value); }")
)
</text>);
})
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.Columns(Sub(columns)
columns.Add() _
.DataField("Name") _
.CellTemplate(Sub()
@<text>
@(Html.DevExtreme().Button() _
.Text(New JS("value")) _
.OnClick("function() { handleGridButtonClick(value); }")
)
</text>
End Sub)
End Sub) _
.Render()
End Code

JS

B/S端界面控件DevExtreme ASP.NET MVC入门级教程:模板语法(二)

示例:主从网格

将嵌套控件绑定到模板参数的一个常见用例是主从网格。 在以下代码中,详细信息部分嵌套了另一个 DataGrid,data.OrderID 自由变量用于其 DataSource 的 LoadParams。

Razor C#

@(Html.DevExtreme().DataGrid()
.DataSource(d => d.WebApi().Controller("DataGridMasterDetailView").Key("ID"))
.Columns(columns => {
columns.Add().DataField("FirstName");
columns.Add().DataField("LastName");
// ...
})
// Configures the Master-Detail UI
.MasterDetail(md => md
.Enabled(true)
// Specifies the contents of the detail section
.Template(@<text>
@(Html.DevExtreme().DataGrid()
.DataSource(d => d.WebApi()
.Controller("DataGridMasterDetailView")
.LoadAction("TasksDetails")
// Use "data.ID" in LoadParams
.LoadParams(new { id = new JS("data.ID") })
)
)
</text>)
)
)

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.DataSource(Function(d) d.WebApi().Controller("DataGridMasterDetailView").Key("ID")) _
.Columns(Sub(columns)
columns.Add().DataField("FirstName")
columns.Add().DataField("LastName")
End Sub) _
.MasterDetail(Sub(md) md _
.Enabled(True) _
.Template(Sub()
@<text>
@(Html.DevExtreme().DataGrid() _
.DataSource(Function(d) d.WebApi() _
.Controller("DataGridMasterDetailView") _
.LoadAction("TasksDetails") _
.LoadParams(New With { .id = New JS("data.ID") })
)
)
</text>
End Sub)
) _
.Render()
End Code

多嵌套控件

在某些情况下,模板参数应通过中间控件传递。 例如,如果您将明细 DataGrid 放置在 TabPanel 中,则此 DataGrid 可以访问 Tab 模板的参数,但看不到主 DataGrid 的明细模板的参数。 要解决这种情况,请将 tabExtras 自定义选项附加到 Tab,然后您可以在 tab1Template 模板中访问它:

Razor C#

@(Html.DevExtreme().DataGrid()
.KeyExpr("ID")
.DataSource(MasterGridDataSource, key: "ID")
.MasterDetail(m => m
.Enabled(true)
.Template(@<text>
@(Html.DevExtreme().TabPanel()
.Items(items => {
items.Add()
.Title("Tab 1")
.Option("tabExtras", new {
masterKey = new JS("key")
})
.Template(new TemplateName("tab1Template"));
})
)
</text>)
)
)

@using (Html.DevExtreme().NamedTemplate("tab1Template")) {
<!-- Use tabExtras.masterKey to configure a detail grid -->
}

Razor VB

@Code
Html.DevExtreme().DataGrid() _
.KeyExpr("ID") _
.DataSource(MasterGridDataSource, key:= "ID") _
.MasterDetail(Sub(md) md _
.Enabled(True) _
.Template(Sub()
@<text>
@(Html.DevExtreme().TabPanel() _
.Items(Sub(items)
items.Add() _
.Title("Tab 1") _
.Option("tabExtras", New With {.masterKey = New JS("key")}) _
.Template(New TemplateName("tab1Template"))
End Sub)
)
</text>
End Sub)
) _
.Render()
End Code

@Using (Html.DevExtreme().NamedTemplate("tab1Template"))
' Use tabExtras.masterKey to configure a detail grid
End Using

DataGrid 控件绑定到以下数据源:

C#

object[] MasterGridDataSource = new[] {
new { ID = 1, Name = "John" },
new { ID = 2, Name = "Jane" }
};

VB

Dim MasterGridDataSource = {
New With {.ID = 1, .Name = "John"},
New With {.ID = 2, .Name = "Jane"}
}

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线上公开课、中文教程资讯请上中文网获取

DevExpress企业定制服务
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/3039.html

相关产品: DevExtreme跨平台开发框架,


联系我们
  • 重庆总部 023-68661681 400-700-1020
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
在线
QQ
电话
咨询
023-68661681
返回
顶部