If you’re using ASP.NET, you’re undoubtedly
familiar with the DataGrid control. The DataGrid provides all the
features to easily display data on a Web page in tabular format.
But, what if you don’t want HTML tables? This is where the
DataGrid’s lesser-known cousin, the Repeater control, steps in. The
Repeater control provides the flexibility to display data per your
needs.

What repeats?

The Repeater is an iterative control; that is,
it displays a data source’s contents by using templates that you
can easily configure. This includes the data as well as header and
footer areas. The Repeater loops over data items and applies the
template.

Unlike the DataGrid and DataList data controls,
the Repeater control doesn’t derive from the WebControl class. As a
result, it doesn’t include the common stylistic properties that
control the font, colors, and so forth. With the Repeater, HTML (or
a stylesheet) or ASP.NET classes handle these properties.

Where’s the HTML?

The major difference between the Repeater and
DataGrid (and DataList) controls is how HTML is handled. ASP.NET
creates the HTML for displaying the DataGrid control (as an HTML
table), but the Repeater allows the developer to decide how to
display the data. So you may opt to display the data in an HTML
table or an ordered list. The choice is yours, but you’ll have to
insert the appropriate HTML into the ASP.NET page.

Templates

The Repeater, like the DataList, supports
templates only. The following templates are available:

  • AlternatingItemTemplate: Defines how to
    display every other item.
  • ItemTemplate: Defines how to display items.
    (AlternatingItemTemplate may override this template.)
  • HeaderTemplate: Establishes how to display
    the header.
  • FooterTemplate: Establishes how to display
    the footer.
  • SeparatorTemplate: Defines how to display
    separators between items.

You can use these templates to present data
however you wish. The only mandatory element is the ItemTemplate
(so data actually displays); all the other templates are
optional.

The data

The Repeater has the same properties as the
DataGrid and DataList for working with a data source:

  • DataMember: Gets or sets the table in the corresponding DataSource
    property that is bound to the Repeater
  • DataSource: Gets or sets the data source that provides the data for
    populating the Repeater

In addition, there is an Items property that
allows you to programmatically access individual items (rows) in
the Repeater’s data. It returns a RepeaterItemCollection object
that is a collection of RepeaterItem objects which correspond to
each row in the Repeater’s data.

The ASP.NET Web data controls have another
thing in common: They all use the DataBind method to generate the
user interface. Calling this method retrieves and displays the data
(assuming the DataSource and DataMember properties are properly
set). Before we examine the DataBind method, let’s take a look at
utilizing a Repeater in a Web page.

Repeater in action

The first step in utilizing the Repeater is
determining the data source and the columns that we’ll use. For
this example, we’ll use the Employees table of the SQL Server
Northwind database. The Web page will display the employee full
name, address, and telephone number. The HTML will use DIV tags,
along with Repeater templates to separate the content. The Web page
HTML is displayed next:

<%@ Page language=”c#” %>
<%@ Import Namespace=”System.Data” %>
<%@ Import Namespace=”System.Data.SqlClient” %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
>
<html><head>
<title>Builder.com Repeater Example</title>
<meta name=”GENERATOR” Content=”Microsoft Visual Studio .NET
7.1″>
<meta name=”CODE_LANGUAGE” Content=”C#”>
<style>
.alternate {
FONT-WEIGHT: bold;
COLOR: black;
FONT-FAMILY: Verdana, ‘Times New Roman’;
BACKGROUND-COLOR: yellow
}
.row {
FONT-WEIGHT: bold;
COLOR: black;
FONT-FAMILY: Verdana, ‘Times New Roman’;
BACKGROUND-COLOR: white
}
.footer {
FONT-WEIGHT: bold;
COLOR: red;
FONT-FAMILY: Verdana, ‘Times New Roman’;
BACKGROUND-COLOR: gray
}
.header {
FONT-WEIGHT: bold;
COLOR: yellow;
FONT-FAMILY: Verdana, ‘Times New Roman’;
BACKGROUND-COLOR: gray
}
.box {
BORDER-RIGHT: blue groove;
BORDER-TOP: blue groove;
DISPLAY: block;
VERTICAL-ALIGN: baseline;
OVERFLOW: auto;
BORDER-LEFT: blue groove;
CURSOR: wait;
BORDER-BOTTOM: blue groove;
FONT-FAMILY: verdana;
TEXT-ALIGN: center
}
body {
background: #333;
}
</style>
<script language=”C#” runat=”server”>
private void Page_Load(object sender, System.EventArgs e) {
if (!IsPostBack) {
DataSet dset = new DataSet();
string conn = “server=(local);Initial
Catalog=Northwind;UID=ctester;PWD=password”;
string qry = “SELECT firstname, lastname, address, city, region,
postalcode,
homephone FROM employees”;
SqlDataAdapter sda = new SqlDataAdapter(qry, conn);
sda.Fill(dset);
Repeater1.DataSource = dset.Tables[0].DefaultView;
Repeater1.DataBind();
} }
</script></head>
<body MS_POSITIONING=”GridLayout” bgColor=”#00cc99″>
<form id=”Form1″ method=”post” runat=”server”>
<div class=”box”>
<asp:Repeater id=”Repeater1″ runat=”server”>
<HeaderTemplate>
<div class=”header” id=”header”>Northwind
Employees</div>
</HeaderTemplate>
<SeparatorTemplate><hr
/></SeparatorTemplate>
<ItemTemplate><div class=”row”>
<%# ((DataRowView)Container.DataItem)[“FirstName”] %>
<%# ((DataRowView)Container.DataItem)[“LastName”]
%><br>
<%# ((DataRowView)Container.DataItem)[“Address”]
%><br>
<%# ((DataRowView)Container.DataItem)[“City”]
%>,  
<%# ((DataRowView)Container.DataItem)[“Region”]
%>   
<%# ((DataRowView)Container.DataItem)[“PostalCode”]
%><br>
<%# ((DataRowView)Container.DataItem)[“HomePhone”] %>
</div></ItemTemplate>
<AlternatingItemTemplate><div class=”alternate”>
<%# ((DataRowView)Container.DataItem)[“FirstName”] %>
<%# ((DataRowView)Container.DataItem)[“LastName”]
%><br>
<%# ((DataRowView)Container.DataItem)[“Address”]
%><br>
<%# ((DataRowView)Container.DataItem)[“City”]
%>,  
<%# ((DataRowView)Container.DataItem)[“Region”]
%>   
<%# ((DataRowView)Container.DataItem)[“PostalCode”]
%><br>
<%# ((DataRowView)Container.DataItem)[“HomePhone”] %>
</div></AlternatingItemTemplate>
<FooterTemplate><div class=”footer”>
<%# ((DataView)Repeater1.DataSource).Count + ” employees
found.” %>
</div></FooterTemplate>
</asp:Repeater></div></form></body></html>

Notice that style sheets control the appearance
of the text in each Repeater row. In addition, a box is added
around the page contents. The embedded C# code retrieves columns
from the Repeater’s data source. Each data item is cast to a
DataRowView object for display.

This doesn’t use the ASP.NET codebehind
feature. For this reason, the page references both the System.Data
and System.Data.SqlClient namespaces. These are necessary to work
with the DataRowView object and interface with SQL Server.

The Page_Load event is triggered when the page
is called. This attaches the data source to the Repeater control
and queries the database. The code for each Repeater row loads data
from the underlying data source, and the Web page presents it.

This design uses style sheets (and HTML div
tags), so changing the appearance is as easy as changing the
necessary style sheet code. To further separate presentation from
data, you could store the style sheets in a separate file and
reference them with an HTML LINK tag.

A good alternative

When talking with other ASP.NET developers, it
amazes me how many of them are clueless about the Repeater control.
While it’s not as powerful as the DataGrid, it does offer excellent
flexibility that is necessary in many scenarios. One thing that is
missing with the Repeater is editing and sorting functions, but you
can incorporate them with extensive coding.

TechRepublic’s free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically sign up today!