How to use nested repeater controls with relational data

Oftentimes, you may need to nest repeater controls with relational data. There’s an easy way of doing this, but you’ll need to define your relationships and write a small function to retrieve the related/child data records.

Database Relations

In this example, we’ll use three (3) tables defined below.

This is a simple relational database and does not follow any naming or key standards. So don’t name your primary keys and define your relationships like this in real databases, if you can avoid it.

ASP.NET Design View

Next, let’s add some simple HTML code. This will write out the user’s name and then create two ordered lists containing the user’s favorite foods and movies.

In the code below, the repUserList is the top-most repeater control. Within that repeater control are the two repeater controls of repFavMovieList and repFavFoodList. The two nested repeater controls will query the dataset and retrieve only the records related to the record being displayed in it’s parent (repUserList) repeater control.

<asp:Repeater ID="repUserList" runat="server">
    <ItemTemplate>

          <h1><%#Eval("UserName")%></h1>

          <asp:Repeater runat="server" ID="repFavFoodList" 

          DataSource='<%# GetChildRelation(Container.DataItem, "User_FavFoods")%>'>
               <HeaderTemplate><h2>Favorite Foods</h2><ol></HeaderTemplate>
               <ItemTemplate>
                   <li> <%#Eval("FoodName")%> </li>
                </ItemTemplate>
                <FooterTemplate></ol></FooterTemplate>
          </asp:Repeater>

          <asp:Repeater runat="server" ID="repFavMovieList" 

          DataSource='<%# GetChildRelation(Container.DataItem, "User_FavMovies")%>'>
                <HeaderTemplate><h2>Favorite Movies</h2><ol></HeaderTemplate>

                <ItemTemplate>
                   <li> <%#Eval("MovieName")%> </li>
                </ItemTemplate>
                <FooterTemplate></ol></FooterTemplate>
           </asp:Repeater>

     </ItemTemplate> 

</asp:Repeater>

 

Populating the DataSet (Code Behind)

First populate your DataSet by using any means necessary. There are numerous ways of populating a DataSet, so I’m going to skip this part since there’s just too many different techniques.

The DataSet variable name used in the example code is “dsUserData.” There will be three (3) DataTables within the dsUserData DataSet. These DataTables will be “User”, “UserFood”, and “UserMovie” (to match our relational diagram above).

 

Defining Relationships (Code Behind)

Second, define your relationships between the DataTables of the DataSet. When defining the relationship, note the first parameter – the relationship name. We will use this name later when we access the related data.

dsUserData.Relations.Add("User_FavFoods",
   dsUserData.Tables["User"].Columns["UserName"],
   dsUserData.Tables["UserFood"].Columns["UserName"]);
dsUserData.Relations[0].Nested = true;

dsUserData.Relations.Add("User_FavMovies",
   dsUserData.Tables["User"].Columns["UserName"],
   dsUserData.Tables["UserMovie"].Columns["UserName"]);
dsUserData.Relations[1].Nested = true;

 

Data Binding (Code Behind)

Next, we’ll set the DataSource of the top level repeater to our top-most/parent table. Finally, we’ll call DataBind to bind the DataSource to the control.

this.repUserList.DataSource = dsUserData.Tables["User"];

this.repUserList.DataBind();

 

GetChildRelation function (Code Behind)

The GetChildRelation function is called from the HTML design view and returns a DataView used as the DataSource of the child repeaters. The function requires the parent record and name of the relationship as parameters.

protected DataView GetChildRelation(Object dataItem, string relation)

{
   DataRowView drv = dataItem as DataRowView;
   if (drv != null)
      return drv.CreateChildView(relation);
   else
      return null;

}

You could enhance this function by adding a validation check for the relation name to make sure it exists before attempting to retrieve the view. 

Result

 

My Related Posts: Technology, Programming, .NET