Repeating yourself with the Repeater

Learning Resources
 

Repeating yourself with the Repeater

Repeating with the Repeater

The concept of a Repeater can be illustrated through an example. Suppose we store menu categories in a SQL Server table called "Sub_Category." If we ever need to add a new category, we simply add it to the table, and it will automatically appear on the menu. The table contains two fields: Sub_Category_ID and Sub_Category_Text.


Step 1 — Create the Page and Insert the Repeater Control

The Repeater control allows you to define the layout of its content using templates. These templates include:

  • ItemTemplate — Defines elements that are rendered once per row of data.
  • AlternatingItemTemplate — Defines elements rendered on every alternate row, allowing for alternating background colors, for example.
  • HeaderTemplate — Defines elements that are rendered once before the ItemTemplate section.
  • FooterTemplate — Defines elements that are rendered once after the ItemTemplate section.
  • SeparatorTemplate — Defines elements to be rendered between each row, such as line breaks.


Below is a portion of the Web Form (subcategories.aspx) containing the Repeater:

<asp:Repeater ID="catlist" runat="server">

    <HeaderTemplate>

        <!-- Header content, such as an image -->

    </HeaderTemplate>

    <ItemTemplate>

        <asp:HyperLink 

            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" />

    </ItemTemplate>

    <FooterTemplate>

        <!-- Footer content -->

    </FooterTemplate>

</asp:Repeater>


In this example, the Repeater named "catlist" uses the HeaderTemplate to display an image and the ItemTemplate to display a HyperLink control with our data. We’ll delve into this further in Step Two.


Step 2 — Retrieve the Data

Next, let’s examine how the data is retrieved. Here’s 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 establish a database connection and retrieve the contents of the Sub_Category table. The last two lines bind the Repeater control to the DataReader.


Let’s revisit the ItemTemplate section:


<asp:HyperLink 

    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" />


When the DataBind method is called, ASP.NET loops through the DataReader and populates the Repeater with the specified data. The DataBinder.Eval method uses reflection to parse and evaluate a data-binding expression against an object at runtime. In this case, the object is our Repeater. Thus, the following line of code:


NavigateUrl='<%# "mainframeset.aspx?CatType=" + DataBinder.Eval(Container.DataItem, "Sub_Category_ID") %>'

renders the value of the Sub_Category_ID field for each row in the DataReader.

 For Support