使用 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@放置一行。
