Examining ASP.NET 2.0's Site Navigation - Part 1By Scott Mitchell
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
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.
Defining the Site Map
A site map is made up of a series of related
SiteMapNodesare 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
SiteMapNodesclass's properties (
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
Web.sitemap that has the following structure:
|Creating the |
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 |
<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
altattribute of the rendered navigation controls
<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
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.
DataSourceIDproperty 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).
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!