Examining ASP.NET 2.0's Site Navigation - Part 1
By Scott Mitchell
A Multipart Series on ASP.NET 2.0's Site Navigation
This article is one in a series of articles on ASP.NET 2.0's site navigation functionality.
Part 1 - shows how to create a simple site map
using the default XML-based site map provider and how to display a
TreeView and SiteMapPath (breadcrumb) based on the site map data.
Part 2 - explores programmatically accessing
site map data through the SiteMap class;
includes a thorough discussion of the SiteMapPath (breadcrumb) control.
Part 3 - examines how to use base the site map's
contents on the currently logged in user and the authorization rules
defined for the pages in the site map.
Part 4 - delves into creating a custom site
map provider, specifically one that bases the site map on the website's physical, file system structure.
Part 5 - see how to customize the markup
displayed by the navigation controls, and how to create your own custom navigation UI.
Introduction
Any website that is composed of more than one page needs some sort of navigation user interface. A navigation user interface
might be as simple as static hyperlinks to the other pages in the site, or might involve the use of menus or trees.
But before a navigation user interface can be created for a site, the site's logical structure must first be
defined. (This logical structure is often referred to as a site map.)
For example, a website like Amazon.com is arranged into various sections by product line, like Books, Electronics,
Computers, DVDs, and so on. Each of these sections may have sub-sections. Books is broken down into categories like
Accessories, Books on CD, Novels, History, Romance, and so on. Typically, these logical structures form a hierarchy of
sorts. The screenshot below shows an abbreviated version of Amazon.com's site map.
Once the site map has been defined, the site's navigation user interface can be created. At Amazon.com, the main page
lists links to each of the main sections along the left-hand side of the page. Drilling down into a particular section
lists that section's sub-sections on the left. Other navigation user interfaces could be used as well, though: you might
have a tree showing the various sections and sub-sections, or a menu that listed as top-level menu items the sections
like Books, Electronics, DVDs, and so on, with those menu items' submenus containing the respective section's sub-sections.
Prior to ASP.NET 2.0, developers typically rolled their own site navigation solutions. ASP.NET 2.0, however, makes
defining a site's structure and implementing it using common navigation user interface elements a walk in the park.
In this article we'll look at ASP.NET 2.0's site navigation features. Read on to learn more!
Site Navigation in ASP.NET 1.x ASP.NET version 1.x did not provide any built-in site navigation
support; therefore, most developers implemented their own site navigation functionality. In creating their own site navigation
functionality, developers were faced with two challenges:
Decide how to serialize the site's structure information into a site map, and
Implement the navigation user interface elements
For the first challenge, developers needed to decide how to model the site's structure. Would they put the information
in an XML file? Would they add a database table that had the various sections of the site and how they were related?
For sites that supported user accounts, there might be portions of the site that were only accessible to users who
belonged to a particular role. Furthermore, multilingual sites needed to somehow provide translations for the various
site sections.
After deciding what information needed to be saved to represent the site's structure, along with how this information was
going to be serialized (database? XML file? something else?), a developer was still faced with a second challenge - how to
show this site structure to the user. A common navigation user interface element in the menu; however, ASP.NET 1.x doesn't
ship with a built-in Menu Web control, meaning developers were faced with the buy or build delimma.
(For more information on using a menu in an ASP.NET 1.x application, be sure to read
Using Menus in an ASP.NET Web Application.)
To sum things up, implementing site navigation in ASP.NET version 1.x was not a tremendously difficult task, but it
was another task that had to be done. Furthermore, since there was no built-in support for site navigation, each developer
likely came up with his own unique approach, steepening the learning curve for developers new to a project who have to learn
the custom site navigation logic.
Site Navigation in ASP.NET 2.0
Implementing site navigation in ASP.NET 2.0 is a breeze, thanks to the building site navigation features. Internally, ASP.NET
offers a programmatic API that enables the site map to be queried. ASP.NET does not require a particular format
for specifying the site map, although it does provide a default choice that uses an XML-formatted file.
The details on how the site map is seralized can be customized because the site navigation feature of ASP.NET 2.0 uses
the provider model. The provider model, which was discussed in detail in
A Look at ASP.NET 2.0's Provider Model,
enables developers to customize the inner workings of a particular ASP.NET subsystem as long as they
keep the forward-facing API the same.
In short, you can use ASP.NET 2.0's default XML-based method for specifying your
website's site map or, with a bit of code, you can use your existing, custom method, or some other approach.
(This article will examine using the default technique (the XML-based site map); a future article in this series will look at how to
customize the site navigation provider.)
In addition to providing a customizable means to specify site structure, ASP.NET 2.0 ships with a number
of navigation Web controls that make displaying the site map as easy as dragging and dropping a control onto your ASP.NET page:
SiteMapPath -
displays a breadcrumb, showing the end user where he is relative to the site's structure. For example, when visiting
the Novels section on Amazon.com, a breadcrumb would display something like: Home > Books > Novels.
TreeView - displays the site's
structure in a collapsible tree.
Menu - displays the site's structure
using a menu. When displaying site navigation, both the TreeView and Menu controls use the
SiteMapDataSource control to read the contents of the site map.
Underneath the covers, these controls call ASP.NET 2.0's site navigation API. Since the site navigation piece is implemented
using the provider model, the controls are oblivious to the inner details on how the site map is serialized. That is, regardless
of whether you use the default site map or roll your own custom site map logic, the navigation controls can be used to
work against your site map of choice. (Granted, if you want to use a custom site map you do need to create a class that
provides the expected methods and properties for working with the site map; more on this in a future article in this series.)
Defining the Site Map
A site map is made up of a series of related SiteMapNode
objects. The SiteMapNodes are related in such a way as to form a hierarchy (as shown at the beginning of this
article). The hierarchy contains a single root node, which is the sole node in the hierarchy that does not
have a parent node. Each node in the hierarchy represents a logical section of the website. Each section can have a
title, URL, description, and so on, which are modeled by the SiteMapNodes class's properties
(Title, Url, Description, and so on).
The hierarchy of SiteMapNodes objects is how the site map is represented in memory when its examined through
ASP.NET 2.0's site navigation API. This site map, however, must be physically serialized in some manner, such as an XML
file or in a database table. By default, ASP.NET 2.0 provides a default implementation of serializing the site map using
an XML formatted file. To use this technique, you'll need to create an XML file in your web application's root directory
named Web.sitemap that has the following structure:
From Visual Studio 2005 you can easily create this site map file by right-clicking on the website in the Solution Explorer,
choosing Add New Item, and then selecting the Site Map icon. Be sure to leave the filename as Web.sitemap.
The created file has a few <siteMapNode> XML elements similar to the XML snippet shown above.
The <siteMapNode> element's can have a number of attributes. The most common ones are:
title - specifies the title of the section
url - specifies the URL of the section; optional, but if provided, each URL in the site map must
be unique
description - the optional description of the section; used in the alt attribute of the rendered
navigation controls
The <siteMapNode> elements can be arbitrarily nested to any depth; however, the site map must contain
a root <siteMapNode> element. That is, the <siteMap> node must have one and only
one <siteMapNode> element child.
The following site map file shows the site structure for the Amazon.com example examined in the Introduction.
(This file, along with an entire site navigation-enabled ASP.NET 2.0 website you can load on your computer, is included at
the end of this article...)
Displaying the Site Map Using the Navigation Web Controls
Now that we have a site map defined, we're ready to display the site map's data through an ASP.NET page. As aforementioned,
there are three built-in navigation Web controls: the SiteMapPath, the TreeView, and the Menu. Using these controls is
simple - just drag them onto the ASP.NET page and configure the properties to adjust the control's appearance to fit your
site's look and feel.
To demonstrate this, we'll create a master page for the website. As discussed in A
Sneak Peak at Master Pages in ASP.NET 2.0, master pages provide an easy way to define a site-wide template. Since navigation
user interface elements commonly appear on every page in a site, the master page is usually an ideal location for placing
the validation Web controls. Specifically, my master page contains a table with three sections:
A header - here the site's title is displayed ("Welcome to my Website!")
A left pane - here a TreeView control is added, which lists the entire contents of the site map. This allows
the visitor to quickly jump to a particular section of the site.
A main pane - the main pane will contain unique content for each page that implements the master page.
(Note the ContentPlaceHolder control in this main pane.) Additionally, a SiteMapPath control is included at the top
of the main pane, providing a breadcrumb for the user, showing them where they are in the site's structure.
To add the SiteMapPath to the main pane, I simply dragged and dropped the SiteMapPath control from the Toolbox onto
the master page. When adding a TreeView control (or Menu) you need to first add a SiteMapDataSource control to the page;
next, add the TreeView (or Menu) and set its DataSourceID property to the ID of the SiteMapDataSource control
(this can be done through the TreeView's smart tag). The SiteMapDataSource control queries the site map through the site
navigation API and provides the complete site map structure to the TreeView (or Menu) controls.
The following screenshots show the website when visited through a browser. Note that on the left is a TreeView control
listing the entire contents of the site map. Clicking on any node in the TreeView control whisks the user to the
appropriate section. The SiteMapPath control at the top of the main pane shows the user their current location in the
site hierarchy (i.e., Home > Books > Novels).
Conclusion
This article is the first of a series of articles on ASP.NET 2.0's site navigation feature. In this first part we examined
the basics of the site navigation, which involves two steps: defining the site's structure using a site map and implementing
the site map through the use of navigation controls. Fortunately, ASP.NET 2.0 makes both of these processes very simple.
While we've covered the basics of the site map, we've still yet to explore more advanced functionality. For example, using
ASP.NET 2.0's roles feature, you can limit the site's sections so that the sections displayed in the navigation controls
are dependent upon the visiting user's role and the roles defined for the section in the site map file. Additionally, the
site map includes properties to support localization, making it easy to have section titles and descriptions unique
for each language supported by your site. This, as well as a look at how to create a custom site navigation provider, are
all topics we'll cover in future articles!
A Multipart Series on ASP.NET 2.0's Site Navigation
This article is one in a series of articles on ASP.NET 2.0's site navigation functionality.
Part 1 - shows how to create a simple site map
using the default XML-based site map provider and how to display a
TreeView and SiteMapPath (breadcrumb) based on the site map data.
Part 2 - explores programmatically accessing
site map data through the SiteMap class;
includes a thorough discussion of the SiteMapPath (breadcrumb) control.
Part 3 - examines how to use base the site map's
contents on the currently logged in user and the authorization rules
defined for the pages in the site map.
Part 4 - delves into creating a custom site
map provider, specifically one that bases the site map on the website's physical, file system structure.
Part 5 - see how to customize the markup
displayed by the navigation controls, and how to create your own custom navigation UI.
