使用 DataList 和 Repeater 控件显示数据 (C#)
09/13/
本文内容
在前面的教程中,我们使用了 GridView 控件来显示数据。 从本教程开始,我们将介绍如何生成包含 DataList 和 Repeater 控件的常见报表模式,从用这些控件显示数据的基础知识开始。
简介
在过去28个教程中的所有示例中,如果我们需要显示数据源中的多个记录,请转到 GridView 控件。 GridView 为数据源中的每条记录呈现一行,并在列中显示记录的数据字段。 尽管 GridView 使它能够显示、分页、排序、编辑和删除数据,但其外观有点 boxy。 此外,为 GridView 结构提供的标记是固定的,它包括一个 HTML
Note
上面的示例使用 Text 属性分配有数据绑定语法值的标签 Web 控件。 或者,我们可以完全省略标签,只需键入数据绑定语法即可。 也就是说,我们不会使用 ,而是使用声明性语法 。
然而,在标签 Web 控件中保留两个优点。 首先,它提供了一种更简单的方法来基于数据设置数据的格式,如下一教程中所示。 其次,设计器中的 "编辑模板" 选项不会显示在某些 Web 控件之外显示的声明性数据绑定语法。 相反,编辑模板接口旨在简化静态标记和 Web 控件的使用,并假设任何数据绑定都通过 "编辑数据绑定" 对话框完成,该对话框可从 Web 控件智能标记进行访问。
因此,在使用 DataList (提供通过设计器编辑模板的选项)时,我更喜欢使用标签 Web 控件,以便通过编辑模板界面访问内容。 我们很快就会看到,Repeater 要求从 "源" 视图编辑模板的内容。 因此,在手工编写 Repeater 模板时,我通常会忽略标签 Web 控件,除非我知道我需要基于编程逻辑来设置数据绑定文本的外观。
图 8:使用 DataList ItemTemplate 呈现每个产品输出(单击以查看完全大小的映像)
步骤3:提高 DataList 的外观
与 GridView 类似,DataList 提供了许多与样式相关的属性,例如 Font、ForeColor、BackColor、CssClass、ItemStyle、AlternatingItemStyle、SelectedItemStyle等。 使用 GridView 和 DetailsView 控制时,我们在 DataWebControls 主题中创建了外观文件,该主题预定义了这两个控件的 CssClass 属性,并为其多个子属性(RowStyle、HeaderStyle等)预定义了 CssClass 属性。 让,为 DataList 执行相同操作。
如使用 ObjectDataSource 显示数据教程中所述,外观文件为 Web 控件指定了默认的与外观相关的属性。主题是外观、CSS、图像和 JavaScript 文件的集合,用于定义网站的特定外观和外观。 在使用 ObjectDataSource 显示数据教程中,我们创建了一个 DataWebControls 主题(作为 App_Themes 文件夹内的文件夹实现),当前有两个外观文件-GridView.skin 和 DetailsView.skin。 让我们添加第三个外观文件来指定 DataList 的预定义样式设置。
若要添加外观文件,请右键单击 "App_Themes/DataWebControls" 文件夹,选择 "添加新项",然后从列表中选择 "外观文件" 选项。 为 DataList.skin 文件命名。
图 9:创建名为 DataList.skin 的新外观文件(单击以查看完全大小的映像)
将以下标记用于 DataList.skin 文件:
这些设置将相同的 CSS 类分配给相应的 DataList 属性,就像在 GridView 和 DetailsView 控件中使用一样。 此处使用的 CSS 类 DataWebControlStyle、AlternatingRowStyle、RowStyle等,在 Styles.css 文件中定义,并已添加到前面的教程中。
添加此外观文件后,会在设计器中更新 DataList 的外观(您可能需要刷新 "设计器" 视图以查看新外观文件的效果; 从 "查看" 菜单中,选择 "刷新")。 如图10所示,每个交替产品都有浅粉色背景色。
图 10:创建名为 DataList.skin 的新外观文件(单击以查看完全大小的映像)
步骤4:浏览 DataList 其他模板
除了 ItemTemplate之外,DataList 还支持六个其他可选模板:
HeaderTemplate 如果提供,则将标题行添加到输出,并用于呈现此行
用于呈现交替项的 AlternatingItemTemplate
用于呈现选定项的 SelectedItemTemplate;选定项是其索引对应于 DataList s SelectedIndex 属性的项
用于呈现所编辑的项的 EditItemTemplate
SeparatorTemplate 如果提供,则在每个项之间添加分隔符,并用于呈现此分隔符
FooterTemplate-如果提供,则将页脚行添加到输出,并用于呈现此行
指定 HeaderTemplate 或 FooterTemplate时,DataList 会向呈现的输出添加一个附加的页眉或页脚行。 与 GridView 的表头和表尾行一样,DataList 中的标头和表尾不会绑定到数据。 因此,HeaderTemplate 或 FooterTemplate 中尝试访问绑定数据的任何数据绑定语法都将返回一个空字符串。
Note
正如我们在 "GridView 页脚" 教程中的显示摘要信息中所述,虽然页眉和页脚行不支持数据绑定语法,但数据特定的信息可直接注入到 GridView RowDataBound 事件处理程序中的这些行。 此方法可用于计算绑定到控件的数据的运行总计或其他信息,以及将该信息分配给脚注。 此相同的概念可以应用于 DataList 和 Repeater 控件;唯一的区别是,对于 DataList 和 Repeater,为 ItemDataBound 事件创建事件处理程序(而不是 RowDataBound 事件的事件处理程序)。
对于我们的示例,让我们将标题产品信息显示在 DataList 的顶部,结果为
标题。 若要实现此目的,请使用相应的标记添加 HeaderTemplate。 从设计器中,可以通过以下方式完成此操作:单击 DataList 的 "编辑模板" 链接,从下拉列表中选择 "标题模板",然后在 "样式" 下拉列表中选择 "标题 3" 选项后输入文本(参见图11)。
图 11:添加带有文本产品信息的 HeaderTemplate (单击查看完全大小的图像)
或者,可以通过在 标记中输入以下标记以声明方式添加此项:
Product Information
若要在每个产品列表之间添加一些空间,请在每个部分之间添加一个包含一条线的 SeparatorTemplate。 水平规则标记(
)将添加这样的分隔线。 创建 SeparatorTemplate,使其具有以下标记:
Note
与 HeaderTemplate 和 FooterTemplates一样,SeparatorTemplate 不会绑定到数据源中的任何记录,因此不能直接访问绑定到 DataList 的数据源记录。
完成此添加后,在浏览器中查看页面时,它应类似于图12。 请注意标题行和每个产品列表之间的行。
图 12: DataList 包含标题行和每个产品列表之间的水平标尺(单击以查看完全大小的图像)
步骤5:利用 Repeater 控件呈现特定标记
当访问图12中的 DataList 示例时,如果从浏览器中执行视图/源,则会看到,DataList 发出一个 HTML
...
由于
EnableViewState="False">
中继器按模板所指定的方式发出精确的标记,无其他任何内容。 图17显示了在浏览器中查看时的中继器输出。
图 17:单行 HTML
步骤6:改善中继器的外观
由于中继器会确切地发出其模板所指定的标记,因此不会出现用于 Repeater 的无样式相关属性。 若要更改中继器生成的内容的外观,必须手动将所需的 HTML 或 CSS 内容直接添加到 Repeater 的模板。
对于我们的示例,让 s 具有类别列可选背景色,如 DataList 中的交替行。 为实现此目的,我们需要通过 ItemTemplate 和 AlternatingItemTemplate 模板将 RowStyle CSS 类分配给每个 Repeater 项,并将 AlternatingRowStyle CSS 类分配给每个交替的中继器项,如下所示:
同时,还可以向包含文本产品类别的输出添加标题行。 由于我们不知道生成的
...
以下 HeaderTemplate 和 FooterTemplate 会产生所需的标记:
EnableViewState="False">
图18显示了这些更改后的中继器。
图 18:类别列以背景色替换并包括标题行(单击以查看完全大小的图像)
摘要
尽管 GridView 控件可以轻松地对数据进行显示、编辑、删除、排序和分页,但其外观非常 boxy,类似于网格。 为了更好地控制外观,需要转到 DataList 或 Repeater 控件。 这两个控件都使用模板显示一组记录,而不是使用 BoundFields、CheckBoxFields 等。
DataList 呈现为 HTML
尽管 DataList 和中继器在呈现的输出中提供了更大的灵活性,但它们缺乏了在 GridView 中发现的许多内置功能。 我们将在即将推出的教程中进行探讨,其中的一些功能可以无需太多的工作就重新插入,但请记住,使用 DataList 或中继器代替 GridView 会限制你可以使用的功能,而无需实现这些功能。提醒.
很高兴编程!
关于作者
特别感谢
此教程系列由许多有用的审阅者查看。 本教程的主管评审者是 Yaakov Ellis、Liz Shulok、Randy Schmidt 和 Stacy。 想要查看我即将发布的 MSDN 文章? 如果是这样,请在mitchell@放置一行。