If you want to create a menu organized by hierarchy in ASP.Net 2.0, you can use a TreeView Navigation control, whose menu you can populate three different ways. This tutorial explains how to populate the menu using two of those ways.
ASP.Net 2.0 offers a TreeView Navigation control that allows you to display a hierarchical menu. The TreeView’s menu items can be populated:
declaratively
via an XML datasource
through a database datasource.
In this tutorial we’ll explore populating a TreeView control declaratively and through an XML datasource. The code in this tutorial runs in an ASP.Net web site project. Our goal is to create the menu in figure 1:
If your web site is relatively small and stable then it’s probably safe to declaratively populate the TreeView. Use the declarative method if the menu is not likely to ever change. The navigation nodes will be placed directly inside the TreeView declaration. Figure 2 shows the minimum code required to create a TreeView. We’ll define the nodes where the figure says “[menu items are declared here]”:
The TreeView declaration itself is pretty simple: the ID and runat are required tags for any web control.
Node Types
The TreeView menu has three node types: Root, Parent and Leaf.
Root nodes have null parent nodes. Shelters and Humane Societiesare root nodes.
Parent nodes have a parent and a child. Local is a parent node.
Leaf nodes have a parent but not a child: Municipal, Private, Mixed, Private and Public are leaf nodes.
To illustrate the differences, let’s color the Root blue, the Parent black and the Leaf red.
Figure 4 shows the Root, Parent and Leaf colored variations.
In this step we’ll add the TreeView nodes. A <nodes> element surrounds the individual nodes. Figure 5 declares the <Nodes> element.
Figure 5: The Nodes Element
Each menu item is an <asp:TreeNode> element. We will use attributes to define the menu item’s navigation address and anchor text. We are purposely using the bare minimum code to show how the TreeView works.
Figure 6: The TreeViews Nodes
Note how the hierarchy is formed in Figure 6. If a node has a child then it does not close the asp:TreeNode tag. First it defines the children and then the TreeNode is closed:
Figure 7: Using the XML Hierarchical Structure to Create TreeView Node Parent-Child Relationships
The Shelters element is not closed, so everything under it is a child node. Each of the child nodes is closed, so the hierarchy stops descending for each of them. When the Shelters element is closed, the Parent-Child relationships are complete: Municipal, Private and Mixed are children of the Shelters node.
There are two types of TreeView xml binding: XmlDataSource and SiteMapDataSource. The XmlDataSource allows you to define complex XM for your menu; the SiteMapDataSource gives you the benefit of a pre-defined XML schema.
Binding to an XmlDataSource
There are two major advantages to using an XmlDataSource. First, your can change the XML file without interrupting the rest of the code. The declarative TreeView required editing of the web form. Second, you can create complex menu structures with relatively little code.
There are three components to the TreeView that is mapped to an XmlDataSource:
the TreeView
a datasource
the menu data in an xml file
The datasource is the connection between the TreeView and the XML data. The TreeView points to ds_xml datasource, and the ds_xml datasource points to the therapuppy.xml file containing the menu. See Figure 8.
Figure 8: The TreeView binds to the datasource which references the xml menu
So what is the form of the XML menu file? For our menu it can be any valid XML that names the anchor text and navigation URL. Let’s just make one up (see Figure 9):
Figure 9: The XmlDataSource file can have any valid xml
So if we made up our own XML schema, what will we get running this code? How does the TreeView know what the menu, name and URL fields are? Right now, it doesn’t know what they are. It finds valid XML and binds to it in TreeView fashion:
Figure 10: No connection between the TreeView and its Bindings
We’ll fix this by telling the TreeView how to interpret the XML file. We use the DataBindings mechanism. See Figure 11.
We need to define two fields: the menu anchor text and the navigation URL. In our XML file, these are the name and url attributes of the menu nodes.
So we create a DataBinding that maps the menu name to our anchor text and the menu url to our anchor URL. Again, see Figure 11.
Figure 11: The DataBinding element goes inside the TreeView definition.
Now the TreeView binds the data in those fields to the TreeView, to render an almost correct menu (figure 12):
Figure 12: The TreeNodeBinding Provides Anchor Text and Url
The problem, of course, is the word “root” at the top of our menu. One way to deal with this is to define an XPath statement in datasource. A simple one would instruct the TreeView to navigate to the second level of data in the XML source (figure 13).
Figure 13: XPath Limits TreeView Display
The XPath could also be expressed as “everything at the menu level,” as we want to display all of the menu items and their menu children: XPath="/root/menu."
A new ASP.Net application does not have a web.config file. All of its configuration directives are inherited from the Framework installation machine.config and web.config files. The topmost is machine.config, and web.config overrides it. A web.config file in your application directory will override any settings in your local file.
The path to your global application web.config will look something like this:
Inside that web.config is a siteMap section. It creates a default sitemap file for your web site called “web.sitemap.” We will take advantage of this definition’s XML schema to create the SiteMapDataSource-bound TreeView. See Figure 14.
Figure 14: The Framework’s web.config file creates a default sitemap file
We’ll create a new sitemap file in our project. The default filename is exactly what we want: “web.sitemap.” The file’s template gives us the starter code for the sitemap (figure 15):
The advantage of having a SiteMapProvider is that we don’t need to map the TreeView DataBinding to the XML elements and attributes. The URL is the anchor URL, the title is the menu text and the description is the menu tooltip.
The SiteMapDataSource setup is similar to the XmlDataSource setup, except we have less work to do. The DataFile is presumed to be web.sitemap (Figure 14), and the web.sitemap’s data is already mapped to the URL and text in our menu items. Figure 15 shows the web.sitemap file, and Figure 16 shows the TreeView and datasource that use the web.sitemap data.
Figure 15: The web.sitemap has a Pre-defined Schema
Figure 17: The TreeView that binds to a web.sitemap file doesn’t need to declare its DataBindings or xml DataFile.
As with our XmlDataSource, our output incorrectly shows the root node (figure 18):
Figure 18: The default SiteMapDataSource Displays the Root Node
Unlike the XmlDataSource, the SiteMapDataSource doesn’t have an XPath attribute. Instead, we will set the ShowStartingNode attribute to false (figure 19):
Figure 19: Do Not Show the SiteMapDataSource’s Root Node
<asp:SiteMapDataSource
ShowStartingNode="false"
ID="ds_therapuppy_sitemap"
runat="server"/>
Conclusion
We looked at two ways to populate the ASP.Net 2.0 TreeView control. The declarative method is good for small web sites. The DataSource method is good for separating the menu content from the rest of site. The TreeView is a powerful navigation control that requires very little code to create. We went over the bare minimum constructs to make individual points. The TreeView is a powerful control and worth looking into further.
Any questions? Please ask.
Caroline Bogart is a NH Web Programmer. Bogart Computing, LLC produces web sites, database applications and web applications. Bogart Computing buildsNew Hampshire animal shelter web sites for free. Visit us at:http://www.bogartcomputing.com/website-programming.aspx
/ 37 
Dynamic Sitemap and Navigation in ASP.Net
