Nesting Server Controls in ASP.NET

A common scenario in a repeating data display would be like this:

Category Name
  Product 1
  Product 2
  Product 3

The data would repeat, listing each category name, and then, under that category, each product in that particular category. In Classic ASP, there were several ways of doing this, of which, arguably the most common approach is/was a For/Next Loop with a Recordset.

Now, with the advent of ASP.Net, we can acutually Nest repeating controls (DataList, Repeater) to do this. I’ll admit, even if you’ve had a little relational database experience, this will, at first be a little daunting – but once you fully understand it, it seems extremely logical.

In this tutorial, we’re going to use a DataList control, the SQL Managed Provider, and the Northwind Database (Categories and Products tables). we could have just as easily used a Repeater control, with different formatting. Here are the steps to produce this scenario:

In the HTML:
1. Create/instantiate one DataList control (ID=dlCategories), with an ItemTemplate (Container.DataItem=CategoryName)
2. Inside that ItemTemplate, create/instantiate another DataList control, with an ItemTemplate(Container.DataItem=ProductName)
   The difference here is that we’re going to add a DataSource (datasource=’<%# Container.DataItem.Row.GetChildRows(“myrelation”) %>’) – Don’t worry about what this means – it’s in the code section

In the Code Section:
1. Build your normal DataBase/DataSet scenario (Connection/DataAdapter/Dataset)
   

   Dim strConn as String = "Server=(local);uid=sa;pwd=PWD;database=Northwind"
   Dim MySQL as string = "Select CategoryID, CategoryName from Categories"
   Dim MyConn as New SQLConnection(strConn)
   Dim ds as DataSet=New DataSet()

2. Create a Command to fill the Dataset with the Categories (based on SQL from the DataAdapter)
   

   Dim Cmd as New SQLDataAdapter(MySQL,MyConn)
   Cmd.Fill(ds,"Categories")

3. Now – we add a second Command to list the Products for each Category
   

   Dim cmd2 As SqlDataAdapter = New SqlDataAdapter("select * from Products", MyConn)
   cmd2.Fill(ds, "Products")

4. Here’s the crucial part – we create a Relation (ship) (imagine the PrimaryKey/ForeignKey relationship that would be necessary in the Database for this scenario. That’s how it works!

   
   ds.Relations.Add("myrelation", _
   ds.Tables("Categories").Columns("CategoryID"), _
   ds.Tables("Products").Columns("CategoryID"))
   

5. Last Part – Bind & Close
   

   dlCategories.Datasource=ds.Tables("NWCategories").DefaultView
   DataBind()
   MyConn.Close

As you can see, the hard work is done by the section that adds the Relationship between the two DataLists. Now – see? That wasn’t so bad was it?
The Complete Code Sample is available here (in VB.Net), in the Code Sample portion of the web site.

See C# Sample Code for Nested DataLists

Related Posts:

• No Related Posts