nless your Web site contains only a single Web page, you need a mechanism for visitors to navigate between pages. For most sites, navigation is right up there with content in term of its importance to your site’s success. And there are several different ways of coding one’s navigation. But ASP.NET 2.0, with several new navigation controls, introduces perhaps the easiest way to date.

These new controls are:

• SiteMapDataSource?A control that represents a site map. A site map basically describes the logical structure of a Web site and the relationship between the pages in a Web site.
• SiteMapPath?A visual control that shows “bread-crumb” information depicting the path to the current page.
• Menu?A visual control that displays information in menu form. The Menu control supports data binding to a site map.
• TreeView?A visual control that displays information in a hierarchical structure. The TreeView control supports data binding to a site map.

An earlier article, “A La Carte: Make Highly Customized Menus with Ease in ASP.NET 2.0” shows a sample project using only the Menu control. In this article, I’ll show you a very simple, high-level example that demonstrates the basics of all four controls.

Creating the Site Map
To see how to implement the controls in ASP.NET, create a new Web site project in Visual Studio 2005. In Solution Explorer, add a site map by right-clicking on the project name and selecting Add New Item -> Site Map. A site map is an XML document describing the logical structure of a Web site.

Listing 1 contains some sample code to populate the site map. Its primary structure is a series of elements.

There are four attributes to each element in Listing 1:

• title?The text to display in each node of a SiteMapPath, TreeView, or Menu control.
• description?The ToolTip text to display when the mouse hovers over a node in a SiteMapPath, TreeView, or Menu control.
• roles?Indicates the role(s) for which this node is to be displayed. For example, you can choose to display a node only if the user is in a particular role, such as Administrators. This is useful in cases where you want to restrict unauthorized users from seeing options not relevant to them.
• url?The URL to navigate to when a node in a SiteMapPath, TreeView, or Menu control is clicked.

Next, add a new Master Page to your project. A Master Page is a template page from which all other pages in a Web site can visually inherit. Populate the Master Page with an image, a SiteMapPath control, and a placeholder for content, as shown in Figure 1. You can locate the SiteMapPath control from the Navigation tab in the Toolbox (see Figure 2). The Master Page is the ideal page on which to place the SiteMapPath control as all controls placed in this page are visible in every other page that inherits from it. Hence, the site navigation path displayed by the SiteMapPath control is visible in all pages.

Figure 1. Populating the Master Page: Putting a SiteMapPath control on the master page makes it available on all pages that inherit from the master page.

?

Figure 2. Location, Location: Expand the Navigation menu to expose the SiteMapPath and Menu controls.

Once the Master Page is completed, add a new Web Form to the project and name it Main.aspx. Check the “Select master page option” and click OK (see Figure 3). In the next screen select the Master Page (MasterPage, master) you created earlier. This will ensure that the “bread crumb”?the SiteMapPath control?and the header image will appear on all subsequent pages you build.

Figure 3. Choose Your Master: Be sure to check the box for “Select Master Page” for your Web form.

Main.aspx will be the home page for the sample Web site. It will appear as “Windows Mobile Home” in the breadcrumb. Populate the Main.aspx page with something simple, such as a text heading and a graphic, as shown in Figure 4. It doesn’t really matter what specific content you choose for the pages; as you would expect, the navigation controls will work regardless of what your Web pages contain. However, the names of the pages you create for this sample are not arbitrary. The SiteMapPath control will organize your pages into the proper hierarchical structure using the information you provide in the Web.sitemap file (Listing 1).

Now add another new Web Form, using the same process as before and name it Windowsmobileoverview.aspx. Again, populate the form, roughly, with a text heading and a graphic (see Figure 5).

Figure 4. The Main.aspx Page: Put something simple on your main.aspx page. In this case I’ve used a header and a graphic.

?

Figure 5. The Windowsmobileoverview.aspx Page: This page will be a lower page in the site hierarchy for my test site.

The SiteMapPath control reads the content of the Web.sitemap file (Listing 1) and, when the code is compiled, it will display the site navigation path accordingly. To test the pages of your sample app, press Ctrl-F5 and load the Main.aspx and Windowsmobileoverview.aspx pages. The navigational path should appear as shown in Figure 6.

Figure 6. Testing the SiteMapPath control: In this image, you can see the “bread crumb” function working, as each page shows its place in the navigation hierarchy.

Note that in ASP.NET 2.0 Beta 1, there is only one site map provider: XmlSiteMapProvider. The XmlSiteMapProvider reads site map information from a predefined XML document; by default it is Web.sitemap.

If you need to change the default name of the site map file, you can do so via the Web.config file. The code below shows how to deregister the default XmlSiteMapProvider and register the same one with a different site map name, in this case, My.sitemap.

Customizing the SiteMapPath Control
The default view of the SiteMapPath control displays the navigation path using the string contained in the title attribute of the element in the site map file (Listing 1). Each navigation path is separated by the “>” character.

Figure 7. Enhanced Bread Crumb: Customizing the look and feel of the SiteMapPath control.

You can customize the look and feel of the SiteMapPath control by adding style information to it. For example, you can add images or enhanced text. The following code overrides the default path separator by using an Image control. It also highlights the current path using a light green background color.

Figure 7 shows what the SiteMapPath control looks like with the above modification.

TreeView and Menu Controls
The SiteMapPath control is just one of several controls in ASP.NET 2.0 that can display site navigation information. In this part of the article, I’ll discuss the TreeView and Menu controls.

The TreeView control is best used in very large or very deep sites, where users may frequently need to move quickly among top-level and low-level pages. Unlike static or bread crumb navigation, it allows the user to manipulate the navigation view. In this example, we are adding a TreeView to the existing SiteMapPath control so that both the tree and the bread crumb are used.

Figure 8. TreeView: Add a new data source to the right side of the table that informs the TreeView control on the left of the Master Page.

To build a TreeView, begin by adding a 1×2 table to the Master Page by going to Layout -> Insert Table. Add a TreeView control to the left cell of the table and move the ContentPlaceHolder control into the right cell (see Figure 8). In the Smart Tag of the TreeView control, select “” and select Site Map.

For the sake of this sample, I’ll just apply the MSDN autoformat (to find it, select Autoformat on the Smart Tag of the TreeView control) to the TreeView control and I’ll set the BackColor property of the TreeView control to Gray (#E0E0E0). The Master Page should look like Figure 9. Note that a SiteMapDataSource control is automatically added to the page (because you selected Site Map as the new data source earlier). The SiteMapDataSource control will automatically map to the Web.sitemap file.

Press Ctrl-F5 to compile your work and see the TreeView control in action. You should now be able to navigate among all the pages in your site by selecting the items in the TreeView control (see Figure 10).

Figure 9. The TreeView Control: Using the TreeView control and the MSDN autoformat, you can mimic the menu of MSDN as a test.

?

Figure 10. Testing the TreeView Control: The TreeView pulls index information from the same file as the SiteMapPath (bread crumb) control, but it allows the user to manipulate the menu and navigate a deep site more efficiently.

A Menu control is like a TreeView in that it lets the user drill down to lower levels of pages in a deep site quickly. The main difference is that lower levels in the menu hierarchy “fly out” horizontally with the Menu control, in a similar style to the DevX navigation bar. A TreeView expands and contracts in a vertical fashion and remains expanded until the user closes a root. For this example, I will simply add a Menu control to the existing Master Page, without removing the TreeView or SiteMapPath controls first. Obviously, for a real Web site, you’d want to choose one type.

The Menu control is found in the Standard tab of the Toolbox. Add one to the Master Page and apply the “Colorful” autoformat to change its look (select Autoformat in the Smart Tag of the Menu control). In the Smart Tag of the Menu control, select SiteMapDataSource1 as its data source so that its content can be obtained from the SiteMapDataSource1 control (see Figure 11). The SiteMapDataSource1 control was added in automatically when the TreeView control was configured and contains the site map information (Web.sitemap) given in Listing 1.

To test the Menu control, press Ctrl-F5. You should now be able to navigate the site using the Menu control (see Figure 12).

Figure 11. Adding a Menu Control to the Master Page: You need to select a data source for the Menu control.

?

Figure 12. Testing the Menu Control: The Menu control adds “fly out” style navigation to your site.

Note that the Menu control supports two orientations: horizontal and vertical. Change the Orientation property of the Menu control from horizontal to vertical to observe the changes (see Figure 13).

Accessing Site Map Information Programmatically
If you are not using a SiteMapPath control, you can still programmatically access site map information through the Site Map API (found in the System.Web.SiteMap namespace). The following code segment shows how to display site navigation information programmatically:

Figure 13. Changing Orientation: In this screen shot the orientation of the Menu control has been changed to vertical. Compare with the horizontal orientation in Figure 12 to see the difference.

Partial Class MasterPage_masterSub Page_Load(ByVal sender As Object, _              ByVal e As System.EventArgs) _              Handles Me.Load        Dim myCurrentNode As SiteMapNode        '---Gets the current node        myCurrentNode = SiteMap.CurrentNode        '---displays the navigational path---        Dim path As String = myCurrentNode.Title        While myCurrentNode.ParentNode IsNot Nothing            myCurrentNode = myCurrentNode.ParentNode            path = " > " & path            path = myCurrentNode.Title & path        End While        Response.Write(path)    End SubEnd Class

Besides the CurrentNode property, you can also access site information using:

• SiteMap.CurrentNode.ParentNode
• SiteMap.CurrentNode.PreviousSibling
• SiteMap.CurrentNode.RootNode
• SiteMap.CurrentNode.NextSibling

In this article, you have seen the various new controls in ASP.NET 2.0 that support site navigation. Site navigation is an important feature of user-friendly Web sites. And having a variety of ways to represent the navigation will allow you to choose the one that best fits the content and the user needs of your site. Remember, a Web site with lots of information is useless without a good navigational mechanism to let users find what they need. Be sure to take plenty of time to experiment with these important new controls and think about how best to apply them in your site.