Using the ASP.NET Repeater Control Article

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 yourItemTemplate section.
• FooterTemplate — Use this template for elements that you want to render once after your ItemTemplatesection.
• 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:

view plainprint?

1. ....  
2. <asp:Repeater ID="catlist" runat="server">  
3. <HeaderTemplate>  
4. <tr>  
5. <td class="imgspace">  
6. <img src="Images/areas.jpg" width="91" height="28" class="bigtext">  
7. </td>  
8. </tr>  
9. </HeaderTemplate>  
10. <ItemTemplate>  
11. <tr>  
12. <td>  
13. <div align=center>  
14. <asp:HyperLink class="text"  
15. NavigateUrl="<%# "mainframeset.aspx?CatType=" +  
16. DataBinder.Eval(Container.DataItem,"Sub_Category_ID")%>"  
17. Text="<%#DataBinder.Eval(Container.DataItem, "Sub_Category_Text")%>"  
18. runat="server" target="mainFrame" ID="Hyperlink1" NAME="Hyperlink1"/>  
19. <br></div>  
20. </td>  
21. </tr>  
22. </ItemTemplate>  
23. <FooterTemplate>  
24. <tr>  
25. <td>  
26. </td>  
27. </tr>  
28. </FooterTemplate>  
29. </asp:Repeater>  
30. ....  

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.

view plainprint?

1. private void Page_Load(object sender, System.EventArgs e)  
2. {  
3. SqlConnection conDotNet = new SqlConnection  
4. "Server=xxxxxxx;UID=xxxx;PWD=xxxxx;Database=DotNetGenius");  
5. string sSQL = "Select sub_category_id, sub_category_text  
6. from Sub_Category";  
7. SqlCommand cmd = new SqlCommand(sSQL, conDotNet);  
8. conDotNet.Open();  
9. SqlDataReader dtrCat = cmd.ExecuteReader();  
10. catlist.DataSource = dtrCat;  
11. catlist.DataBind();  
12. }  

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:

view plainprint?

1. <ItemTemplate>  
2. <tr> <td> <div align=center>  
3. <asp:HyperLink class="text"  
4. NavigateUrl="<%# "mainframeset.aspx?CatType=" +  
5. DataBinder.Eval(Container.DataItem,"Sub_Category_ID")%>"  
6. Text="<%#DataBinder.Eval(Container.DataItem, "Sub_Category_Text")%>"  
7. runat="server" target="mainFrame" ID="Hyperlink1" NAME="Hyperlink1"/>  
8. <br></div></td></tr>  
9. </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:

view plainprint?

1. NavigateUrl="<%# "mainframeset.aspx?CatType=" +  
2. 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! -james haron