Using the ASP.NET Repeater Control
This article was written in 2003 and remains one of our most popular posts. If you’re keen to learn more about ASP.NET, you may find this recent article on ASP.NET and MVC of great interest.
When I was first learning to use .NET, I read an overview comparison between ASP.NET and ASP. A particular sentence caught my eye: “In ASP.NET, you can use Response.Write, but it isn’t recommended”.
I thought to myself “Isn’t recommended? How will I write out my HTML? How will I loop through my datasets and build tables?” I’d seen the datagrid, and it’s great for displaying a raw table of data, but how, I asked myself, would I write out just one column? What if the data was mixed with HTML?
I found the answer in my new favorite ASP.NET Server Control: Repeater. In this article, I’ll show you how I used it to create the left side menu for my own site, which looks like this:
I store the menu categories in a table called “Sub_Category” in SQL Server, so that if I ever need to add one, I just add it to the table and it will appear on the menu. There are two fields in the table: Sub_Category_ID, and Sub_Category_Text.
Step 1 — Create the Page and Insert the Repeater Control
The Repeater control allows you to create templates to define the layout of its content. The templates are:
ItemTemplate— Use this template for elements that are rendered once per row of data.AlternatingItemTemplate— Use this template for elements that are rendered every other row of data. This allows you to alternate background colors, for example.HeaderTemplate— Use this template for elements that you want to render once before yourItemTemplatesection.FooterTemplate— Use this template for elements that you want to render once after yourItemTemplatesection.SeperatorTemplate— Use this template for elements to render between each row, such as line breaks.
Here is a part of the Web Form (subcategories.aspx) that contains the Repeater:
....
<asp:Repeater ID="catlist" runat="server">
<HeaderTemplate>
<tr>
<td class="imgspace">
<img src="Images/areas.jpg" width="91" height="28" class="bigtext">
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<div align=center>
<asp:HyperLink class="text"
NavigateUrl="<%# "mainframeset.aspx?CatType=" +
DataBinder.Eval(Container.DataItem,"Sub_Category_ID")%>"
Text="<%#DataBinder.Eval(Container.DataItem, "Sub_Category_Text")%>"
runat="server" target="mainFrame" ID="Hyperlink1" NAME="Hyperlink1"/>
<br></div>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr>
<td>
</td>
</tr>
</FooterTemplate>
</asp:Repeater>
....The Repeater has a name of “catlist“. It uses the HeaderTemplate to print out the Areas image. It then uses the ItemTemplate to display a Hyperlink control that has our data in it. We’ll come back to this in Step Two.
The FooterTemplate is not necessary, but I put it in here for consistency.
Step 2 — Get the Data
Now let’s look at the data retrieval. Here is the Page_Load event in the Code Behind file.
private void Page_Load(object sender, System.EventArgs e)
{
SqlConnection conDotNet = new SqlConnection
"Server=xxxxxxx;UID=xxxx;PWD=xxxxx;Database=DotNetGenius");
string sSQL = "Select sub_category_id, sub_category_text
from Sub_Category";
SqlCommand cmd = new SqlCommand(sSQL, conDotNet);
conDotNet.Open();
SqlDataReader dtrCat = cmd.ExecuteReader();
catlist.DataSource = dtrCat;
catlist.DataBind();
}The first five lines open a database connection and retrieve the contents of the Sub_Category table. The last two lines bind our Repeater control to the DataReader. Now, let’s look again at the ItemTemplate section:
<ItemTemplate>
<tr> <td> <div align=center>
<asp:HyperLink class="text"
NavigateUrl="<%# "mainframeset.aspx?CatType=" +
DataBinder.Eval(Container.DataItem,"Sub_Category_ID")%>"
Text="<%#DataBinder.Eval(Container.DataItem, "Sub_Category_Text")%>"
runat="server" target="mainFrame" ID="Hyperlink1" NAME="Hyperlink1"/>
<br></div></td></tr>
</ItemTemplate>Once the DataBind method of the Repeater control is called, ASP.NET will loop through the DataReader and populate the Repeater with the data we specify. The Databinder.Eval method uses reflection to parse and evaluate a data-binding expression against an object at run time, in this case the object is our Repeater. So this line of code:
NavigateUrl="<%# "mainframeset.aspx?CatType=" +
DataBinder.Eval(Container.DataItem,"Sub_Category_ID")%>"will render the contents of the "Sub_Category_ID" field for each row in the DataReader.
If you spend much time with ASP.NET, you will certainly be using this control often. I hope you find it handy!
If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Introductory Web Development Using ASP.NET.
