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 ItemTemplate
section.
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! -james haron