When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, November 16, 2005

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.
  • (Subscribe to this Article Series! )

    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!

    - continued -

    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

    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.
  • (Subscribe to this Article Series! )



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article