Mastering Hierarchical Data Display: A C# Repeater Control Guide

Updated: 04 Sep, 2025 • 0 • min read

Table of Contents

Displaying complex, hierarchically structured data effectively is a common requirement in web development. Applications often deal with parent-child relationships, such as categories and subcategories, customers and their orders, or in this specific case, authors and the titles they have contributed to. While various controls exist for data presentation, the ASP.NET Repeater control offers unparalleled flexibility and control over the rendered HTML, making it an excellent choice for custom hierarchical data layouts. This guide explores how to leverage the Repeater control in C# to elegantly present hierarchical data from a SQL database.

The ASP.NET Repeater control is a lightweight, template-driven data-bound control designed for displaying lists of data. Unlike other controls such as the GridView or DataList, the Repeater renders no default HTML markup besides what you explicitly define within its templates. This provides developers with complete freedom to structure the output exactly as needed, a crucial advantage when dealing with complex or nested data structures. Its flexibility makes it ideal for scenarios where a highly customized visual presentation is paramount, such as dynamic menus, product listings, or, as we will demonstrate, displaying data with parent-child relationships.

Understanding Hierarchical Data and the Repeater’s Role¶

Hierarchical data is characterized by relationships where one record (the parent) can have multiple associated records (the children), and these children might, in turn, become parents to another level of children. Effectively visualizing such data requires a mechanism that can iterate through the parent records and then, for each parent, iterate through its corresponding child records. The Repeater control, through its ItemTemplate and the ability to nest instances of itself, provides a robust solution for this challenge. By placing a child Repeater within the ItemTemplate of a parent Repeater, we can create a dynamic structure that mirrors the hierarchical nature of the underlying data.

The core of handling hierarchical data programmatically often involves the DataSet object in ADO.NET. A DataSet can hold multiple DataTable objects, each representing a table from the database. Critically, it also allows the definition of DataRelation objects, which formally establish the parent-child links between these DataTables, much like foreign key relationships in a database. This in-memory representation of relationships is vital for efficiently retrieving child rows associated with a particular parent row, a capability we will exploit when binding the nested Repeater.

Mastering Hierarchical Data Display with C# Repeater

Setting Up the Development Environment¶

Our journey begins in the Visual Studio .NET integrated development environment (IDE). This environment provides all the necessary tools for creating, debugging, and deploying ASP.NET web applications. Initiating a new project serves as the foundation for our hierarchical data display solution, ensuring that all required configurations and project structures are in place.

Launch Visual Studio .NET: Begin by opening Visual Studio .NET, your primary tool for this development task.
Create a New Project: Navigate to the File menu, select New, and then click Project. This action opens the New Project dialog, where you define the type and initial settings of your application.
Select Project Type: Within the New Project dialog, expand Visual C# Projects under Project Types. From the available templates, choose ASP.NET Web Application. This selection configures your project specifically for web-based development using C# and ASP.NET.
Configure Project Location and Name: In the Location field, modify the default project name, typically WebApplication#, to NestedRepeater. If you are using a local development server, ensure the server name remains http://localhost. The complete path http://localhost/NestedRepeater should then appear in the Location box, specifying where your application will reside. Confirm these settings by clicking OK to create the project. This establishes the basic structure for your web application.

Designing the Web Form and Parent Repeater¶

With the project set up, the next step involves adding a Web Form, which will serve as the canvas for our data display. The ASP.NET Repeater control is then introduced to this form, acting as the primary container for our parent-level data. Careful configuration of the Repeater’s ID and its initial templated content is crucial for the subsequent data binding process.

Add a New Web Form: In Solution Explorer, right-click the NestedRepeater project node. Point to Add, and then select Add Web Form. When prompted to name the new form, type NestedRepeater and click Open. This action creates a new .aspx page, which immediately opens in the Design View of the Visual Studio .NET IDE.
Integrate the Repeater Control: From the Toolbox, locate the Repeater control. Drag and drop this control onto the newly created Web Form page. The Repeater is a bare-bones control that requires explicit templating for its display, making it perfect for custom layouts.
Set Repeater ID: With the Repeater control selected on the Web Form, access its properties window. Change the ID property from its default value to parentRepeater. A clear and descriptive ID is essential for programmatic access in the code-behind file.
Define Parent Repeater’s HTML Template: Switch to the HTML view of the Web Form by clicking the HTML tab at the bottom-left corner of the Designer. Initially, the Repeater control will generate minimal HTML:
```
<asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
```
To define how each parent item should be displayed, insert the following code within the Repeater tags. This ItemTemplate specifies that the au_id field from each data item will be displayed in bold, followed by a line break. The DataBinder.Eval(Container.DataItem, "au_id") expression is used to extract the value of the au_id column from the current data item.
```
<itemtemplate>
 
 <%# DataBinder.Eval(Container.DataItem, "au_id") %>
 
 
</itemtemplate>
```
After this modification, the complete HTML code for your parentRepeater will look like this:
```
<asp:Repeater id="parentRepeater" runat="server">
 <itemtemplate>
 
 <%# DataBinder.Eval(Container.DataItem, "au_id") %>
 
 
 </itemtemplate>
</asp:Repeater>
```
This structure establishes the basic visual representation for each item provided to the parentRepeater.

Implementing Data Binding for the Parent Repeater¶

With the visual structure of the parent Repeater defined, the next crucial step is to connect it to our data source. This involves writing C# code in the code-behind file to establish a database connection, retrieve data, and bind it to the parentRepeater. We will use ADO.NET objects like SqlConnection, SqlDataAdapter, and DataSet to manage data access.

Access the Code-Behind File: In Solution Explorer, right-click NestedRepeater.aspx, and then click View Code. This action opens the NestedRepeater.aspx.cs file, which is where you will write the server-side logic for your Web Form.
Add Namespace Declarations: To work with ADO.NET classes, specific namespaces must be imported. Add the following using statements at the very top of your code-behind file:
```
using System.Data;
using System.Data.SqlClient;
```
- System.Data provides core ADO.NET classes like DataSet and DataTable.
- System.Data.SqlClient contains classes specific to SQL Server, such as SqlConnection and SqlDataAdapter.

Implement Data Binding in Page_Load: Add the following C# code within the Page_Load event handler. This code handles the database connection, data retrieval, and binding of the Authors table to the parentRepeater.

public void Page_Load(object sender, EventArgs e)
{
    // Establish a connection to the Pubs database.
    // The connection string may need modification based on your SQL Server setup.
    SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI");

    // Create a DataAdapter to retrieve data from the 'authors' table.
    SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors", cnn);

    // Initialize a DataSet to hold our data.
    DataSet ds = new DataSet();

    // Fill the 'authors' DataTable within the DataSet using the DataAdapter.
    cmd1.Fill(ds, "authors");

    // This is a placeholder for code to be added in a later step when we introduce hierarchical data.
    // For now, it's empty.

    // Assign the 'authors' DataTable as the data source for the parentRepeater.
    parentRepeater.DataSource = ds.Tables["authors"];

    // Call DataBind() on the Page to bind data to all data-bound controls, including parentRepeater.
    Page.DataBind();

    // It is crucial to close the database connection once data retrieval is complete to release resources.
    cnn.Close();
}

Important Note on Connection Strings: The provided connection string server=(local);database=pubs; Integrated Security=SSPI assumes you are using a local SQL Server instance named (local) and integrated security. You might need to adjust this string to match your specific database server name, authentication method (e.g., SQL Server Authentication with User ID and Password), and database name. Always ensure your connection string is correctly configured for your environment to prevent connection errors.

Save and Set Start Page: Save all modified files (NestedRepeater.aspx and NestedRepeater.aspx.cs). In Solution Explorer, right-click NestedRepeater.aspx and select Set As Start Page. This ensures that this page is launched when you run the application.
Build the Solution: On the Build menu, click Build Solution to compile your project. Address any compilation errors before proceeding.
Verify Initial Output: View the NestedRepeater.aspx page in your browser. You should observe a list of author IDs, indicating that the parentRepeater is successfully binding and displaying data from the Authors table. The output should resemble:
```
172-32-1176
213-46-8915
238-95-7766
267-41-2394
...
```
This confirms the successful setup and data binding of the parent Repeater.

Implementing the Nested Repeater for Hierarchical Display¶

Now that the parent Repeater is displaying individual author IDs, the next step is to introduce the hierarchical aspect by showing the titles associated with each author. This is achieved by nesting a second Repeater control within the ItemTemplate of the parent Repeater. This child Repeater will be responsible for displaying the related “title_id” for each author. The key to making this work lies in establishing a DataRelation within the DataSet and then binding the child Repeater’s DataSource to the child rows of the current parent item.

Understanding the Data Relationship¶

To display authors and their corresponding titles, we need to consider the Pubs database schema. The authors table contains author information, and the titleauthor table links authors to titles via au_id and title_id. The titles table contains title details. For our hierarchical display, authors will be the parent, and titleauthor (or effectively titles through titleauthor) will be the child. We’ll use the titleauthor table to get the title_id for each author.

Let’s visualize this relationship:

mermaid erDiagram AUTHORS ||--o{ TITLEAUTHOR : "has written" TITLEAUTHOR }o--|| TITLES : "is about" AUTHORS { varchar au_id PK "Author ID" varchar au_lname "Last Name" varchar au_fname "First Name" varchar phone "Phone Number" varchar address "Address" varchar city "City" varchar state "State" varchar zip "Zip Code" boolean contract "Contract Status" } TITLEAUTHOR { varchar au_id PK, FK "Author ID" varchar title_id PK, FK "Title ID" tinyint au_ord "Author Order" int royaltyper "Royalty Percentage" } TITLES { varchar title_id PK "Title ID" varchar title "Title Name" varchar type "Book Type" varchar pub_id FK "Publisher ID" money price "Price" money advance "Advance" int royalty "Royalty" int ytd_sales "Year-to-Date Sales" varchar notes "Notes" datetime pubdate "Publication Date" }
Our DataSet will need to reflect the AUTHORS and TITLEAUTHOR tables, and we’ll define a relation between them on the au_id column.

Implementing the Nested Repeater¶

Add the Child Repeater to ItemTemplate: Return to the HTML view of NestedRepeater.aspx. Locate the existing HTML for the parentRepeater’s ItemTemplate:
```

 <%# DataBinder.Eval(Container.DataItem, "au_id") %>

 
```
Immediately after the   tag, insert the following code for the childRepeater. This places the child Repeater directly within the template of each parent item, ensuring it renders for every author.
```
<asp:repeater id="childRepeater" runat="server">
 <itemtemplate>
 <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%> 
 </itemtemplate>
</asp:repeater>
```
This childRepeater is designed to display the title_id for each associated title. The DataBinder.Eval expression is slightly different, using square brackets and quotes ("[\"title_id\"]") because GetChildRows returns a DataRow[] where columns are accessed by name, and title_id could potentially be interpreted differently without this specific syntax in older ASP.NET versions or if the column name conflicts with a property.
Configure Child Repeater’s DataSource: The most critical step in nesting Repeaters is correctly setting the DataSource for the child Repeater. It must be bound to the child rows related to the current parent item. Modify the asp:repeater tag for childRepeater as follows:
```
<asp:repeater id="childRepeater" runat="server"
datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' >
 <itemtemplate>
 <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%> 
 </itemtemplate>
</asp:Repeater>
```
Explanation of DataSource expression:
* Container.DataItem: In the context of the parent Repeater’s ItemTemplate, Container.DataItem refers to the current DataRowView object for the author being processed.
* (DataRowView)Container.DataItem: We explicitly cast Container.DataItem to a DataRowView because that’s the type of object representing a row when bound to a Repeater from a DataTable.
* .Row: From the DataRowView, we access the underlying DataRow object.
* .GetChildRows("myrelation"): This crucial method, available on a DataRow, retrieves all child DataRow objects related to the current parent DataRow through the DataRelation named “myrelation”. This DataRelation will be defined in our code-behind. The result is an array of DataRow objects, which is then bound to the childRepeater.

After these modifications, the complete HTML for both Repeater controls will appear:
```
<asp:Repeater id="parentRepeater" runat="server">
 <itemtemplate>
 
 <%# DataBinder.Eval(Container.DataItem, "au_id") %>
 
 
 <asp:repeater id="childRepeater" runat="server"
 datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' >
 <itemtemplate>
 <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%> 
 </itemtemplate>
 </asp:Repeater>
 </itemtemplate>
</asp:Repeater>
```
Add System.Data Namespace Directive: Although we’ve added using System.Data; in the code-behind, it’s good practice to also declare it as a page directive if you’re directly referencing System.Data types within ASP.NET markup, especially when casting. Add the following line to the very top of your NestedRepeater.aspx page:
```
<%@ Import Namespace="System.Data" %>
```
Modify Page_Load for Relationship: Return to the NestedRepeater.aspx.cs code-behind file. Locate the comment //Insert code in step 4 of the next section here. within your Page_Load method. Replace this comment with the following code:
```
//Create a second DataAdapter for the TitleAuthor table.
SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor", cnn);
cmd2.Fill(ds, "titles"); // Naming it "titles" for simplicity, representing title-author links.

// Create the relation between the Authors and TitleAuthor tables.
// The relation is named "myrelation" as referenced by the child Repeater's DataSource.
ds.Relations.Add("myrelation",
    ds.Tables["authors"].Columns["au_id"],
    ds.Tables["titles"].Columns["au_id"]);
```
Explanation of Page_Load modifications:
* A second SqlDataAdapter (cmd2) is created to fetch data from the titleauthor table, which links authors to titles.
* cmd2.Fill(ds, "titles"); populates a new DataTable named “titles” within our DataSet ds with data from the titleauthor table.
* ds.Relations.Add("myrelation", ...); is the key step. It defines a DataRelation named “myrelation” within the DataSet. This relation links the au_id column in the “authors” table (the parent) to the au_id column in the “titles” table (the child). This relationship allows GetChildRows("myrelation") to function correctly.
Save and Compile: Save all files and rebuild your application (Build > Build Solution). Ensure there are no compilation errors.
Verify Hierarchical Output: View the NestedRepeater.aspx page in your browser once more. You should now see each author’s ID, followed by a list of title IDs they are associated with. This demonstrates successful hierarchical data display. The output should now look similar to this:
```
172-32-1176
PS3333
213-46-8915
BU1032
BU2075
238-95-7766
PC1035
267-41-2394
BU1111
TC7777
...
```

Advantages and Best Practices for Nested Repeaters¶

The nested Repeater pattern is a powerful technique for rendering complex hierarchical data with complete control over the markup. Its main advantages include:

Ultimate Markup Control: Unlike GridView or ListView, the Repeater renders no extra HTML. This allows for highly customized, semantic, and accessible output, crucial for modern web design.
Flexibility: It can display any level of nesting, limited only by your data structure. Each Repeater can have its own distinct ItemTemplate, HeaderTemplate, FooterTemplate, and SeparatorTemplate, allowing for fine-grained control over the presentation of each level of data.
Performance (for specific scenarios): For relatively small to medium datasets, especially when complex rendering is needed, the Repeater can be efficient due to its lightweight nature. It avoids the overhead of more feature-rich controls.

However, using nested Repeaters also comes with considerations:

Complexity for Deep Hierarchies: Managing very deep nesting (e.g., more than 3-4 levels) can make the aspx markup difficult to read and maintain.
Performance with Large Datasets: When dealing with extremely large datasets, especially if each parent has many children, rendering many nested controls can lead to performance issues due to the amount of HTML generated and the number of data binding operations. In such cases, consider pagination, lazy loading, or alternative controls designed for large-scale data like a TreeView control (if a tree-like structure is acceptable).
Data Structure Dependence: The effectiveness of this approach heavily relies on a well-defined DataSet with properly configured DataRelation objects. Understanding your data relationships is paramount.

Enhancing the Display and User Experience¶

While the basic functionality is in place, several enhancements can improve the display and user experience:

Styling: Apply CSS to style the output, making it more visually appealing and organized. You could use classes within your templates (e.g., <div class="author-item"> and ).
Error Handling: Implement robust error handling around database operations to gracefully manage connection issues or data retrieval failures.
Empty Data Templates: Utilize the Repeater’s EmptyDataTemplate property (if available in your ASP.NET version or by adding logic in code-behind) to display a message when no data is found for a parent or child.
Dynamic Data: The Pubs database is static. In a real-world application, data would be dynamic. Ensure your queries and data adapters can handle changing data effectively.
Security: For production environments, never embed connection strings directly in your code. Store them securely in Web.config and retrieve them using ConfigurationManager.

This guide demonstrates the foundational steps for mastering hierarchical data display using the C# Repeater control. By understanding the interaction between the DataSet, DataRelation, and nested Repeater controls, developers gain a powerful tool for presenting complex data structures in a clean, customizable, and efficient manner. The flexibility of the Repeater ensures that your data can be rendered precisely to meet any design requirement, making it an invaluable asset in the ASP.NET developer’s toolkit.

What are your experiences with displaying hierarchical data in ASP.NET? Have you found other approaches more effective for particular scenarios, or do you have further tips for optimizing nested Repeater performance? Share your thoughts and insights in the comments below!

Computacionvinchi