IBM

Easily display data with the Repeater control in .NET

If you're using ASP.NET, the Repeater control will provide you with flexibility to display data per your needs. Learn more about the Repeater control.

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!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

1 comments
sheela KR
sheela KR

i used repeater to display page number. but the problem is that it does not contain the page numbers. if it is in 1st page page number takes as 0 and if it is in 2nd page it takes 0 why this happening plz help me....

Editor's Picks