Tree controls let users navigate hierarchies by representing expandable and collapsible nodes. For example, when you explore your C drive using Windows Explorer, the directories appear as closed folders with small plus signs to the left. When you click on a plus sign, Windows Explorer displays an open folder and then shows the subdirectories directly underneath. If there are further subdirectories, you may open them the same way.

ASP.NET provides this functionality via the TreeView. It's useful any time you want to represent a nested data structure and have a way of drilling down into it. To see how the TreeView works, let's look at an example.

Using the TreeView control

This exercise illustrates the TreeView control by showing a hierarchical, expandable list of 1970s bands that are still around today. The example will illustrate the hierarchical nature of the bands mentioned by showing the name of the band followed by a list of roles performed by each particular member.

1. Begin by adding a new Web form to the ControlPotpourri Web site. Name it UseTreeView.

2. Pick up a TreeView from the toolbox and add it to the default page. You'll find it under the Navigation controls.

3. Visual Studio presents a number of options you can apply to the TreeView. Select the Auto Format option. Visual Studio presents a dialog box showing a number of styles for the TreeView. Browse through a few of them, highlighting them to see what the styles look like. The following graphic shows the local menu which you may use to bring up the AutoFormat dialog box.

   

4. After selecting a style for the TreeView, select the Edit Nodes task. You may edit the nodes by right-clicking on the TreeView control and selecting Edit Nodes from the local menu. From this dialog box you may edit each of the nodes. The leftmost button adds new root nodes. In this example, the bands are represented as root nodes. The next button over is for adding child nodes. You may nest these nodes as deeply as necessary. In this example, the second layer of nodes represents the members of the bands, and the third layer represents their roles. The following graphic show the TreeView node editor.

   

5. Add a border around the TreeView using the Border property.

6. Build the project and browse to the page. You should be able to expand and contract the nodes. After running the page, take a quick look at the ASPX source code to see how the TreeView manages its nodes. The following graphic shows how the TreeView appears in the browser.

   

7. To make it a bit more interesting, add some functionality to handle some of the tree node events. First add a label to show the selected node. Name the label LabelSelectedNode so that you have programmatic access to it. Add a TextBox to show information about the selected node. Make the TextBox multiline. Then add an event handler for the SelectedNodeChanged event. Add code to interrogate the selected node to list information about the child nodes.

   protected void TreeView1_SelectedNodeChanged(object sender, EventArgse)
   {
      this.LabelSelectedNode.Text = "Selected Node changed to: " +
      this.TreeView1.SelectedNode.Text;
      TreeNodeCollection childNodes = this.TreeView1.SelectedNode.ChildNodes;
      if (childNodes != null)
      {
      this.TextBox1.Text = "";
         foreach(TreeNode childNode in childNodes)
         {
            this.TextBox1.Text += childNode.Value + "/n";
         }
      }
   

   }
   

   The following graphic shows how the selected details appear in the ListBox.

   

   This is just a small illustration of what the TreeView is capable of doing. In addition to building nodes using the designer, you may build them programmatically. You may expand and contract nodes as well. Finally, the TreeView supports databinding, allowing you to throw a hierarchical data structure at the control so it will render properly for you.

   Finally, let's take a look at ASP.NET 2.0's MultiView and View controls.