Repeater Web Server Control Declarative Syntax

Article
11/03/2006

Creates a data-bound list control that allows custom layout by repeating a specified template for each item displayed in the list.

<asp:Repeater
    DataMember="string"
    DataSource="string"
    DataSourceID="string"
    EnableTheming="True|False"
    EnableViewState="True|False"
    ID="string"
    OnDataBinding="DataBinding event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnItemCommand="ItemCommand event handler"
    OnItemCreated="ItemCreated event handler"
    OnItemDataBound="ItemDataBound event handler"
    OnLoad="Load event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    runat="server"
    SkinID="string"
    Visible="True|False"
>
        <AlternatingItemTemplate>
            <!-- child controls -->
        </AlternatingItemTemplate>
        <FooterTemplate>
            <!-- child controls -->
        </FooterTemplate>
        <HeaderTemplate>
            <!-- child controls -->
        </HeaderTemplate>
        <ItemTemplate>
            <!-- child controls -->
        </ItemTemplate>
        <SeparatorTemplate>
            <!-- child controls -->
        </SeparatorTemplate>
</asp:Repeater>

Remarks

Use the Repeater control to create a basic templated data-bound list. The Repeater control has no built-in layout or styles; you must explicitly declare all HTML layout, formatting, and style tags within the control's templates.

The Repeater control is different from other data list controls in that it allows you to place HTML fragments in its templates. This allows you to create a complex HTML structure, such as a table. For example, to create a list within an HTML table, start the table by placing the <table> tag in the HeaderTemplate. Next, create the rows and columns of the table by placing <tr> tags, <td> tags, and data-bound items in the ItemTemplate. If you want a different appearance for alternating items in the table, create an AlternatingItemTemplate with the same contents as the ItemTemplate, except with a different style specified. Finally, complete the table by placing the </table> tag in the FooterTemplate.

The following table lists the different templates of the Repeater control.

Template Description

AlternatingItemTemplate

Like the ItemTemplate element, but rendered for every other row (alternating items) in the Repeater control. You can specify a different appearance for the AlternatingItemTemplate element by setting its style properties.

FooterTemplate

Elements to render once, after all data-bound rows have been rendered. A typical use is to close an element opened in the HeaderTemplate item (with a tag such as </table>).

Note
The FooterTemplate cannot be data-bound.

HeaderTemplate

Elements to render once, before any data-bound rows have been rendered. A typical use is to begin a container element, such as a table.

Note
The HeaderTemplate item cannot be data-bound.

ItemTemplate

Elements that are rendered once for each row in the data source. To display data in the ItemTemplate, declare one or more Web server controls and set their data-binding expressions to evaluate to a field in the Repeater control's (that is, the container control's) DataSource. The following example shows a sample declaration that displays the field containing the first name in a Label control.

First Name:
<asp:Label runat="server"
   Text="<%# Container.DataItem.FirstName %>" />

SeparatorTemplate

Elements to render between each row, typically line breaks (<br> tags), horizontal lines (<hr> tags), and so on.

Note
The SeparatorTemplate item cannot be data-bound.

The Repeater control has no built-in selection or editing support. You can create a handler for the control's ItemCommand event to process control events that are sent from the templates to the control.

The control binds its Item and AlternatingItem templates to a data structure referenced in the control's DataSource or DataSourceID properties. (The Header, Footer, and Separator templates cannot be bound to data.) If the Repeater control's DataSource property is set but no data is returned, the control renders the Header and Footer templates, but no items. If the DataSource property is not set, the Repeater control is not rendered.

Caution
Text is not HTML encoded before it is displayed in the Repeater control. This makes it possible to embed script within HTML tags in the text. If the values for the control come from user input, be sure to validate the values to help prevent security vulnerabilities.

For detailed information on the Repeater Web server control's properties and events, see the Repeater class documentation.

Example

The following code example demonstrates how to use the DataSourceID property to specify the data source for a Repeater control. The DataSourceID property is set to the ID property of the SqlDataSource control used to retrieve the data. When the page is loaded, the Repeater control automatically binds to the data source specified by the SqlDataSource control and the data is displayed to the user.

<%@ 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>
    <title>Repeater.DataSourceID Property Example</title>
</head>

  <body>
    <form id="Form1" runat="server">
        
      <h3>Repeater.DataSourceID Property Example</h3>
      
      <asp:repeater id="Repeater1"       
        datasourceid="SqlDataSource1"
        runat="server">
        
        <headertemplate>
          <table border="1">
            <tr>
              <td><b>Product ID</b></td>
              <td><b>Product Name</b></td>
            </tr>
        </headertemplate>
          
        <itemtemplate>
          <tr>
            <td> <%# Eval("ProductID") %> </td>
            <td> <%# Eval("ProductName") %> </td>
          </tr>
        </itemtemplate>
          
        <footertemplate>
          </table>
        </footertemplate>
      </asp:repeater>
        
            <asp:sqldatasource id="SqlDataSource1"          
            connectionstring="<%$ ConnectionStrings:NorthWindConnection%>" 
        selectcommand="SELECT ProductID, ProductName FROM [Products] Where ProductID <= 10"
        runat="server">
      </asp:sqldatasource>
               
    </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>
    <title>Repeater.DataSourceID Property Example</title>
</head>

  <body>
    <form id="Form1" runat="server">
        
      <h3>Repeater.DataSourceID Property Example</h3>
      
      <asp:repeater id="Repeater1"       
        datasourceid="SqlDataSource1"
        runat="server">
        
        <headertemplate>
          <table border="1">
            <tr>
              <td><b>Product ID</b></td>
              <td><b>Product Name</b></td>
            </tr>
        </headertemplate>
          
        <itemtemplate>
          <tr>
            <td> <%# Eval("ProductID") %> </td>
            <td> <%# Eval("ProductName") %> </td>
          </tr>
        </itemtemplate>
          
        <footertemplate>
          </table>
        </footertemplate>
      </asp:repeater>
        
            <asp:sqldatasource id="SqlDataSource1"          
            connectionstring="<%$ ConnectionStrings:NorthWindConnection%>" 
        selectcommand="SELECT ProductID, ProductName FROM [Products] Where ProductID <= 10"
        runat="server">
      </asp:sqldatasource>
               
    </form>      
  </body>
</html>

Share via

Repeater Web Server Control Declarative Syntax

Remarks

Example

See Also

Reference

Other Resources

Additional resources