Site Navigation in ASP.NET 2.0

by Wei-Meng Lee, author of ASP.NET 2.0: A Developer's Notebook
09/13/2004

As your web site grows in complexity, it is imperative that you make the effort to make your site more navigable. A common technique employed by web sites today uses a site map to display a breadcrumb navigational path on the page.

ASP.NET 2.0 comes with the SiteMapPath control to help you in site navigation. The SiteMapPath control is located in the Toolbox under the Navigation category (see Figure 1).

Figure 1. The SiteMapPath control

Building the Sample Application Using a Master Page

To illustrate the new controls available in ASP.NET 2.0 for site navigation, I will build a simple ASP.NET web application using a master page.

First, create a new web site using Visual Studio 2005 Beta 1. Create a new master page (right-click on project name in Solution Explorer and select Add New Item... Select Master Page) and name it "MasterPage.master." Populate the master page with the controls shown in Figure 2 (the actual controls used in this example are not critical to the understanding of this article).

Figure 2. Creating the master page

Add a new XML document to your project and name it Web.sitemap. Populate the file as follows:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
   <siteMapNode title="Home" description="" url="default.aspx">
      <siteMapNode title="CD Bookshelves" description="" 
         url="CDBookshelves.aspx">
         <siteMapNode title="The Networking CD Bookshelf" 
            description="" url="NetworkCD.aspx" />
         <siteMapNode title="The XML CD Bookshelf " 
            description="" url="XMLCD.aspx" />
      </siteMapNode>
      <siteMapNode title="Cookbooks" description="" 
         url="Cookbooks.aspx">
         <siteMapNode title="Access Cookbook" 
            description="" url="Access.aspx"/>
         <siteMapNode title="ASP.NET Cookbook" 
            description="" url="ASPNET.aspx"/>
      </siteMapNode>
   </siteMapNode>
</siteMap>

The Web.sitemap file specifies the logical structure of the site. Hence, add the following new web pages to your project:

• Default.aspx
• CDBookShelves.aspx
• NetworkCD.aspx
• XMLCD.aspx
• Cookbooks.aspx
• Access.aspx
• ASPNET.aspx

All of the above new web pages will inherit from the master page. To inherit from a master page, simple add in the MasterPageFile attribute in the Page directive of each page:

<%@ Page Language="VB"  MasterPageFile="~/MasterPage.master" %>

Using the SiteMapPath Control

ASP.NET 2.0 comes with the SiteMapPath control that allows you to display a breadcrumb navigational link on your site. In the master page, drag and drop the SiteMapPath control (located under the Navigation tab in the Toolbox) and place it under the red navigation bar (see Figure 3).

Figure 3. Adding the SiteMapPath control

The SiteMapPath control will automatically bind itself to the Web.sitemap file in your project. To make the control stand out, set its BackColor property to Yellow (#FFFF80).

Press F5 to run the project. When the pages are loaded, the SiteMapPath control will display the navigation paths (see Figure 4).

Figure 4. The SiteMapPath control in action

To jump to a page directly (say, the Cookbook.aspx page), click on the Cookbooks link.

Using the Menu Control

Besides the new SiteMapPath control, you can also use the new Menu control to display site path information. To see how the Menu control works, drag and drop the Menu control (located under the Navigation tab in Toolbox) and place it under the SiteMapPath control in the master page. In the SmartTag, click on Auto Format... and select the Colorful scheme. Next, select <New data source...> (see Figure 5).

Figure 5. Configuring the Menu control

Select Site Map as the data source and click OK. The Menu control is now bound to the Web.sitemap file and a new SiteMapDataSource control will be created (see Figure 6).

Figure 6. Selecting the data source for the SiteMapPath control

The Menu control supports two display modes: vertical and horizontal. To change the mode, set the Orientation attribute. Figure 7 shows the Menu control displayed in Vertical mode and Horizontal mode, respectively.

You can click on a menu item to jump directly to a page.

Figure 7. The Menu control in action

Pages: 1, 2

Next Page