How to use Repeater Control

One of important goals of any application development process is making data presentation richer. ASP.NET 2.0 provides many server controls which render data in different rich formats and styles.

For example, DataGrid control is suitable in many scenarios where you wish to display data in a grid like representation for easy understanding. Similarly, if the situation demands for rendering list like data, you can consider using of DataLists and Repeater server controls.

Repeater control is a container control which is template based with no basic rendering of its own. This way, you define layout for the Repeater control by creating different templates based on your needs. You can create different kinds of lists using Repeater control including Table, Comma-separated list and XML formatted list.

Repeater Control Templates

Repeater controls provides different kinds of templates which helps in determining the layout of control's content. Templates generate markup which determine final layout of content.

Repeater control is an iterative control in the sense it loops each record in the DataSource and renders the specified template (ItemTemplate) for each record in the DataSource collection. In addition, before and after processing the data items, the Repeater emits some markup for the header and the footer of the resulting structure

Repeater control supports five templates which are as follows:

ItemTemplate
AlternatingItemTemplate
HeaderTemplate
FooterTemplate
SeparatorTemplate

ItemTemplate: ItemTemplate defines how the each item is rendered from data source collection.

AlternatingItemTemplate: AlternatingItemTemplates define the markup for each Item but for AlternatingItems in DataSource collection like different background color and styles.

HeaderTemplate: HeaderTemplate will emit markup for Header element for DataSource collection

FooterTemplate: FooterTemplate will emit markup for footer element for DataSource collection

SeparatorTemplate: SeparatorTemplate will determine separator element which separates each Item in Item collection. Usually, SeparateTemplate will be <br> html element or <hr> html element.

DataBinding in Repeater Control

Like any other Data Bound control, Repeater control supports DataSource property which allows you to bind any valid DataSource like sqlDataSource, XML file or any datasets which implements ICollection, IEnumerable or IListSource Interfaces.

The data in DataSource is bound to Repeater using its DataBind Method. Once the data is bound, the format of each data item is defined by a template like ItemTemplate.

Adding Repeater server control to ASP.NET page

Add any Data Source control to the page such as sqlDataSource or AccessDataSource. Configure Data Source control such that you specify connection information and perform query.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode] FROM [Customers]"></asp:SqlDataSource>

Drag and Drop Repeater control from Data section of the Toolbox onto the page.

<asp:Repeater ID="Repeater1" DataSourceID="SqlDataSource1" runat="server" </asp:Repeater>

Set the DataSourceID property of Repeater Control to newly configured sqlDataSource control as shown above.

Add an <ItemTemplate> element into the page as a child of the Repeater control. 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.

Embed HTML markup and Web server controls or HTML server controls to the ItemTemplate to render data at run time

Bind the child controls to data from the query using the Eval data-binding function.

Following example shows how to use Repeater control to display data in a HTML table.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
        <table border="1" cellpadding="5" cellspacing="2">
        <tr bgcolor="gray">
        <td><b>CompanyName</b>
        </td>
        <td><b>City</b></td>
        </tr>
        </HeaderTemplate>
         <ItemTemplate>
         <tr>
         <td>
         <%#DataBinder.Eval(Container.DataItem, "CompanyName")%>
         </td>
             <td>
         <%#DataBinder.Eval(Container.DataItem, "City")%>
             </td>
             </tr>
         </ItemTemplate>
         <AlternatingItemTemplate >
         <tr bgcolor="aqua" >
         <td>
         <%#DataBinder.Eval(Container.DataItem, "CompanyName")%>
         </td>
             <td>
         <%#DataBinder.Eval(Container.DataItem, "City")%>
             </td>
         </tr>
         </AlternatingItemTemplate>
         <FooterTemplate>
         </table>
         </FooterTemplate>
          </asp:Repeater>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode] FROM [Customers]"></asp:SqlDataSource>

Repeater Control in action

The Databinder.Eval method uses reflection to parse and evaluate a data-binding expression against an object at run time; in this case the object is our Repeater. So this line of code:

<%#DataBinder.Eval(Container.DataItem, "CompanyName")%>

It will render the contents of the "CompanyName" field for each row in the DataSource Collection. You can download sample Repeater Control project, used with this tutorial.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback |