AddThis Social Bookmark Button

Print

ASP.NET Data Controls Part 2: Repeater

by Wei-Meng Lee
03/03/2003

In my last article, I talked about using the DataGrid server control. The DataGrid control is a versatile control and allows for a high degree of customization. However, if your intention is to simply display items from a data source as an HTML table, there is a simpler control--the Repeater control.

The Repeater control performs a very common function that most Web developers have encountered in their projects. Very often you need to display records from a database, and most likely you would use a FOR loop to write the HTML code so that the records can be displayed within a table. Using the Repeater control, this process can very easily be automated.

Using the Repeater Control

The repeater control can be found within the Toolbox in Visual Studio .NET:

Locating the Repeater control in the toolbox
Figure 1. Locating the Repeater control in the toolbox

Simply drag and drop the control onto the Web Form. To customize the Repeater control, switch to HTML view, as shown in Figure 2.

Switch to View Source mode to modify the Repeater control
Figure 2. Switch to View Source mode to modify the Repeater control

Note that the Repeater control contains five templates to customize the behavior of the control:

The Repeater control contains the various template elements
Figure 3. The Repeater control contains the various template elements

A good way to understand the use of these five templates is to refer to Figure 4.

How the various templates correspond to a table
Figure 4. How the various templates correspond to a table

When the Repeater control is bound to a data source, the rows within the data source will be displayed by the <ItemTemplate> and <AlternatingItemTemplate> (if present) elements.

Let's now add the <HeaderTemplate>, <ItemTemplate>, <SeparatorTemplate>, and <AlternatingItemTemplates> elements to our Repeater control:


<asp:Repeater id="Repeater1" runat="server">
   <HeaderTemplate>
      <table border="1">
         <tr bgcolor="#ffcc99">
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Address</th>
         </tr>
   </HeaderTemplate>
   <ItemTemplate>
      <tr bgcolor="#ffcccc">
        <td><%# DataBinder.Eval(Container.DataItem, "au_id") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "au_fname") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "au_lname") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "address") %></td>
      </tr>
   </ItemTemplate>
   <AlternatingItemTemplate>
      <tr bgcolor="#ccff99">
        <td><%# DataBinder.Eval(Container.DataItem, "au_id") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "au_fname") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "au_lname") %></td>
        <td><%# DataBinder.Eval(Container.DataItem, "address") %></td>
      </tr>
   </AlternatingItemTemplate>
   <FooterTemplate>
	   </table>
   </FooterTemplate>
</asp:Repeater>

What I will do is to bind the Repeater control to a DataSet (we will do this shortly). To populate each row of the table with a record from the DataSet, I used:


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

In this case, "au_id" refers to the name of a column in the DataSet.

Finally, add a SqlDataAdapter control to your project and connect it to the Authors table within the Pubs database. In the Page_Load event, add in the following codes:


    Private Sub Page_Load(ByVal sender As System.Object, _
                          ByVal e As System.EventArgs) _
                          Handles MyBase.Load
        If Not IsPostBack Then
            Dim ds As New DataSet
            SqlDataAdapter1.SelectCommand.CommandText = _
            "SELECT * FROM Authors"
            SqlDataAdapter1.Fill(ds, "employee_record")
            Repeater1.DataSource = ds
            Repeater1.DataBind()
        End If
    End Sub

Run the application. You should now see the following:

Using the Repeater control
Figure 5. Using the Repeater control

The <separatortemplate> element allows you to inject a separator between rows of records. For example, you might wish to insert a horizontal rule between records, as the following shows:


   ...
   </ItemTemplate>

   <SeparatorTemplate>
      <tr>
         <td><hr></td>
         <td><hr></td>
         <td><hr></td>
         <td><hr></td>
      </tr>
   </SeparatorTemplate>
							
   <AlternatingItemTemplate>
   ...

Now, all the records are separated by a horizontal rule (<hr>):

The table with the horizontal separator
Figure 6. The table with the horizontal separator

Adding Button Controls to a Repeater

You can also add Button controls to a Repeater. For example, you might use a Button control to represent an Author ID, and when the button is clicked, display more information about the author.

Let's modify our HTML source to include a Button control. Change the line (there are a total of two such lines in our HTML source):


<td><%# DataBinder.Eval(Container.DataItem, "au_id") %></td>

to:


<td><asp:Button CommandName="ID" 
        Text=<%# DataBinder.Eval(Container.DataItem, "au_id") %> 
        runat=server/></td>

The above line will add a Button control within the Repeater control. The CommandName property is used to uniquely identify the button; if there is more than one Button control, each control must have a different CommandName.

Next, we need to modify the <asp:Repeater> element so that it knows which event to fire when the Button control is clicked. We need to specify the OnItemCommand property, indicating the event to service when the button is clicked:


<asp:Repeater id="Repeater1"  
  OnItemCommand="Button_ItemCommand" runat="server">

Lastly, code the routine for the Button_ItemCommand event:


    Sub Button_ItemCommand(ByVal Sender As Object, _
                           ByVal e As RepeaterCommandEventArgs)
        If e.CommandName = "ID" Then
            Response.Write("ID selected is " & _
                CType(e.CommandSource, Button).Text())
        End If
    End Sub

Run the application and click on one of the buttons:

Adding a Button control to the Repeater control
Figure 7. Adding a Button control to the Repeater control

Note that in the Form_Load event, you need to ensure that subsequent postbacks do not result in another databinding process. If you do not test for postbacks using the IsPostBack property, the Button_ItemCommand event will not be serviced.

Summary

Compared to the DataGrid control, the Repeater control is easier to use and is great for situations where you just need to display records quickly. Best of all, you can write your own HTML to customize the look of your table. You leave the details of data access to the Repeater control itself. In my next article, I will discuss the DataList control.

Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.


Return to ONDotnet.com