使用 DataList 和 Repeater 控件显示数据 (VB)

  • 项目

作者 ：Scott Mitchell

下载 PDF

在前面的教程中，我们已使用 GridView 控件来显示数据。 从本教程开始，我们将介绍使用 DataList 和 Repeater 控件构建常见的报告模式，从使用这些控件显示数据的基础知识开始。

简介

在过去 28 个教程的所有示例中，如果需要显示数据源中的多个记录，我们转向 GridView 控件。 GridView 为数据源中的每条记录呈现一行，并在列中显示记录的数据字段。 虽然 GridView 使它成为显示、翻页、排序、编辑和删除数据的对齐方式，但其外观却有点盒式。 此外，负责 GridView 结构的标记已修复，它包括一个 HTML <table> ，其中包含每个记录的表行 (<tr>) ，以及每个字段的表单元格 (<td>) 。

为了在显示多个记录时在外观和呈现标记中提供更大程度的自定义，ASP.NET 2.0 提供了 DataList 和 Repeater 控件 (这两个控件在 ASP.NET 版本 1.x) 中也可用。 DataList 和 Repeater 控件使用模板（而不是 BoundFields、CheckBoxFields、ButtonFields 等）呈现其内容。 与 GridView 一样，DataList 呈现为 HTML <table>，但允许每个表行显示多个数据源记录。 另一方面，中继器呈现的标记不会超出显式指定的内容，并且是需要精确控制所发出的标记时的理想候选项。

在接下来的十几篇左右教程中，我们将介绍使用 DataList 和 Repeater 控件构建常见的报告模式，从使用这些控件模板显示数据的基础知识开始。 我们将了解如何设置这些控件的格式、如何更改 DataList 中数据源记录的布局、常见的主控/详细信息方案、编辑和删除数据的方法、如何分页浏览记录等。

步骤 1：添加 DataList 和 Repeater 教程网页

在开始本教程之前，让我们先花点时间添加本教程所需的 ASP.NET 页面，以及接下来的几个使用 DataList 和 Repeater 显示数据的教程。 首先，在名为 DataListRepeaterBasics的项目中创建一个新文件夹。 接下来，将以下五个 ASP.NET 页添加到此文件夹，使其全部配置为使用母版页 Site.master：

  • Default.aspx
  • Basics.aspx
  • Formatting.aspx
  • RepeatColumnAndDirection.aspx
  • NestedControls.aspx

创建 DataListRepeaterBasics 文件夹并添加教程 ASP.NET 页面

图 1：创建 DataListRepeaterBasics 文件夹并添加教程 ASP.NET 页面

Default.aspx打开页面，将“用户控件”SectionLevelTutorialListing.ascx从UserControls文件夹拖到“设计”图面上。 我们在 母版页和网站导航 教程中创建的此用户控件枚举站点地图，并在项目符号列表中显示当前部分中的教程。

将 SectionLevelTutorialListing.ascx 用户控件添加到 Default.aspx

图 2：将 SectionLevelTutorialListing.ascx 用户控件添加到 Default.aspx (单击以查看全尺寸图像)

为了使项目符号列表显示我们将创建的 DataList 和 Repeater 教程，我们需要将它们添加到站点地图。 打开 文件， Web.sitemap 在“添加自定义按钮”站点地图节点标记后添加以下标记：

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

更新站点地图以包含新 ASP.NET 页

图 3：更新站点地图以包含新 ASP.NET 页

步骤 2：使用 DataList 显示产品信息

与 FormView 类似，DataList 控件的呈现输出依赖于模板，而不是 BoundFields、CheckBoxFields 等。 与 FormView 不同，DataList 旨在显示一组记录，而不是一个单独记录。 让我们从本教程开始，了解如何将产品信息绑定到 DataList。 首先打开 Basics.aspx 文件夹中的页面 DataListRepeaterBasics 。 接下来，将 DataList 从工具箱拖到Designer。 如图 4 所示，在指定 DataList 模板之前，Designer将其显示为灰色框。

将“数据列表”从工具箱拖到Designer

图 4：将“数据列表”从工具箱拖到Designer (单击以查看全尺寸图像)

在 DataList 的智能标记中，添加新的 ObjectDataSource 并将其配置为使用 ProductsBLL 类 s GetProducts 方法。 由于我们在本教程中创建只读 DataList，因此请在向导的“插入”、“更新”和“删除”选项卡中将下拉列表设置为“ (无”) 。

选择创建新的对象DataSource

图 5：选择“新建对象”“数据源” (单击以查看全尺寸图像)

将 ObjectDataSource 配置为使用 ProductsBLL 类

图 6：将 ObjectDataSource 配置为使用 ProductsBLL 类 (单击以查看全尺寸图像)

使用 GetProducts 方法检索有关所有产品的信息

图 7：使用 GetProducts 方法检索有关所有产品的信息 (单击以查看全尺寸图像)

配置 ObjectDataSource 并通过其智能标记将其与 DataList 关联后，Visual Studio 将在 DataList 中自动创建一个 ItemTemplate ，用于显示数据源返回的每个数据字段的名称和值， (看到以下标记) 。 此默认ItemTemplate外观与通过Designer将数据源绑定到 FormView 时自动创建的模板的外观相同。

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

注意

回想一下，通过 FormView 智能标记将数据源绑定到 FormView 控件时，Visual Studio 创建了 ItemTemplate、 InsertItemTemplate和 EditItemTemplate。 但是，使用 DataList 时，只会 ItemTemplate 创建 。 这是因为 DataList 没有 FormView 提供的相同内置编辑和插入支持。 DataList 确实包含与编辑和删除相关的事件，可以使用一些代码添加编辑和删除支持，但与 FormView 一样，没有简单的现成支持。 我们将在将来的教程中了解如何对 DataList 进行编辑和删除支持。

让我们花点时间改进此模板的外观。 与其显示所有数据字段，不如只显示产品名称、供应商、类别、每单位数量和单价。 此外，让我们在标题中 <h4> 显示名称，并使用标题下方的 来 <table> 布局剩余字段。

若要进行这些更改，可以使用Designer中的模板编辑功能，从 DataList 的智能标记单击“编辑模板”链接，也可以通过页面声明性语法手动修改模板。 如果在Designer中使用“编辑模板”选项，则生成的标记可能与以下标记不匹配，但通过浏览器查看时，应看起来与图 8 所示的屏幕截图非常相似。

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

注意

上面的示例使用标签 Web 控件，其 Text 属性被赋予数据绑定语法的值。 或者，我们可以完全省略标签，只键入数据绑定语法。 也就是说，我们可以改用声明性语法<%# Eval("CategoryName") %>，而不是使用 <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> 。

但是，保留标签 Web 控件有两个优点。 首先，它为基于数据设置数据格式提供了一种更简单的方法，我们将在下一篇教程中介绍。 其次，Designer中的“编辑模板”选项不显示显示在某个 Web 控件外部的声明性数据绑定语法。 相反，“编辑模板”界面旨在方便使用静态标记和 Web 控件，并假定任何数据绑定都将通过“编辑数据绑定”对话框完成，该对话框可从 Web 控件智能标记访问。

因此，在使用 DataList（它提供通过Designer编辑模板的选项）时，我更喜欢使用标签 Web 控件，以便通过“编辑模板”界面访问内容。 稍后我们将看到，中继器要求从“源”视图编辑模板内容。 因此，在创建 Repeater 模板时，我通常会省略标签 Web 控件，除非我知道我需要根据编程逻辑设置数据绑定文本的外观。

使用 DataList s ItemTemplate 呈现每个 Product 的输出

图 8：使用 DataList ItemTemplate 呈现每个产品的输出 (单击以查看全尺寸图像)

步骤 3：改进 DataList 的外观

与 GridView 一样，DataList 提供了许多与样式相关的属性，例如 Font、、ForeColor、BackColorCssClass、ItemStyleAlternatingItemStyle、SelectedItemStyle、 等。 使用 GridView 和 DetailsView 控件时，我们在主题中创建 DataWebControls 外观文件，为这两个控件预定义 CssClass 属性， CssClass 并为其多个子属性 (RowStyle、 HeaderStyle等) 。 让我们对 DataList 执行相同的操作。

如 使用 ObjectDataSource 显示数据 教程中所述，外观文件指定 Web 控件的默认外观相关属性;主题是皮肤、CSS、图像和 JavaScript 文件的集合，用于定义网站的特定外观。 在 “使用 ObjectDataSource 显示数据 ”教程中，我们创建了一个 DataWebControls 主题 (，该主题在文件夹) 中实现，该文件夹目前包含两个 App_Themes 皮肤文件 - GridView.skin 和 DetailsView.skin。 让我们添加第三个 Skin 文件，以指定 DataList 的预定义样式设置。

若要添加外观文件，请右键单击文件夹 App_Themes/DataWebControls ，选择“添加新项”，然后从列表中选择“外观文件”选项。 命名文件 DataList.skin。

显示“添加新项”窗口的屏幕截图，其中输入了 Default.skin 作为新的“外观”文件名。

图 9：创建名为 DataList.skin 的新外观文件 (单击以查看全尺寸图像)

对 DataList.skin 文件使用以下标记：

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

这些设置将相同的 CSS 类分配给与 GridView 和 DetailsView 控件一起使用的相应 DataList 属性。 此处DataWebControlStyle使用的 、、 AlternatingRowStyleRowStyle等的 CSS 类在 Styles.css 文件中定义，并在前面的教程中添加。

添加此外观文件后，DataList 的外观将在Designer (中更新，可能需要刷新Designer视图以查看新外观文件的效果;从“视图”菜单中选择“刷新) ”。 如图 10 所示，每个交替产品的背景色为浅粉色。

显示新的 Skin 文件如何在Designer更新 DataList 的外观的屏幕截图。

图 10：创建名为 DataList.skin 的新外观文件 (单击以查看全尺寸图像)

步骤 4：浏览 DataList 的其他模板

除了 ， ItemTemplateDataList 还支持其他六个可选模板：

  • HeaderTemplate 如果提供，则向输出添加标题行，并用于呈现此行
  • AlternatingItemTemplate 用于呈现交替项
  • SelectedItemTemplate用于呈现所选项;所选项是其索引对应于 DataList 的 属性的SelectedIndex项
  • EditItemTemplate 用于呈现正在编辑的项
  • SeparatorTemplate 如果提供，则在每个项之间添加分隔符，并用于呈现此分隔符
  • FooterTemplate - 如果提供，则向输出添加页脚行并用于呈现此行

指定 HeaderTemplate 或 FooterTemplate时，DataList 会向呈现的输出添加额外的页眉或页脚行。 与 GridView 的页眉和页脚行一样，DataList 中的页眉和页脚不会绑定到数据。 因此，或 FooterTemplate 中HeaderTemplate尝试访问绑定数据的任何数据绑定语法都将返回空白字符串。

注意

正如我们 在 GridView 的页脚中显示摘要信息 教程中看到的，虽然页眉和页脚行不支持数据绑定语法，但特定于数据的信息可以直接从 GridView 事件处理程序 RowDataBound 注入到这些行中。 此方法可用于从绑定到控件的数据中计算运行总计或其他信息，以及将该信息分配给页脚。 这一概念可以应用于 DataList 和 Repeater 控件;唯一的区别是，对于 DataList 和 Repeater，为 ItemDataBound 事件 (而不是事件 RowDataBound) 创建事件处理程序。

对于我们的示例，让我们将标题“产品信息”显示在 DataList 结果顶部的标题中 <h3> 。 为此，请添加 HeaderTemplate 具有相应标记的 。 在Designer中，可以通过单击 DataList 智能标记中的“编辑模板”链接，从下拉列表中选择“标题模板”，然后从样式下拉列表中选择“标题 3”选项后键入文本， (见图 11) 。

添加包含文本产品信息的 HeaderTemplate

图 11：添加 HeaderTemplate 带有“文本产品信息” (单击以查看全尺寸图像)

或者，可以通过在 标记中 <asp:DataList> 输入以下标记来以声明方式添加此标记：

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

为了在每个产品列表之间添加一些空间，让我们添加一个 SeparatorTemplate ，其中包含每个部分之间的一行。 水平规则标记 (<hr>) 添加这样的分隔线。 SeparatorTemplate创建 ，使其具有以下标记：

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

注意

HeaderTemplate与 和 FooterTemplates一样， SeparatorTemplate 不会绑定到数据源中的任何记录，因此无法直接访问绑定到 DataList 的数据源记录。

添加此内容后，通过浏览器查看页面时，应类似于图 12。 请注意标题行和每个产品列表之间的行。

DataList 包括标题行和每个产品列表之间的水平规则

图 12：DataList 包括每个产品列表之间的标题行和水平规则 (单击以查看全尺寸图像)

步骤 5：使用 Repeater 控件呈现特定标记

如果在访问图 12 中的 DataList 示例时从浏览器进行查看/源，您将看到 DataList 发出一个 HTML <table> ，其中包含表行 (<tr>) ，其中单个表单元格 (<td> 绑定到 DataList 的每个项) 。 事实上，此输出与使用单个 TemplateField 从 GridView 发出的输出相同。 正如我们在将来的教程中看到的那样，DataList 允许进一步自定义输出，使我们能够显示每个表行的多个数据源记录。

不过，如果不想发出 HTML <table>，该怎么办？ 若要完全控制数据 Web 控件生成的标记，必须使用 Repeater 控件。 与 DataList 一样，Repeater 是基于模板构造的。 但是，Repeater 仅提供以下五个模板：

  • HeaderTemplate 如果提供，请在项之前添加指定的标记
  • ItemTemplate 用于呈现项
  • AlternatingItemTemplate 如果提供，则用于呈现交替项
  • SeparatorTemplate 如果提供，请在每个项之间添加指定的标记
  • FooterTemplate - 如果提供，请在项后面添加指定的标记

在 ASP.NET 1.x 中，Repeater 控件通常用于显示其数据来自某个数据源的项目符号列表。 在这种情况下， HeaderTemplate 和 FooterTemplates 将分别包含开始标记和结束 <ul> 标记，而 ItemTemplate 将包含 <li> 具有数据绑定语法的元素。 此方法仍可在 ASP.NET 2.0 中使用，正如我们在 母版页和网站导航 教程中的两个示例中看到的那样：

  • 在母版页中 Site.master ，Repeater 用于显示顶级网站地图内容的项目符号列表， (基本报告、筛选报表、自定义格式设置等) ;另一个嵌套的 Repeater 用于显示顶级节的子节
  • 在 SectionLevelTutorialListing.ascx中，Repeater 用于显示当前站点地图节的子节的项目符号列表

注意

ASP.NET 2.0 引入了新的 BulletedList 控件，该控件可以绑定到数据源控件以显示简单的项目符号列表。 使用 BulletedList 控件，我们不需要指定任何与列表相关的 HTML;相反，我们只是指示要显示为每个列表项的文本的数据字段。

Repeater 充当捕获所有数据 Web 控件。 如果没有生成所需标记的现有控件，则可以使用 Repeater 控件。 为了说明如何使用 Repeater，让我们在步骤 2 中创建的产品信息数据列表上方显示类别列表。 具体而言，让我们将类别显示在单行 HTML <table> 中，每个类别在表中显示为一列。

为此，请先将“工具箱”中的 Repeater 控件拖到“产品信息数据列表”上方的Designer上。 与 DataList 一样，在定义其模板之前，Repeater 最初显示为灰色框。

将中继器添加到Designer

图 13：将中继器添加到Designer (单击以查看全尺寸图像)

Repeater 的智能标记中只有一个选项：选择数据源。 选择创建新的 ObjectDataSource 并将其配置为使用 CategoriesBLL 类方法 GetCategories 。

创建新的 ObjectDataSource

图 14：创建新的对象DataSource (单击以查看全尺寸图像)

将 ObjectDataSource 配置为使用 CategoriesBLL 类

图 15：将 ObjectDataSource 配置为使用 CategoriesBLL 类 (单击以查看全尺寸图像)

使用 GetCategories 方法检索有关所有类别的信息

图 16：使用 GetCategories 方法检索有关所有类别的信息 (单击以查看全尺寸图像)

与 DataList 不同，Visual Studio 不会在将 Repeater 绑定到数据源后自动为其创建 ItemTemplate。 此外，不能通过 Designer配置 Repeater 模板，并且必须以声明方式指定。

若要将类别显示为包含每个类别的列的单行 <table> ，需要 Repeater 发出如下所示的标记：

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td>由于文本是重复的部分，因此这将显示在 Repeater 的 ItemTemplate 中。 它之前显示的标记 （ <table><tr> - 将放置在 中， HeaderTemplate 而结束标记 - </tr></table> ） 将放置在 中 FooterTemplate。 若要输入这些模板设置，请单击左下角的“源”按钮并键入以下语法，转到 ASP.NET 页的声明性部分：

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

中继器发出由其模板指定的精确标记，不多，无所事事。 图 17 显示了通过浏览器查看时 Repeater 的输出。

在单独的列中Lists每个类别的 Single-Row HTML <表>

图 17：在单独的列中Lists每个类别 Single-Row HTML <table> (单击以查看全尺寸图像)

步骤 6：改进中继器的外观

由于 Repeater 精确发出由其模板指定的标记，因此，对于 Repeater 没有与样式相关的属性，这并不奇怪。 若要更改 Repeater 生成的内容的外观，必须手动将所需的 HTML 或 CSS 内容直接添加到 Repeater 的模板中。

在本示例中，让我们让类别列交替使用背景色，例如 DataList 中的交替行。 为此，我们需要通过 和 AlternatingItemTemplate 模板将 CSS 类分配给每个 Repeater 项AlternatingRowStyle，并将 ItemTemplate CSS 类分配给RowStyle每个交替的 Repeater 项，如下所示：

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

我们还将标题行添加到文本为“产品类别”的输出中。 由于我们不知道生成的 <table> 列将包含多少列，因此生成保证跨所有列的标题行的最简单方法是使用 两<table> 个 。 第一 <table> 个行将包含两行标题行和一行，该行将包含第二个单行 <table> ，其中包含系统中每个类别的列。 也就是说，我们想要发出以下标记：

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

以下 HeaderTemplate 和 FooterTemplate 将生成所需的标记：

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

图 18 显示了执行这些更改后的 Repeater。

类别列以背景色交替显示，并包含标题行

图 18：背景色中的类别列交替，包括标题行 (单击以查看全尺寸图像)

总结

虽然 GridView 控件可以轻松地显示、编辑、删除、排序和分页浏览数据，但外观非常方框和网格一样。 为了更好地控制外观，我们需要转向 DataList 或 Repeater 控件。 这两个控件都使用模板而不是 BoundFields、CheckBoxFields 等显示一组记录。

DataList 呈现为 HTML <table> ，默认情况下，该 HTML 在单个表行中显示每个数据源记录，就像具有单个 TemplateField 的 GridView 一样。 但是，正如我们在将来的教程中看到的那样，DataList 确实允许每个表行显示多个记录。 另一方面，Repeater 严格发出在其模板中指定的标记;它不添加任何其他标记，因此通常用于在除 (以外的 <table> HTML 元素（如项目符号列表) ）中显示数据。

虽然 DataList 和 Repeater 在呈现的输出中提供了更大的灵活性，但它们缺少 GridView 中的许多内置功能。 正如我们在即将推出的教程中介绍的，其中一些功能可以在不费太多精力的情况下重新插入，但请记住，使用 DataList 或 Repeater 代替 GridView 确实会限制你无需自己实现这些功能即可使用的功能。

编程愉快！

关于作者

Scott Mitchell 是七本 ASP/ASP.NET 书籍的作者， 4GuysFromRolla.com 的创始人，自 1998 年以来一直从事 Microsoft Web 技术工作。 Scott 担任独立顾问、培训师和作家。 他的最新书是 山姆斯在24小时内 ASP.NET 2.0自学。 可以在 上联系 mitchell@4GuysFromRolla.com他， 也可以通过他的博客联系到他，该博客可在 http://ScottOnWriting.NET中找到。

特别感谢

本教程系列由许多有用的审阅者审阅。 本教程的主要审阅者是雅科夫·埃利斯、Liz Shulok、Randy Schmidt 和 Stacy Park。 有兴趣查看我即将发布的 MSDN 文章？ 如果是，请在 处mitchell@4GuysFromRolla.com放置一行。

上一页下一页