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.
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 |
Description |
|---|
|
Menu
|
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. | |
TreeView
|
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. | |
SiteMapPath
|
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.
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 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 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
|
Name |
Type |
Description |
|---|
|
SiteMapResolve
|
Event |
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. | |
CurrentNode
|
Property |
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. | |
Enabled
|
Property |
Returns a Boolean value indicating whether a site map provider is both specified and enabled in the web.config file. | |
Provider
|
Property |
Returns the default SiteMapProvider for the current site map. | |
Providers
|
Property |
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. | |
RootNode
|
Property |
Returns the SiteMapNode that represents the top-level page of the navigation hierarchy for the site. |
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.
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.)
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
<siteMap>
<providers>
<add siteMapFile="web.sitemap" name="AspNetXmlSiteMapProvider"
type="System.Web.XmlSiteMapProvider, System.Web, Version=4.0.0.0, Culture=neutral,
PublicKeyToken=b03f5f7f11d50a3a" />
</providers>
</siteMap>
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="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
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="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<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="" />
</siteMapNode>
</siteMap>
|
