ASP.NET 4 : Web Site Navigation (part 1) - ASP.NET Navigation Support, Using Navigation Controls

3/27/2013 7:18:22 PM

One of the major issues facing Web site users is figuring out how to move around sites effectively. Web sites are often hierarchical in nature, and pages are sometimes nested several layers deep. Users can find themselves asking such questions as, "Where am I now?" and "Where can I go from here?"

The art of Web site design has progressed far enough that some common navigation idioms are beginning to appear ubiquitously. If you browse a few Web sites hosted on various platforms, you might notice that the sites support a number of different ways to navigate their content. For example, many Web sites include a menu bar across the top of the page that contains links to separate areas on the site. Certain sites include some sort of tree structure to navigate the site. Still others include a "breadcrumb" trail showing users where they are and how to get back to previous pages. ASP.NET supports all these idioms.

1. ASP.NET Navigation Support

ASP.NET navigation support comes in three parts: navigation controls, site map data source, and site map provider architecture. The navigation controls (the Menu, the TreeView, and the SiteMapPath) all can resolve human-readable display names to real URLs to which HTTP requests are sent. The site map data source stores information about a site's hierarchical organization. The site map provider interprets physical data (often in the form of an XML file) and implements a kind of database cursor representing the current position in a site's hierarchy.

Navigation Controls

ASP.NET includes three server-side controls devoted specifically to site navigation: SiteMapPath, Menu, and TreeView. The Menu and TreeView controls both maintain collections of display name/URL mappings. You can edit these collections by hand. In addition, these controls can build hierarchical collections of display name/URL mappings based on information in a site map data source. The SiteMapPath builds its collection of display name/URL mappings solely through a site map data source. Table 1 summarizes the ASP.NET navigation controls.

Table 1. The ASP.NET Navigation Controls

Navigation Control



Interprets the site navigational information contained in the site map XML file and presents it in a menu format. Top-level XML nodes become top-level menu items, with child XML nodes becoming child menu items.


Interprets the site navigational information contained in the site map XML file and presents it in a tree format. The top-level site map XML nodes in this case become higher-level branches in the tree, with child nodes represented as child tree nodes.


Interprets the site navigational information contained in the site map XML file and presents it in a "breadcrumb" format. In this case, only the current XML node's path is displayed (from the root node to the current child node).

All three controls are useful for navigation, but Menu and TreeView are useful outside the context of site navigation. SiteMapPath is designed strictly for navigating the Web site's site map XML file. The Menu control displays items hierarchically and fires events back to the server as the items are selected. The items in the Menu control can also be assigned navigation URLs. TreeView is useful for displaying any hierarchical data source that implements either the IHierarchicalDataSource or the IHierarchicalEnumerable interface, and it also can cause redirects to other URLs (that is, it is useful for site navigation). And, as mentioned earlier, SiteMapPath is meant specifically to be used for Web site navigation.

For shallow Web sites that will probably change very little over time, building a navigation infrastructure from scratch is easy. However, as the complexity of a site increases, so does the difficulty of managing a navigation structure.

When you organize your site and determine the layout of your pages, it's easy to formalize the layout with a master page that includes a menu linking to other pages. The work involves creating the menu and adding the links (through the NavigateUrl property of the menu item). Implementing the navigation infrastructure by hand is easy enough the first time around. However, as your site grows and becomes more complex, having to update the navigation support repeatedly becomes a problem.

Enter ASP.NET navigation and site map support. The main advantage of using ASP.NET navigation support is that you can establish the layout of the site and then represent it using a hierarchical data structure (such as an XML file or even a database table). The Menu, TreeView, and SiteMapPath controls can all point to a site map data source and use the data source to populate themselves. When you plug the site map data source into the navigation controls, the navigation controls use the data source to create the individual links.

After you have established the site map, updating the navigation links simply requires updating the site map. All controls using the site map data source reflect the changes automatically.

XML Site Maps

ASP.NET includes built-in support for navigation using XML files that describe the layout of the site. These are called XML site maps. The ASP.NET default site map support consists of an XML file describing the site layout and the SiteMapProvider that reads the XML file and generates SiteMap nodes to whatever components are listening (for example, a Menu or a TreeView control).

The SiteMapProvider

The SiteMapProvider establishes the base class used by the navigation controls. The ASP.NET default implementation is the XmlSiteMapProvider, which reads the XML file named (by default) web.sitemap.

Although the default XML site map generally works very well, the ASP.NET navigation controls are perfectly happy using data sources generated from other places (rather than the XML data source). For example, you might decide to implement your own site map provider based on data in a database. The XML site map provides basic raw functionality for navigating a site. However, if you want to do something like manage the site map using a schema different from the default XML schema, that calls for designing a custom provider.

The SiteMap Class

The main rendezvous point for the ASP.NET navigation infrastructure is the SiteMap class. To support the navigation infrastructure, the SiteMap class has a set of static methods for managing site navigation. The SiteMap class serves as an in-memory representation of the navigation structure for a site, and its functionality is implemented by one or more site map providers. It's an abstract class, so it must be inherited.

The SiteMap class performs several functions. First, it serves as the root node of the site navigation hierarchy. Second, it establishes the principal site map provider. Finally, it keeps track of all the provider objects that comprise the site map.

The SiteMap contains a hierarchical collection of SiteMapNode objects. Regardless of how the site map data is maintained, the SiteMap is the interface for accessing a site's navigation information.

The ASP.NET default configuration specifies a default site map. However, as with all things configurable in ASP.NET, you can easily override the default configuration to establish a different provider.

The SiteMap class offers only static members. By being static, they enhance performance. In addition, the site map functionality can be accessed at any time in a Web application from a page or even from within a server-side control.

Table 2 describes the properties and sole event the SiteMap class exhibits.

Table 2. SiteMap Events and Properties






The SiteMapResolve event fires when the CurrentNode property is accessed. This enables you to implement custom logic when creating a SiteMapNode representation of the currently executing page without requiring a custom provider implementation.



A SiteMapNode instance that represents the currently requested page in the navigational hierarchy. If there is no node in the XML site map file, the returned value is null.



Returns a Boolean value indicating whether a site map provider is both specified and enabled in the web.config file.



Returns the default SiteMapProvider for the current site map.



Returns a read-only collection of named SiteMapProvider objects that are available to the SiteMap class as specified in the web.config file (because you can specify more than one if you wish). Note that only the default provider is used during initialization, however.



Returns the SiteMapNode that represents the top-level page of the navigation hierarchy for the site.

The SiteMapNode

The SiteMapNode represents the hierarchical elements of the site map, which is to say, each instance of a SiteMapNode represents a page in your Web site. Each node represents an individual page that is located somewhere in the overall Web site navigation hierarchy. When a Web application starts, the SiteMap loads the collection of SiteMapNodes based on the providers that have been configured in your web.config file for that site.

The SiteMapNode includes several useful properties: ChildNodes, Description, HasChildNodes, Key, NextSibling, ParentNode, PreviousSibling, Provider, ReadOnly, ResourceKey, Roles, RootNode, Title, and Url. It also includes several useful methods: GetAllNodes, GetDataSourceView, GetHierarchicalDataSourceView, IsAccessibleToUsers, and IsDescendentOf. You see some of these properties being used in later examples.

2. Using Navigation Controls

When you run Microsoft Visual Studio 2010 and look in the Designer's Toolbox, you can see that ASP.NET includes three controls in the navigation category: Menu, TreeView, and SiteMapPath. This section looks at each in a bit more detail before diving into an example.

The Menu and TreeView Controls

The Menu and TreeView controls can bind to hierarchical data sources implementing IHierarchicalDataSource or IHierarchicalEnumerable. Although they are tailor-made to support site maps, they also work with other data sources. Figure 1 shows the Menu control in action, and Figure2 shows TreeView in action. Both are reading the data from the site map data source to populate themselves.

Menu in action.

Figure 1. Menu in action.

TreeView in action.

Figure 2. TreeView in action.

The SiteMapPath Control

You might have seen user interface (UI) elements similar to the SiteMapPath control on other sites—especially online forms that go several layers deep. The SiteMapPath control shows a trail indicating where the user is in the Web page hierarchy and shows a path back to the top node (kind of like a trail of breadcrumbs). The SiteMapPath is most useful in sites that maintain a very deep hierarchy for which a Menu or a TreeView control would be overwhelmed.

Although the SiteMapPath control is like the Menu and the TreeView controls (the SiteMapPath control reflects the state of the SiteMap object), it does deserve special attention. The SiteMapPath control and the site map data in the provider are tightly coupled. For example, if you leave a page out of your site map and the user somehow ends up on the page (perhaps through some other navigation method), the user will not see the SiteMapPath control on the page. (For this reason, in many cases you find the control embedded in a master page.) Figure 3 shows the SiteMapPath control in action. The Menu underneath the SiteMapPath shown in the figure is there so that the user can navigate the page in detail. (The user would not be able to descend the hierarchy without a Menu or a TreeView.)

SiteMapPath in action.

Figure 3. SiteMapPath in action.

Site Map Configuration

The global configuration settings configure ASP.NET sites to use the default XmlSiteMapProvider. Example 1 shows the configuration information that is part of the default web.config. Of course, as with all things configurable, you can swap in a different site map provider in your own site by modifying the web.config that goes along with your application.

Example 1. Default configuration for the site map data

    <add siteMapFile="web.sitemap" name="AspNetXmlSiteMapProvider"
      type="System.Web.XmlSiteMapProvider, System.Web, Version=, Culture=neutral,
       PublicKeyToken=b03f5f7f11d50a3a" />

In addition to adding the configuration information to web.config, Visual Studio 2010 adds a blank top-level node in the site map, as shown in Example 2.

Example 2. The default site map that is added by Visual Studio 2010

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="" title=""  description="" />
        <siteMapNode url="" title=""  description="" />

Once the site map is added, it's easy to update—for example, to add a few new nodes to the site map, simply edit the file as (XML) text. Example 3 shows an XML site map file with a few extra nodes added.

Example 3. Site map data in XML

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="" >
 <siteMapNode url=""
  title="Navigation Menu"  description="">
  <siteMapNode url="~/Default.aspx"
    title="Home"  description="" />
  <siteMapNode url="~/Products.aspx"
    title="Products"  description="" />
  <siteMapNode url="~/Support.aspx"
    title="Support" description="" />
  <siteMapNode url="~/Contact.aspx"
    title="Contacts"  description="" />
Top 10
3 Tips for Maintaining Your Cell Phone Battery (part 2) - Discharge Smart, Use Smart
3 Tips for Maintaining Your Cell Phone Battery (part 1) - Charge Smart
OPEL MERIVA : Making a grand entrance
FORD MONDEO 2.0 ECOBOOST : Modern Mondeo
BMW 650i COUPE : Sexy retooling of BMW's 6-series
BMW 120d; M135i - Finely tuned
PHP Tutorials : Storing Images in MySQL with PHP (part 2) - Creating the HTML, Inserting the Image into MySQL
PHP Tutorials : Storing Images in MySQL with PHP (part 1) - Why store binary files in MySQL using PHP?
Java Tutorials : Nested For Loop (part 2) - Program to create a Two-Dimensional Array
Java Tutorials : Nested For Loop (part 1)
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular Tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS