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.
The repeater control can be found within the Toolbox in Visual Studio .NET:
|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.
|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:
|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.
|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
<AlternatingItemTemplate> (if present) elements.
Let's now add the
<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:
|Figure 5. Using the Repeater control|
<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 (
|Figure 6. The table with the horizontal separator|
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>
<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
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:
|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.
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
Copyright © 2009 O'Reilly Media, Inc.