Share via

Repeater Web Server Control Overview

  • Article

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 by using templates. When the page runs, the control repeats the layout for each item in the data source.

This topic contains:

  • Background

  • Code Examples

  • Class Reference

Background

The Repeater Web server control is a container control that enables you to create custom lists out of any data that is available to the page. The Repeater control does not have a built-in rendering of its own, which means that you must provide the layout for the Repeater control by creating templates. When the page runs, the Repeater control loops through the records in the data source and renders an item for each record.

Because the Repeater control has no default look, you can use it to create many kinds of lists, including the following:

  • A table layout

  • A comma-delimited list (for example, a, b, c, d, and so on)

  • An XML formatted list

Using Templates with the Repeater Control

To use the Repeater control, you create templates that define the layout of the control's content. Templates can contain any combination of markup and controls. If no templates are defined, or if none of the templates contain elements, the control does not appear on the page when the application is run.

The following table describes the templates that are supported by the Repeater control.

Template property

Description

ItemTemplate

Contains the HTML elements and controls to render once for each data item in the data source.

AlternatingItemTemplate

Contains the HTML elements and controls to render once for every other data item in the data source. Typically, this template is used to create a different look for the alternating items, such as a different background color than the color that is specified in the ItemTemplate.

HeaderTemplate and FooterTemplate

Contains the text and controls to render at the beginning and end of the list, respectively.

SeparatorTemplate

Contains the elements to render between each item. A typical example might be a line (using an hr element).

For more information, see ASP.NET Web Server Controls Templates.

Binding Data to the Repeater Control

The Repeater control must be bound to a data source. The most common data source is a data source control, such as a SqlDataSource or ObjectDataSource control. Alternatively, you can bind a Repeater control to any class that implements the IEnumerable interface, which includes the ADO.NET datasets (DataSet class), data readers (SqlDataReader or OleDbDataReader classes), or most collections.

When binding data, you specify a data source for the Repeater control as a whole. When you add controls to the Repeater control — for example, when you add Label or TextBox controls in a template — you use data-binding syntax to bind the individual control to a field of the items returned by the data source. The following example shows an ItemTemplate that contains a data-bound Label control.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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" 
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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>

Note

You cannot bind controls in the header, footer, and separator templates using the Eval data binding function. If you have controls in these templates, you can simply define their properties statically.

For an overview of data binding in Web server controls, see Walkthrough: Basic Data Access Using the SqlDataSource Control in Web Pages and How to: Add Repeater Web Server Controls to a Web Forms Page.

Events Supported by the Repeater Control

The Repeater control supports several events. One of them, the ItemCreated event, gives you a way to customize the item-creation process at run time. The ItemDataBound event also gives you the ability to customize the Repeater control, but after the data is available for inspection. For example, if you were using the Repeater control to display a to-do list, you could display overdue items in red text, completed items in black text, and other tasks in green text. Either event can be used to override formatting from the template definition.

The ItemCommand event is raised in response to button clicks in individual items. This event is designed to allow you to embed a Button, LinkButton, or ImageButton Web server control in an item template and then be notified when the button is clicked. When a user clicks the button, the event is sent to the button's container — the Repeater control. The most common uses for the ItemCommand event are to program update and delete behaviors to the Repeater control. Since every button click raises the same ItemCommand event, you can determine which button was clicked by setting each button's CommandName property to a unique string value. The CommandSource property of the RepeaterCommandEventArgs parameter contains the CommandName property of the button that was clicked.

Back to top

Code Examples

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

Back to top

Class Reference

The following table lists the key classes that relate to the Repeater control.

Member

Description

Repeater

The main class for the control.

Back to top

See Also

Concepts

Data-Bound Web Server Controls