学习 Web Forms
  • 爱学习公众号

    关注爱学习公众号

  • 扫码手机阅读更方便

推荐阅读
  • 动态控制 UpdatePanel 动画 (VB)

    ASP.NET AJAX 控件工具包中的动画控件不仅仅是一个控件,而是用于向控件添加动画的整个框架。 对于 UpdatePanel 的内容,存在大量依赖于动画框架的特殊扩展器: UpdatePanelAnimation。 它还可以与 UpdatePanel 触发器一起使用。

  • 使用分析功能优化 Web 应用程序性能

    本文内容 作者: Chris Menegay在此视频中,我们将了解 Visual Studio Team System 提供两种分析 Web 应用程序的方法:采样和检测。 规范在基础代码中注入标记,以便开发人员可以查看应用程序执行的完整详细信息,包括调用树和对

  • 基于 HTTP 标头中的信息缓存 ASP.NET 页面

    本文内容 作者: Chris 像素在此视频中,Chris 像素演示了如何根据页面的 HTTP 标头中的信息,在 ASP.NET 输出缓存中保留页面。 首先,检查可能的 HTTP 标头值。 然后,将创建一个示例页,然后将 OutputCache 指令与包含值 &

  • 分页和排序

    在这些教程中,您将向数据报表添加一些初始排序和分页功能。

  • ASP.NET 4.5 Web 窗体和 Visual Studio 2013 入门

    本系列教程将介绍使用 ASP.NET 4.5 构建 ASP.NET Web 窗体应用程序的基础知识,并为 Web Microsoft Visual Studio Express 2013。 此教程系列附带C#有源代码的 Visual Studio 2013 项目。

  • 打包过程故障排除

    本主题介绍如何通过使用 Microsoft 生成引擎(MSBuild)中的EnablePackageProcessLoggingAndAssert属性来收集有关打包过程的详细信息。 将EnablePackageProcessLoggingAndAssert属性设置为true时,MSBuild 将: 向生成日志添加有关打包过程的其他信息。 在某些情况下(例如,如果在打包列表中找到了重复的文件),

  • 通过 CascadingDropDown 使用自动回发 (C#)

    AJAX 控件工具包中的 CascadingDropDown 控件扩展了 DropDownList 控件,以便其中一个 DropDownList 中的更改加载另一个 DropDownList 中的关联值。 但是,在使用 CascadingDropDown 控件时,ASP。NET 的 DropDownList 控件的 AutoPostBack 功能不起作用,因为以异步方式将数据加载到列表中会生成(

  • Tailspin Spyworks

    如何使用 ASP.NET 4 中的新功能构建在线商店,包括购物、结帐和管理。

  • 指定母版页中的标题、元标记和其他 HTML 标头 (C#)

    查看用于在 "内容" 页中定义母版页中的 <head> 元素的不同技术。

  • Entity Framework 4.0 数据库入门 - 第 5 部分

    Contoso 大学示例 web 应用程序演示了如何使用实体框架4.0 和 Visual Studio 2010 创建 ASP.NET Web 窗体应用程序。 有关本教程系列的信息,请参阅系列教程中的第一个教程

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

作者: Scott Mitchell

下载示例应用下载 PDF

在前面的教程中,我们使用了 GridView 控件来显示数据。 从本教程开始,我们将介绍如何生成包含 DataList 和 Repeater 控件的常见报表模式,从用这些控件显示数据的基础知识开始。

简介

在过去28个教程中的所有示例中,如果我们需要显示数据源中的多个记录,请转到 GridView 控件。 GridView 为数据源中的每条记录呈现一行,并在列中显示记录的数据字段。 尽管 GridView 使它能够显示、分页、排序、编辑和删除数据,但其外观有点 boxy。 此外,为 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 和中继器来显示数据。 首先,在项目中创建一个名为 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 用户控件添加到 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。 首先打开 DataListRepeaterBasics 文件夹中的 "Basics.aspx" 页。 接下来,将 DataList 从工具箱拖到设计器上。 如图4所示,在指定 DataList 的模板之前,设计器会将其显示为灰色框。

将 DataList 从工具箱拖到设计器上

图 4:将 DataList 从工具箱拖到设计器上(单击以查看完全大小的图像

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

Opt 创建新的 ObjectDataSource

图 5:选择创建新的 ObjectDataSource (单击以查看完全大小的映像

将 ObjectDataSource 配置为使用 ProductsBLL 类

图 6:将 ObjectDataSource 配置为使用 ProductsBLL 类(单击以查看完全大小的映像

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

图 7:使用 GetProducts 方法检索有关所有产品的信息(单击以查看完全大小的图像

配置 ObjectDataSource 并通过其智能标记将其与 DataList 关联后,Visual Studio 将在 DataList 中自动创建一个 ItemTemplate,该 DataList 显示数据源返回的每个数据字段的名称和值(请参阅下面的标记)。 此默认 ItemTemplate s 外观与通过设计器将数据源绑定到 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>

Note

回忆一下,当通过 FormView 的智能标记将数据源绑定到 FormView 控件时,Visual Studio 创建了一个 ItemTemplateInsertItemTemplateEditItemTemplate 但对于 DataList,只会创建一个 ItemTemplate 这是因为 DataList 不具有由 FormView 提供的相同内置编辑和插入支持。 DataList 确实包含编辑和与删除相关的事件,并且可以使用一段代码添加编辑和删除支持,但对于 FormView,没有任何简单的现成支持。 在将来的教程中,我们将介绍如何在后面包含对 DataList 的编辑和删除支持。

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

若要进行这些更改,您可以从 DataList 的 "DataList" 智能标记使用设计器中的模板编辑功能,单击 "编辑模板" 链接,或者可以通过页的声明性语法手动修改模板。 如果在设计器中使用 "编辑模板" 选项,则生成的标记可能不会完全匹配以下标记,但当通过浏览器查看时,其外观应与图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>

Note

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

然而,在标签 Web 控件中保留两个优点。 首先,它提供了一种更简单的方法来基于数据设置数据的格式,如下一教程中所示。 其次,设计器中的 "编辑模板" 选项不会显示在某些 Web 控件之外显示的声明性数据绑定语法。 相反,编辑模板接口旨在简化静态标记和 Web 控件的使用,并假设任何数据绑定都通过 "编辑数据绑定" 对话框完成,该对话框可从 Web 控件智能标记进行访问。

因此,在使用 DataList (提供通过设计器编辑模板的选项)时,我更喜欢使用标签 Web 控件,以便通过编辑模板界面访问内容。 我们很快就会看到,Repeater 要求从 "源" 视图编辑模板的内容。 因此,在手工编写 Repeater 模板时,我通常会忽略标签 Web 控件,除非我知道我需要基于编程逻辑来设置数据绑定文本的外观。

使用 DataList s ItemTemplate 呈现每个产品输出

图 8:使用 DataList ItemTemplate 呈现每个产品输出(单击以查看完全大小的映像

步骤3:提高 DataList 的外观

与 GridView 类似,DataList 提供了许多与样式相关的属性,例如 FontForeColorBackColorCssClassItemStyleAlternatingItemStyleSelectedItemStyle等。 使用 GridView 和 DetailsView 控制时,我们在 DataWebControls 主题中创建了外观文件,该主题预定义了这两个控件的 CssClass 属性,并为其多个子属性(RowStyleHeaderStyle等)预定义了 CssClass 属性。 让,为 DataList 执行相同操作。

使用 ObjectDataSource 显示数据教程中所述,外观文件为 Web 控件指定了默认的与外观相关的属性。主题是外观、CSS、图像和 JavaScript 文件的集合,用于定义网站的特定外观和外观。 使用 ObjectDataSource 显示数据教程中,我们创建了一个 DataWebControls 主题(作为 App_Themes 文件夹内的文件夹实现),当前有两个外观文件-GridView.skinDetailsView.skin 让我们添加第三个外观文件来指定 DataList 的预定义样式设置。

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

创建一个名为 DataList 的新外观文件

图 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 类分配给相应的 DataList 属性,就像在 GridView 和 DetailsView 控件中使用一样。 此处使用的 CSS 类 DataWebControlStyleAlternatingRowStyleRowStyle等,在 Styles.css 文件中定义,并已添加到前面的教程中。

添加此外观文件后,会在设计器中更新 DataList 的外观(您可能需要刷新 "设计器" 视图以查看新外观文件的效果; 从 "查看" 菜单中,选择 "刷新")。 如图10所示,每个交替产品都有浅粉色背景色。

创建一个名为 DataList 的新外观文件

图 10:创建名为 DataList.skin 的新外观文件(单击以查看完全大小的映像

步骤4:浏览 DataList 其他模板

除了 ItemTemplate之外,DataList 还支持六个其他可选模板:

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

指定 HeaderTemplateFooterTemplate时,DataList 会向呈现的输出添加一个附加的页眉或页脚行。 与 GridView 的表头和表尾行一样,DataList 中的标头和表尾不会绑定到数据。 因此,HeaderTemplateFooterTemplate 中尝试访问绑定数据的任何数据绑定语法都将返回一个空字符串。

Note

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

对于我们的示例,让我们将标题产品信息显示在 DataList 的顶部,结果为 <h3> 标题。 若要实现此目的,请使用相应的标记添加 HeaderTemplate 从设计器中,可以通过以下方式完成此操作:单击 DataList 的 "编辑模板" 链接,从下拉列表中选择 "标题模板",然后在 "样式" 下拉列表中选择 "标题 3" 选项后输入文本(参见图11)。

添加 System.windows.controls.headereditemscontrol.headertemplate 和文本产品信息

图 11:添加带有文本产品信息的 HeaderTemplate单击查看完全大小的图像

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

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

若要在每个产品列表之间添加一些空间,请在每个部分之间添加一个包含一条线的 SeparatorTemplate 水平规则标记(<hr>)将添加这样的分隔线。 创建 SeparatorTemplate,使其具有以下标记:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Note

HeaderTemplateFooterTemplates一样,SeparatorTemplate 不会绑定到数据源中的任何记录,因此不能直接访问绑定到 DataList 的数据源记录。

完成此添加后,在浏览器中查看页面时,它应类似于图12。 请注意标题行和每个产品列表之间的行。

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

图 12: DataList 包含标题行和每个产品列表之间的水平标尺(单击以查看完全大小的图像

步骤5:利用 Repeater 控件呈现特定标记

当访问图12中的 DataList 示例时,如果从浏览器中执行视图/源,则会看到,DataList 发出一个 HTML <table>,其中包含一个表行(<tr>),其中每个绑定到 DataList 的项都有一个表单元(<td>)。 事实上,这种输出与使用单个 TemplateField 从 GridView 发出的内容完全相同。 我们将在将来的教程中看到,DataList 允许对输出进行进一步自定义,使我们能够显示每个表行的多个数据源记录。

如果你不想发出 HTML <table>怎么办? 若要全面控制数据 Web 控件生成的标记,必须使用 Repeater 控件。 就像 DataList 一样,Repeater 是根据模板构建的。 但中继器仅提供以下五个模板:

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

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

  • Site.master 的母版页中,使用中继器显示顶级网站图内容的项目符号列表(基本报告、筛选报告、自定义格式等);另一种是使用嵌套式中继器显示顶级部分的子部分
  • SectionLevelTutorialListing.ascx中,使用中继器显示当前站点地图部分的子节的项目符号列表。

Note

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

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

若要实现此目的,请首先将 "Repeater" 控件从工具箱拖动到设计器上的 "产品信息" DataList 上方。 对于 DataList,Repeater 最初显示为灰色框,直到定义了其模板。

将中继器添加到设计器

图 13:向设计器添加中继器(单击以查看完全大小的映像

"中继器" 智能标记中只有一个选项:选择 "数据源"。 选择创建新的 ObjectDataSource,并将其配置为使用 CategoriesBLLGetCategories 方法。

创建新的 ObjectDataSource

图 14:创建新的 ObjectDataSource (单击以查看完全大小的映像

将 ObjectDataSource 配置为使用 CategoriesBLL 类

图 15:将 ObjectDataSource 配置为使用 CategoriesBLL 类(单击以查看完全大小的映像

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

图 16:使用 GetCategories 方法检索有关所有类别的信息(单击以查看完全大小的图像

与 DataList 不同,Visual Studio 不会在将其绑定到数据源后自动为中继器创建 ItemTemplate。 此外,无法通过设计器配置 Repeater 的模板,必须以声明方式指定。

若要将类别显示为具有每个类别的列的单行 <table>,需要中继器发出类似于下面的标记:

<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显示了在浏览器中查看时的中继器输出。

单行 HTML <表> 在单独的列中列出每个类别

图 17:单行 HTML <table> 列出了单独列中的每个类别(单击以查看完全大小的图像

步骤6:改善中继器的外观

由于中继器会确切地发出其模板所指定的标记,因此不会出现用于 Repeater 的无样式相关属性。 若要更改中继器生成的内容的外观,必须手动将所需的 HTML 或 CSS 内容直接添加到 Repeater 的模板。

对于我们的示例,让 s 具有类别列可选背景色,如 DataList 中的交替行。 为实现此目的,我们需要通过 ItemTemplateAlternatingItemTemplate 模板将 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>
   <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>

以下 HeaderTemplateFooterTemplate 会产生所需的标记:

<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显示了这些更改后的中继器。

以背景色替代的类别列,并且包括标题行

图 18:类别列以背景色替换并包括标题行(单击以查看完全大小的图像

摘要

尽管 GridView 控件可以轻松地对数据进行显示、编辑、删除、排序和分页,但其外观非常 boxy,类似于网格。 为了更好地控制外观,需要转到 DataList 或 Repeater 控件。 这两个控件都使用模板显示一组记录,而不是使用 BoundFields、CheckBoxFields 等。

DataList 呈现为 HTML <table>,默认情况下,在单个表行中显示每个数据源记录,就像使用单个 TemplateField 的 GridView 一样。 但我们将在以后的教程中看到,DataList 允许每个表行显示多条记录。 另一方面,中继器会严格发出其模板中指定的标记;它不会添加任何其他标记,因此通常用于在 <table> (如项目符号列表)中的 HTML 元素中显示数据。

尽管 DataList 和中继器在呈现的输出中提供了更大的灵活性,但它们缺乏了在 GridView 中发现的许多内置功能。 我们将在即将推出的教程中进行探讨,其中的一些功能可以无需太多的工作就重新插入,但请记住,使用 DataList 或中继器代替 GridView 会限制你可以使用的功能,而无需实现这些功能。提醒.

很高兴编程!

关于作者

Scott Mitchell,创始人的4GuysFromRolla.com,已在使用 Microsoft Web 技术,自1998开始。 Scott 的工作方式是独立的顾问、培训师和撰稿人。 他的最新书籍是,在24小时内,sam ASP.NET 2.0 可以mitchell@4GuysFromRolla.com访问。 或通过他的博客,可以在http://ScottOnWriting.NET找到。

特别感谢

此教程系列由许多有用的审阅者查看。 本教程的主管评审者是 Yaakov Ellis、Liz Shulok、Randy Schmidt 和 Stacy。 想要查看我即将发布的 MSDN 文章? 如果是这样,请在mitchell@4GuysFromRolla.com放置一行

关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图