How to: Add a Repeater Control to a Web Forms Page

  • Article

The Repeater Web server control is a container control that allows you to create custom lists out of any data that is available to the page. Adding a Repeater Web server control to a page requires several steps. The following procedure describes the minimum that you must do to create a working Repeater control.

To add a Repeater Web server control to an ASP.NET page

  1. Add a data source control to the page, such as a SqlDataSource or ObjectDataSource control. For details, see Data Source Web Server Controls.

  2. Configure the data source control to perform a query.

    If you are using a SqlDataSource or AccessDataSource control, specify connection information and an SQL query for the SelectCommand property. If you are using a ObjectDataSource control, configure its SelectMethod property.

  3. Add an <asp:Repeater> element to the page. For syntax, see Repeater Web Server Control Declarative Syntax.

  4. Set the Repeater control's DataSourceID property to the ID of the data source control.

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

    The Repeater control must contain at least an ItemTemplate that in turn contains data-bound controls in order for the control to render at run time.

    NoteNote

    For background information about using templates, see ASP.NET Web Server Controls Templates.

  6. Add HTML markup and Web server controls or HTML server controls to the ItemTemplate.

  7. Bind the child controls to data from the query using the Eval data-binding function, as shown in the following example.

    <ItemTemplate>
  <tr>
    <td bgcolor="#CCFFCC">
      <asp:Label runat="server" ID="Label1" 
                 Text='<%# Eval("CategoryName") %>' />
    </td>
    <td bgcolor="#CCFFCC">
      <asp:Label runat="server" ID="Label2" 
                 Text='<%# Eval("Description") %>' />
    </td>
  </tr>
</ItemTemplate>

    For information on data-binding functions, see Data Binding Expression Syntax.

  8. Optionally, define an AlternatingItemTemplate, SeparatorTemplate, HeaderTemplate, or FooterTemplate.

Example

The following 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 for the table cells is different to create a banded effect.

<%@ Page Language="VB" %>
<html>
<head 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 bgcolor="#CCFFCC">
                <asp:Label runat="server" ID="Label1" 
                    text='<%# Eval("CategoryName") %>' />
              </td>
              <td bgcolor="#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#" %>
<html>
<head 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 bgcolor="#CCFFCC">
                <asp:Label runat="server" ID="Label1" 
                    text='<%# Eval("CategoryName") %>' />
              </td>
              <td bgcolor="#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>

The example requires a connection string that can be used to connect to the sample Northwind database in Microsoft SQL Server. The connection string must be defined in the <connectionStrings> element of the application's Web.config file. The <connectionStrings> section might look like the following example:

<configuration>
  <connectionStrings>
    <add 
      name="NorthwindConnectionString" 
      connectionString="Data Source=localhost;Integrated Security=SSPI;Initial Catalog=Northwind;" />
  </connectionStrings>

  <system.web>
      <!-- Other configuration settings -->s
  </system.web>
</configuration>

See Also

Reference

Repeater Web Server Control Overview