ADO.NET 101: Data Rendering with a Repeater Control Introduction

This how-to tutorial describes displaying the data from a DataReader using Iterative data bound controls. In the first SqlDataReader tutorial, data from a DataReader was displayed mostly by resorting to the Response.Write() method of a web page, or using the AddItem() method of a list control.

In the second tutorial, the data was displayed by using standard server controls such as Textbox, ListBox, DropDownList, and Table. In this tutorial displaying data using the data bound control Repeater will be described. If you review the previous tutorials you would observe that the rendered display did not offer any built-in flexibility for formatting. The most you could do was to wrap it in a suitable HTML tag which necessitated adding extra tags in the code.

The iterative technique described in this tutorial offers the RAD technique of flexible, free form formatting of displayed data. When the controls are bound to a data source, the three controls Repeater, DataList, and DataGrid loop through the data row-by-row, and apply a template (html) in rendering on a row by row basis. You will see that setting up an iterative control is slightly harder than using any of the server controls.

There are differences between each of these controls, so you should make your choice based on your requirements. For example, if paging is one of the requirements, DataGrid is the best choice as the two others are not amenable to paging.

We have seen that DataReader is best suited for the Read-only, Forward- only type of data retrieval. Hence, when using these controls we are not using the specialized events that can be fired by objects on these controls. However, this tutorial shows the basics of binding data to these controls using the DataReader.

The next picture shows the three iterative controls as you find them in the collection of web form controls.

Displaying Data from DataReader with a Repeater Control

IDE related details of Repeater Control

The next picture shows a Repeater Control placed on the design pane of a web form. The corresponding html generated is:

<asp:Repeater id="Repeater2" runat="server">
</asp:Repeater>

Since the repeater control orchestrates a series of html templates, it will be necessary to insert the html formatting into the control. The VS 2003 IDE gives a dropdown cue as to the different templates built-in for this purpose. As soon as you insert a < tag in the Repeater Control you will see this drop-down menu, from which the Header template has just been inserted. The header and footer templates serve the purpose of providing the information that is suggested by their names, for example the column names of a table in the header and some aggregate information, or date in the footer.

The ItemTemplate is where row after row of data gets in. The Header and Footer templates are rendered only once since they are needed only once. If they are not defined, they are not rendered. The Alternating ItemTemplate is a part of the same ItemTemplate but helps in optionally rendering the alternate rows of the ItemTemplate for better readability of data. Again, it is rendered only if it is defined, not otherwise. The ItemTemplate is however, mandatory.

Although the template tags are provided, what goes into the various templates will depend on the data that is going to be displayed, and any special formatting that may need to be applied. This next picture shows how a table is going to be inserted as a part of the Repeater Control, where a couple of columns with their column headings are inserted into the HeaderTemplate portion of the Repeater Control. How do I know what the columns are? Well, since I am designing this to bring in data from a data reader to the Repeater Control, I know a priori the field (column) names that are going to be displayed (review my SQLCommand's CommandText property in the next section).

Configuring the Item

Template Data from a DataReader

Getting a DataReader to read data from a table in a connected MSDE Server will be considered. The details of reading the data were described in two earlier tutorials, and hence will be summarized here. The present version of VB.NET used for this tutorial does not allow access to SQL 2000 Server, but is limited to MSDE, or MS Access on the same computer. The next picture shows the data link properties of the SQLConnection. Biblio is not one of the standard databases, but it was imported from an MS Access application into MSDE.

The SQLConnection1 on the web form will have the following for its connection string:

workstation id=XPHTEK;packet size=4096;integrated security=SSPI;data
source="XPHTEK\TEST"; persist security info=False;initial catalog=Biblio

A SQLCommand1 placed on the web form will have the following CommandText:

SELECT FirstName, LastName, Title, Email, Phone FROM Employee

The HeaderTemplate discussed earlier had these column names in its table cells to properly account for the columns returned by the query.

Binding the Repeater Control to data

This is actually performed in two steps. In this first step, the code behind declares and assigns all objects and calls upon the DataReader to access data through the following code. In this step the Repeater's datasource is defined to be that coming from the DataReader as well as the Repeater. It is bound to the data using the DataBind() method:

 Private Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Button1.Click
Dim con As New SqlClient.SqlConnection 'SQLConnection1

is SQLConnection control
'placed on web form's design pane con = SqlConnection1
con.Open()
Dim dr As SqlClient.SqlDataReader
Dim cmd As New SqlClient.SqlCommand 

'SQLCommand1 is SQLCommand control
'placed on web form's design pane cmd = SqlCommand1
dr = cmd.ExecuteReader() 'Associate the data reader as a
'datasource for the Repeater Repeater1.DataSource = dr

'Now bind the repeater to data Repeater1.DataBind() con.Close()
End Sub

Designing the ItemTemplate

Itemtemplate is where the data will be displayed. The actual table cells in this template are shown in the html. For those of you familiar with ASP, this will look like what you would have done to bring in the recordset values to a table cell using the ASP syntax <%...%>, enclosing the databound information. In this case however, you have Framework supported classes making this possible.

<ItemTemplate>
<tr>
<td><%#DataBinder.Eval(Container,"DataItem.FirstName")%></td>
<td><%#DataBinder.Eval(Container,"DataItem.LastName")%></td>
<td><%#DataBinder.Eval(Container,"DataItem.Title")%></td>
<td><%#DataBinder.Eval(Container,"DataItem.Email")%></td>
<td><%#DataBinder.Eval(Container,"DataItem.Phone")%></td>
</tr>
</ItemTemplate>

In order to render the data in the itemtemplate, the DataBinder class is evoked. This class supports RAD (Rapid Application Development) designers to generate, and parse the Data Binding Expression Syntax that you see in the table cells. This is a non-inheritable class with an overloaded method,
Eval which is used in the table cells.

The Data Binding Expression creates binding between any property on an ASP.NET page with a data source when the DataBind() method is called. This DataBind() is also applicable to all the iterative controls in addition to any server controls. The DataBinder.Eval static method evaluates the late-bound expressions. Because of late binding the process may run slow. This overloaded method can be used for formatting as well. But this aspect is not used in the Repeater example considered in this tutorial.

In the Data Binding Expression the Container is the page and the DataItem is the data bound to the RepeaterItem. The expression that is evaluated can be written, for example, in either of the two following ways for the DataItem, Title:

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

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

The AlternatingItemTemplate

As mentioned earlier, this is optional and is rendered in display only when defined in the source. The following html shows how this is formatted. It is the same as the Itemtemplate , except the cell color is different.

<AlternatingItemTemplate>
<tr>
<td bgcolor="#ffffcc"><%#DataBinder.Eval(Container,"DataItem.FirstName")%>
</td>

<td bgcolor="#ffffcc"><%#DataBinder.Eval(Container,"DataItem.LastName")%>

</td>
<td bgcolor="#ffffcc"><%#DataBinder.Eval(Container,"DataItem.Title")%></td>
<td bgcolor="#ffffcc"><%#DataBinder.Eval(Container,"DataItem.Email")%></td>
<td bgcolor="#ffffcc"><%#DataBinder.Eval(Container,"DataItem.Phone")%></td>
</tr>
</AlternatingItemTemplate>

The FooterTemplate

This optional template could be put to good use, by bringing in total number of rows, total price, present date and time, etc. In this example, I have just inserted the present time.

<FooterTemplate>
<tr>
<td></td><td></td> <td><%=Now() %></td> <td></td><td></td>
</tr>
</table>
</FooterTemplate>

Displayed data from DataReader

The following picture shows the user interface of this page in design mode. Notice that the table cells are all databound. The alternate rows are colored as in the AlternatingItemTemplate.

The next picture shows the displayed page when the web form page is browsed.

Summary

The Repeater control has been described in some detail. The various templates that comprise the control are described except for the SeparatorTemplate, which is not really needed for this example. The web form with the configured Repeater may show HTML errors for the various tags (see picture below). The errors may be ignored without impunity.