Examining ASP.NET 2.0's Site Navigation - Part 2By Scott Mitchell
Any website that is composed of more than one page needs some sort of navigation user interface, which is created in a two-step process. First, the site's logical structure must be defined; then, user interface elements are added to allow the user to move between sections of the site's sturcture. Prior to ASP.NET 2.0, developers were required to tackle both of these steps on their own. With version 2.0, however, ASP.NET provides a simple way to define a site's structure and includes a handful of Web controls designed specifically to display site navigation user interfaces.
In Part 1 of this multi-part series of ASP.NET 2.0's
site navigation features we examined how to create the
Web.sitemap XML site map file and how to display site
navigation information through the site navigation Web controls, which include:
- SiteMapPath, which displays a breadcrumb (Home > Electronics > XBOX)
- TreeView, which displays a collapsible, vertically displayed tree, showing the entire site map hierarchy
- Menu, which displays either a horizontally- or vertically-aligned menu
The Site Map...
The examples in this article use the site map created in Part 1. The precise syntax for the site map XML file can be seen in Part 1 or downloaded at the end of this article. A pictoral representation of the site structure used for these demos can be seen below...
Programmatically Working with the Site Map
A site map is a collection of related site map nodes. Each site map node typically contains a title, URL, and description. The image shown above is an example of a site map, with each box representing a site map node. 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 XML file's specifics were examined in Part 1.)
ASP.NET provides a class called
that offers read-only, programmatic access to the site map.
This class is used internally by the two controls we'll be examining in this article:
- SiteMapPath - renders a breadcrumb based on the page being visited and it's position in the site structure. Specifically,
the SiteMapPath starts from the node returned by the
SiteMap.CurrentNodeproperty and walks up the hierarchy until it reaches the root.
- SiteMapDataSource - this control creates a hierarchical datasource that mirrors the structure of the site map. In order to display site map information in other Web controls, such as the TreeView or Menu, the Web controls don't query the site map directly; rather, they are bound to a SiteMapDataSource control, which handles reading in the site map structure. (We'll examine the SiteMapDataSource control in greater detail in future articles in this series.)
SiteMapclass has two germane properties:
CurrentNode. Both of these properties return
SiteMapNodeclass represents a node defined in the site map and has properties describing the node -
Description- as well as properties that allow for programmatic movement through the hierarchy -
PreviousSibling, and so on.
You can utilize the
SiteMap class in your own ASP.NET pages. For example, we could display Next, Previous, and
Up links in each page by adding three HyperLink controls to the site's master page along with a bit of code that checks to
see if the
CurrentNode has a
(For more information on master pages, refer to A Sneak Peak
at Master Pages in ASP.NET 2.0.)
Specifically, you'd add the following markup to your master page:
The master page's
Page_Load event handler would look something like:
This would add to each page that inherited the master page the three hyperlinks, Next, Up, and Previous, as shown in the screenshot below.
Displaying Breadcrumbs with the SiteMapPath Control
The SiteMapPath control displays a breadcrumb, showing the user their position in the site structure. The output of the SiteMapPath control is determined by three factors:
- The site's structure, as defined by the site map,
- The page being visited, and
- The property values of the SiteMapPath control
urlvalue of a site map node defined in the site map. If a match is found, the control walks up the structure to the root, emitting the following output:
RootNode > ParentNode > ... > ParentNode > CurrentNode. Here
CurrentNodeis the title of the site map node that maps to the URL of the current page request; the
ParentNodes are rendered as hyperlinks if the site map node has a URL value defined in the site map. A SiteMapPath control on the History Books page (
Books/History.aspx) would render as
Home > Books > History, with
Booksrendered as links back to
Books/Default.aspx, respectively. Visiting
Books/Default.aspx, the SiteMapPath renders as just
Home > Books.
Clearly the output of the SiteMapPath is dependent upon both the site map itself and the page being visited. The SiteMapPath's
output can also be customized through the control's properties. There are the standard
ForeColor, and so on - as well as some SiteMapPath-specific
PathDirection- can have one of two values -
RootToCurrent(the default) or
RootToCurrent, the breadcrumb on the History Books page is rendered as
Home > Books > History; with
CurrentToRoot, the output would instead be
History > Books > Home.
PathSeparator- specifies the string used to separate each node in the breadcrumb; defaults to >
RenderCurrentNodeAsLink- a Boolean property that specifies whether or not the
CurrentNodeshould be rendered as a link; defaults to False.
ParentLevelsDisplayed- an integer value that can be set to limit how far up the hierarchy the breadcrumb displays. By default, this property has a value of -1, meaning that there is no limit; setting this to 1 on the History Books page would render the breadcrumb
Books > History.
Homeis not included because the SiteMapPath control only walks up to at most 1 parent level - from History to Book.
ShowToolTips- if a site map node has a description value, the description is shown as a tooltip for each breadcrumb node if this property is set to True (the default).
ForeColor, and so on, for various pieces of the SiteMapPath control. The
NodeStyleproperty can be used to customize the appearance of the nodes in the breadcrumb;
CurrentNodeStylecan be used to further customize the first and last nodes in the breadcrumb. For the artistically inclined, like yours truly, oftentimes the simplest and most aesthetically-pleasing way to format the SiteMapPath control is to use it's Auto Format wizard, which is available through the control's smart tag.
Customizing the Rendered Output with Templates
The SiteMapPath contains four templates that allow for the rendered output to be further customized. Templates allow for a mix of static HTML markup, Web controls, and databinding syntax; if you've used the DataList or Repeater controls before then you're already familiar with templates. Templates in ASP.NET 2.0 are fundamentally the same as templates in ASP.NET 1.x, except that ASP.NET 2.0 introduces some new, more terse syntax for databinding expressions. For example, in ASP.NET 1.x you had to use the syntax
<%# DataBinder.Eval(Container.DataItem, PropertyName) %>to get the value of a column. In ASP.NET 2.0 that old syntax still works, but you can optionally use the shorter version,
<%# Eval(PropertyName) %>. (For more on the databinding enhancements in ASP.NET 2.0 be sure to check out Simplified and Extended DataBinding Syntax in ASP.NET 2.0.)
By default the SiteMapPath renders the root and parent nodes as regular hyperlinks so that when a user clicks the link they are immediately whisked back up the control hierarchy. However, you may want to do some server-side processing before sending the user on their merry way - maybe you want to record where the user is going, or automatically save any changes they made on the page. Such functionality can be accomplished by using a template and having the node rendered as a LinkButton.
For example, if you wanted just the SiteMapPath's root node to be rendered as a LinkButton, you could add a
to the SiteMapPath control with the following markup:
This markup adds a LinkButton control to the SiteMapPath whose
Text property is assigned to the corresponding
Title property. When the LinkButton is clicked a postback ensues and the control's
event fires, triggering the
LinkButton1_Command event handler. The
Url property of
SiteMapNode is passed to this event handler through the
In the event handler you could do whatever server-side processing was needed and then send the user onto the page they