Using Nested Repeaters in ASP.NET and C#

This tutorial shows how to use nested repeaters to display hierarchical data from a database. C# version.

Repeaters are very powerful tools for displaying data, and while they are not the most feature-packed tool in the ASP.NET toolbox, they are arguably the most versatile.
One of the things we can do with Repeaters is nest them to show hierarchical data. In this example, we will display a menu system with sub-menu items, using two Repeaters. These menu items will be pulled from a Sample database.

First, we add the Connection String in Web.config:

<appSettings> <add key="ConnectionString" value="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" /> </appSettings> <connectionStrings/>

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

We also need the following assembly references:

using System.Data; using System.Data.SqlClient;

We add the code for the two nested Repeater Controls:

<form id="form1" runat="server"> <asp:Repeater ID="repMenu1" runat="server" OnItemDataBound="repMenu1_ItemDataBound"> <ItemTemplate> <a href="#"><%#DataBinder.Eval(Container.DataItem, "menuItem")%></a> <asp:Repeater ID="repMenu2" runat="server"> <HeaderTemplate><br /></HeaderTemplate> <ItemTemplate><div style="margin-left:15px;"><a href="#"><%#DataBinder.Eval(Container.DataItem, "subMenuItem")%></a><br /></div></ItemTemplate> </asp:Repeater> </ItemTemplate> </asp:Repeater> </form>

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Notice the nested Repeater is in the <ItemTemplate> tags of the first.
Next, we add the following to the code-behind.

protected void ShowMenu() { SqlDataAdapter cmd = new SqlDataAdapter("SELECT * FROM [Table1];SELECT * FROM [Table2]", new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"])); DataSet ds = new DataSet(); cmd.Fill(ds); ds.Relations.Add(new DataRelation("nestThem", ds.Tables[0].Columns["ID"], ds.Tables[1].Columns["parentMenuID"])); repMenu1.DataSource = ds; repMenu1.DataBind(); } protected void repMenu1_ItemDataBound(object sender, RepeaterItemEventArgs e) { DataRowView dv = e.Item.DataItem as DataRowView; if (dv != null) { Repeater repSubMenu = e.Item.FindControl("repMenu2") as Repeater; if (repSubMenu != null) { repSubMenu.DataSource = dv.CreateChildView("nestThem"); repSubMenu.DataBind(); } } }

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

The above method should be called on Page_Load so that it can bind the data to the first repeater, which will retrieve the top-menu items from the database and populate the repeater. When menu1 is databound, it will find the matching submenu items in the database and bind them to the second (nested) repeater, displaying the sub-menu items below the parent.

The entire code-behind should look something like this:

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { ShowMenu(); } protected void ShowMenu() { SqlDataAdapter cmd = new SqlDataAdapter("SELECT * FROM [Table1];SELECT * FROM [Table2]", new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"])); DataSet ds = new DataSet(); cmd.Fill(ds); ds.Relations.Add(new DataRelation("nestThem", ds.Tables[0].Columns["ID"], ds.Tables[1].Columns["parentMenuID"])); repMenu1.DataSource = ds; repMenu1.DataBind(); } protected void repMenu1_ItemDataBound(object sender, RepeaterItemEventArgs e) { DataRowView dv = e.Item.DataItem as DataRowView; if (dv != null) { Repeater repSubMenu = e.Item.FindControl("repMenu2") as Repeater; if (repSubMenu != null) { repSubMenu.DataSource = dv.CreateChildView("nestThem"); repSubMenu.DataBind(); } } } }

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!