To read the article online, visit https://www.4guysfromrolla.com/articles/111605-1.aspx

Examining ASP.NET 2.0's Site Navigation - Part 1

By Scott Mitchell

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.

The site structure of Amazon.com...

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:
  1. Decide how to serialize the site's structure information into a site map, and
  2. 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: 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode attributes>
    <siteMapNode attributes>
      <siteMapNode attributes>
      ...
    </siteMapNode>
    <siteMapNode attributes />
    ...    
    <siteMapNode attributes />
  </siteMapNode>
</siteMap>

Creating the Web.sitemap File
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...) 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/Default.aspx" title="Home">
     <siteMapNode url="~/Books/Default.aspx" title="Books">
       <siteMapNode url="~/Books/Novels.aspx" title="Novels" />
       <siteMapNode url="~/Books/History.aspx" title="History" />
       <siteMapNode url="~/Books/Romance.aspx" title="Romance" />
     </siteMapNode>
     <siteMapNode url="~/Electronics/Default.aspx" title="Electronics" />
     <siteMapNode url="~/DVDs/Default.aspx" title="DVDs" />
     <siteMapNode url="~/Computers/Default.aspx" title="Computers" />
  </siteMapNode>
</siteMap>

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).

A screenshot when viewing the Computers section.

A screenshot when viewing the Romance subsection of the Books section.

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!

Happy Programming!

  • By Scott Mitchell

    Attachments


  • Download the code used in this article

    • Article Information
    Article Title: ASP.NET.Examining ASP.NET 2.0's Site Navigation - Part 1
    Article Author: Scott Mitchell
    Published Date: November 16, 2005
    Article URL: https://www.4guysfromrolla.com/articles/111605-1.aspx

    Copyright 2021 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers