通过

如何：向 Web 窗体页添加 Repeater Web 服务器控件

  • 项目

更新：2007 年 11 月

Repeater Web 服务器控件是一个数据绑定容器控件，用于生成各个项的列表。您使用模板定义网页上各个项的布局。当该页运行时，该控件为数据源中的每个项重复该布局。若要向 Web 窗体页添加 Repeater Web 服务器控件，必须执行若干步操作。下面的过程描述创建一个有效的 Repeater 控件必须执行的最少步骤。

向 Web 窗体页添加 Repeater Web 服务器控件

  1. 在“设计”视图中，从工具箱的**“数据”**选项卡，将数据源控件（如 SqlDataSource 控件或 ObjectDataSource 控件）拖动到页面上。

  2. 使用**“配置数据源”向导为数据源控件定义连接和查询或数据检索方法。“配置数据源”向导可用于除 SiteMapDataSource 控件之外的所有数据源。只要存在“站点地图”，便可以填充该控件。若要打开“配置数据源”**向导，请按照以下步骤操作：

    1. 右击数据源控件，然后单击**“显示智能标记”**。

    2. 在“数据源任务”窗口中，单击**“配置数据源”**。

  3. 从工具箱的**“数据”**选项卡中，将 Repeater 控件拖动到页面上。

  4. 右击 Repeater 控件，然后单击**“显示智能标记”**。

  5. 在**“选择数据源”**列表下，单击在步骤 1 和步骤 2 中创建的数据源控件的名称。

    此操作将设置控件的 DataSourceID 属性。如果查询包含主键，则同时设置控件的 DataKeyField 属性。

  6. 单击**“源”**切换到“源”视图。

    必须在“源”视图中才能定义模板。

  7. 将 <ItemTemplate> 元素作为 Repeater 控件的子级添加到页。有关语法，请参见 Repeater Web 服务器控件声明性语法

    x4s0xktt.alert_note(zh-cn,VS.90).gif说明：

    若要在运行时呈现，则 Repeater 控件必须包含 ItemTemplate，而后者又必须包含 <%# Eval("字段名") %> 格式的数据绑定表达式，其中字段名是数据库中的字段的名称。有关使用模板的背景信息，请参见 ASP.NET Web 服务器控件模板。

  8. 向 ItemTemplate 添加 HTML 及任何其他 Web 服务器控件或 HTML 服务器控件。

  9. 还可以选择定义以下模板：AlternatingItemTemplateSeparatorTemplate、HeaderTemplate、FooterTemplate。

    下面的代码示例显示如何使用 Repeater 控件在 HTML 表中显示数据。table 元素自 HeaderTemplate 开始，以 FooterTemplate 结束。在 Repeater 控件的控件体内，表单元格用于显示数据源中的列。除表单元格的背景颜色不同外，AlternatingItemTemplate 元素与 ItemTemplate 项完全相同。

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label runat="server" ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label runat="server" ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1" runat="server" SelectCommand="SELECT [CategoryID], [CategoryName], 
            [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label1" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label2" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label runat="server" ID="Label3" Text='<%# Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label runat="server" ID="Label4" Text='<%# Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ID="SqlDataSource1" runat="server" SelectCommand="SELECT [CategoryID], [CategoryName], 
              [Description] FROM [Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>

请参见

参考

Repeater Web 服务器控件概述