使用 DataList 与 Repeater 控件显示数据29

简介

在前面28 个教程中的所有例子中，如果我们需要显示来自一个数据库中的多个记录，我们可以使用 GridView 控件。 GridView 将数据源的每条记录呈现一行，以列显示记录的数据字段当 GridView 迅速的对数据进行显示、翻阅、分类、编辑以及删除时，其外观为盒状。除此之外，决定 Gridview 结构的标记是固定的—— 它为每个记录提供一个带有表格列 ( <tr> ) 的 HTML<table> ，并且为每个字段提供一个表格单元 ( <td> )。

在显示多个记录时，为了在外观和所列出的版式中提供更大的用户定制程度，ASP.NET2.0 提供了 DataList 和 Repeater 控件(ASP.NET 的 1x 版本中也提供这些功能) 。 DataList 和 Repeater 控件使用模板来显示内容，而不是 BoundFields 、 CheckBoxFields 、 ButttonFields 等来显示。和 GridView 一样， DataList 显示为一个 HTML<table> ，但是允许每个表格列显示多个数据源记录。另一方面， Repeater 控件除了您已经明确指定的标记文字外，不会再输出其它的标记文字，所以在您需要精确控制标记文字输出时它是一个非常理想的候选控件。

在接下来的十几个教程中，我们将就如何使用 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

图1 ：创建一个 DataListRepeaterBasics 文件夹，并且添加 Tutorial ASP.NET 页面

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

图2 ：向 Default.aspx 添加 SectionLevelTutorialListing.ascx 用户控件

为了使标有圆点的列表显示我们创建的Datalist 和 Repeater 教程，我们需要将他们添加到站点地图中。打开 Web 站点地图文件，将以下标记添加至“添加自定义按钮”站点地图节点标记之后。

<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&apos;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>

图3 ：更新站点地图以使其包含新的 ASP.NET 页面。

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

与 FormView 控件相似，Datalist 控件的呈现依赖于模板而不是Boundfields 、CheckBoxFields 等。与 FromeView 不同， Datalist 被设计成可以显示一组记录而不是单一的数据。让我们从绑定在一个 Datalist 上的产品信息开始本篇教程首先打开 DatalistRepeaterBasics 文件夹中的 Basics.aspx 页面。接下来，从工具箱中将一个 Datalist 拖至设计器。如图 4 所示，在未指定 Datalist 的模板之前，设计器将其显示为一个灰色框。

图4 ：从工具栏中将 Datalist 拖至设计器

从 Datalist 的智能标记中，添加一个新的 ObjectDataSource ，并将其配置为使用 ProductsBll 类的 Getproducts 方法。由于我们在本教程中创建一个只读的 Datalist ，在向导的 INSERT 、 UPDATE 和 DELETE 选项卡中，将下拉菜单设置为 (None) 。

图5 ：选择创建一个新的 ObjectDataSource

图6 ：配置 ObjectDataSource 使用 ProductsBLL 类

图7 ：使用 GetProducts 方法检索所有与产品有关的信息

在设置完ObjectDataSource 并通过其智能标记与 DataList 建立关联后，Visual Studio 将自动在 DataList 中创建一个项目模板，显示数据源返回的每个数据字段的名称和值。这一默认项目模板与通在过设计器将数据源与 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 会创建一个项目模板、InsertItem 模板以及 EditItem 模板。然而通过 DataList ，仅仅会创建一个项目模板这是因为 DataList 不具有相同的、由 FormView 提供的内置编辑与插入支持。 DataList 不包括与编辑、删除有关的事件，编辑与删除支持可以通过一些代码进行添加，但是不像 FormView 支持那样简便。在以后的教程中，我们将就如何使用 DataList 将编辑和删除支持囊括在内进行论述。

让我们花一些时间，对这一模板的外观进行改进。我们不显示所有的数据字段，而是仅显示产品名称、供应商、类别、每单位数量以及单位价格。除此之外，我们在一个 <h4> 标题中显示名称，并且使用标题下的 <> 显示其余的字段。

如果想进行这些改变，您可以使用设计器中的模板编辑特征—— 在 DataList 的智能标记中单击 “Edmit Templates ” 链接—— 或者您可以通过页面的声明式语句，对模板进行手动修改。如果您使用设计器中的“编辑模板”选项，所获得的标记也许会和以下的标记不尽一致，但是如果通过浏览器进行浏览，就会发现它与图 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 标签控件，这些控件的文本属性被赋予了数据绑定语句的值。此外，我们还可以将所有的标签忽略，只键入数据绑定语句。即：不使用 <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> ，而是使用声明式语句 <%# Eval("CategoryName") %> 。

Web 标签控件中余下的部分有两个优点。第一，正如我们会在接下来的教程中所看到的那样，它可以以数据为基础，为数据的格式化提供一个更为容易的方式。第二，设计器中的“编辑模板”选项不会显示出现在某些 Web 控件之外的声明式数据绑定语句。与此相反，“编辑模板”界面经过设计，可以便利的与静态标记以及 Web 控件一同工作，并且假定，任何数据绑定都将通过“编辑数据绑定”对话框进行，这一对话框可以通过 Web 控件的智能标记进行访问。

因此，当与通过设计器提供模板编辑选项的 Datalist 一同工作时，我更喜欢使用 Web标签控件，这样内容就可以通过“编辑模板”界面进行访问。正如我们一会将要看到的那样， Repeater 要求模板内容必须从“资源”视图中进行编辑。因此，当制作 Repeater 模板时，我经常会忽略 Web 标签控件，除非我知道我需要对基于程序逻辑的数据绑定文本的外观进行格式化。

图8 ：每个产品的输出都使用 Datalist 项目模板进行呈现

步骤3 ：改进 Datalist 的外观

和 GridView 相同，Datalist 也提供而多种与风格相关的属性，比如 Font 、ForeColor 、BackColor 、CssClass 、ItemStyle 、AlternatingItemStyle 、SelectedItemStyle 等等。当使用 GridView 和 DetailsView 控件时，我们在 DataWeControls Theme 中创建了 Skin 文件， DataWeControlsTheme 可以为这两种控件预先定义 CssClass 属性，并且为两种控件的几个子属性（ RowStyle 、 HeaderStyle 等等）预先定义 CssClass 属性。我们同样为 Datalist 进行这一步骤。

正如在 使用 ObjectDataSource 显示数据 教程中所讨论的那样，一个 Skin 文件会为 Web 控件指定与默认外观相关的属性。一个主题是 Skin 、 CSS 、图片以及 JavaScript 文件的集合，为网站定义特定的外观与感觉。在使用 ObjectDataSource 显示数据 教程部分中，我们创建了一个 DataWebControls 主题（该主题作为 App_Themes 文件夹内的文件夹来执行）。目前，该主题拥有两个 Skin 文件 - GridView.skin 和 DetailsView.skin 。让我们添加第三个 Skin 文件，为 Datalist 指定预先定义的风格设置。

如果想添加一个 Skin 文件，正确单击 App_Themes/DataWebControls 文件夹，选择“ 添加一个新项目”，并且从列表中选择 Skin File 选项。命名文件为 DataList.skin 。

图9 ：创建一个新的名为 DataList.skin 的 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>

这些设置为适当的 Datalist 属性指定了相同的 CSS 类，而这些属性在 GridView 和 DetailsView 控件中也曾使用过。在这里使用的 CSS 类 — DataWebControlStyle 、 AlternatingRowStyle 、 RowStyle 等等 — 都已经在 Styles.css 文件中定义，并且在前面的教程中已经添加。

随着这一 Skin 文件的添加，DataList 的外观也同时在设计器中被更新（您需要刷新设计器视图，以查看新的 Skin 文件的效果；在视图菜单中选择“刷新” 。）如图 10 所示，每一个可选产品都用亮粉色背景标出。

图10 ：创建一个新的名为 DataList.skin 的 Skin 文件

步骤4 ：探究 DataList 的其他模板

除了项目模板之外，DataList 还支持其他六个可选模板 ：

  • HeaderTemplate — 如若提供，在输出中添加一个标题行，此模板用于 呈现 该行。
  • AlternatingItemTemplate — 用于呈现可选项。
  • SelectedItemTemplate — 用于呈现已选项；已选项指的是那些索引与 DataList 的 Selectdindex 属性相对应的项目
  • EditItemTemplate — 用于呈现正在进行编辑的项目。
  • SeparatorTemplate — 如果提供，在每个项目之间添加一个分隔符，此模板用于呈现该分隔符。
  • FooterTemplate – 如若提供，在输出中添加脚注行，该模板用于呈现该行。

当指定 HeaderTemplate 或 FooterTemplate 模板时，DataList 会在已呈现的输出中添加一个额外的标题或脚注行。和在 GridView 标题和脚注行中的情况相同，DataList 中的标题和脚注并未与数据绑定。 因此，在 HeaderTemplate 或 FooterTemplate 模板中的任何试图访问绑定数据的数据绑定语句，都将返回空白字符串。

注意：正如我们 在 GridView 的脚注中显示小结信息 教程中看到的那样，虽然标题与脚注行并不支持数据绑定语句，但是数据专用信息依然可以从 GridView 的 RowDataBound Event Handler 中直接加入这些行中。这一技术可以用于从绑定至控件的数据中计算运行总量或其他信息，并且可以将这些信息分配给脚注。与此相同的理念也可以应用到 DataList 和 Repeater 控件中；唯一不同的是，在 DataList 和 Repeater 控件中，会为 ItemDataBound 事件创建一个 Event Handler（而不是为 RowDataBound 事件创建 Event Handler）。

对于我们的例子，我们可以将“产品信息” 题目以 <h3> 标题的形式显示在 DataList 结果的上方。为了实现这一目的，使用适当的标记添加一个 HeaderTemplate 模板。在设计器中，单击位于 Datalist 智能标记中的 Edit Templates 模板链接，从下拉菜单中选择 Header Template 模板，再从样式下拉列表中选择标题 3 后，在文本中键入内容(见图 11 )，这样我们就可以达到上述目的。

图11：同文本 “ 产品信息 ” 一起添加一个 HeaderTemplate 模板

或者，通过在<asp:DataList> 标签中输入如下标记，您可以采用声明的方式将其添加。

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

为了在每个产品列表之间添加些许空间，我们可以添加一个在每部分之间都包含直线的 SeparatorTemplate 模板。水平分割线标签 (<hr>) ，添加一个这样的分割线。创建 SeparatorTemplate 模板，这样它就会包含如下标记：

<SeparatorTemplate> <hr /> </SeparatorTemplate>

注意：和 HeaderTemplate 以及 FooterTemplates 模板一样，SeparatorTemplate 模板也未与任何来自数据源的记录进行绑定，因此不能直接访问与 Datalist 进行绑定的数据源记录。

在完成这一添加后，当通过浏览器浏览页面时，页面应该与图12 相似。注意标题行与每个产品列表之间的线。

图12 ：DataList 包括一个页眉行和一个位于每个产品列表之间的水平分割线。

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

当从图 12 中查看 Datalist 实例时，如果在浏览器中执行 View/Source 操作，就会看到，Datalist 会发出一个 HTML <table> ，它包含一个带有单一表格单元(<td>) 的表格行(<tr>) ，对应每一个绑定至 DataList 的项目。这一输出，实际上与一个带有单一 TemplateFeild 的 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 用于以项目符号列表显示顶层站点地图内容(Basic Reporting 、Filtering Reports 、Customized Formatting 等) ；另外， 嵌套 Repeater 用于显示顶层部分中的子部分。
  • 在 SectionLevelTutorialListing.ascx 部分，Repeater 用于以项目符号列表显示当前站点地图部分中的子部分。

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

Repeater 作为一个“选择全部” 的 Web 数据控件。如果没有可以生成标记的现有控件，那么在这种情况下就可以使用 Repeater 控件。为了描述Repeater 的用法，我们将类别列表显示在步骤2 中所创建的产品信息 Datalist 之上。尤其注意的一点是，我们将类别在一个单一行的 HTML <table> 中显示，并且使得每一个类别作为表格中的一栏来显示。

为了实现这一点，首先将 Repeater 控件从工具箱中拖至位于产品信息 Datalist 之上的设计器中。和在 DataList 中的情况相同，Repeater 起初将会显示为灰色框，直到其模板已完成定义。

图13：将一个 Repeater 添加至设计器

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

图14 ：创建一个新的 ObjectDataSource

图15：配置 ObjectDataSource 使用 CategoriesBLL 类

图16：使用 GetCategories 方法检索关于所有类别的信息

和 DataList 不同，在将 Visual Studio 绑定至一个数据源后，它不会自动为 Repeater 创建一个 ItemTemplate 模板。除此之外，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 模板内。要输入这些模板设置，可通过单击左下角的 Source 按钮，进入 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>

Repeater 会精确的输出由其模板指定的标记，不会多也不会少。图 17 显示了通过浏览器进行浏览时的 Repeater 输出。

图17 ：一行 HTML <table> 中以单独的列来列出了每个类别

步骤6 ：改进 Repeater 的外观

因为 Repeater 可以精确的输出由其模板指定的标记，所以 Repeater 没有与风格相关的属性，就不足为奇了。为了改善由 Repeater 生成的内容的外观，我们必须手动将所需的 HTML 或者 CSS 内容直接添加至 Repeater 模板。

在我们的实例中，我们将类别栏的背景色改变，就像在 DataList 中改变行的做法一样。为了实现上述步骤，我们需要通过 ItemTemplate 模板和 AlternatingItemTemplate 模板，为 Repeater 项目分配 RowStyle CSS 类并为每个可选的 Repeater 项目分配 AlternatingRowStyle CSS 类，如下所示：

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

我们同时使用“产品类别” 文本，为输出添加页眉行。因为我们并不知道最终的 <table> 由多少个列组成，所以，生成可以包括所有列的页眉行最简单的方法，就是使用两个 <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" style="border: solid 1px black;"> 
            <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> ，即，在默认情况下，会在单一表格行中显示每个数据源记录，就像一个具有单一 TemplateField 的 GridView 一样。正如我们在以后的教程中会看到的那样， DataList 确实允许每个表格行中显示多个记录。另一方面， Repeater 会严格的输出在其模板中指定的标记；它不会添加任何额外的标记，因此，被普遍用于在 HTML 元素中而不是在 <table> （比如在项目符号列表中）中显示数据。

虽然 DataList 和 Repeater 在其呈现输出方面灵活性更强，但是他们缺少GridView 所具备的许多嵌入式特征。正如我们在接下来的教程中所详细介绍的那样，某些特征可以毫不费力的利用，但是请不要忘记，使用 DataList 或 Repeater 代替 GridView ，确实会对那些不必您亲自执行就可以使用的特征造成限制。

快乐编程！

posted @ 2016-05-01 23:06  迅捷之风  阅读(659)  评论(0)  编辑  收藏  举报