How to: Add Repeater Web Server Controls to a Web Forms Page

  • Artikel

The Repeater Web server control is a data-bound container control that produces a list of individual items. You define the layout of individual items on a Web page using templates. When the page is run, the control repeats the layout for each item in the data source. You must complete several steps to add a Repeater Web server control to a Web forms page. The following procedure describes the minimum that you must do to create a working Repeater control.

To add a Repeater Web server control to a Web Forms page

  1. In Design view, from the Data tab of the Toolbox, drag a data source control onto the page, such as the SqlDataSource control or the ObjectDataSource control.

  2. Use the Configure Data Source wizard to define the connection and the query, or data-retrieval method, for the data source control. The Configure Data Source wizard is available to all data sources except the SiteMapDataSource control, which only needs the presence of a site map to populate the control. To open the Configure Data Source wizard, follow these steps:

    1. Right-click the data source control, and then click Show Smart Tag.

    2. In the data source tasks window, click Configure Data Source.

  3. From the Data tab of the Toolbox, drag a Repeater control onto the page.

  4. Right-click the Repeater control and then click Show Smart Tag.

  5. Under Choose Data Source list, click the name of the data source control that you created in steps 1 and 2.

    This sets the control's DataSourceID property. If the query includes a primary key, the controls' DataKeyField property is set as well.

  6. Click Source to switch to Source view.

    To define templates, you must be in Source view.

  7. Add an <ItemTemplate> element to the page as a child of the Repeater control. For syntax, see Repeater Web Server Control Declarative Syntax

    Note

    To render at run time, the Repeater control must contain an ItemTemplate that, in turn, contains data-binding expressions that are of the form <%# Eval("field name") %> where field name is the name of a field in the database. For background information about using templates, see ASP.NET Web Server Controls Templates.

  8. Add HTML and any other Web server controls or HTML server controls to the ItemTemplate.

  9. Optionally, define the following templates: AlternatingItemTemplate SeparatorTemplate, HeaderTemplate, FooterTemplate.

    The following code example shows how to use a Repeater control to display data in an HTML table. The table element begins in the HeaderTemplate and ends in the FooterTemplate. Within the body of the Repeater control, table cells are used to display columns from the data source. The AlternatingItemTemplate element is identical to the ItemTemplate item except that the background color of the table cells is different.

    <%@ 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>

See Also

Reference

Repeater Web Server Control Overview