Click here to Skip to main content
Click here to Skip to main content

Creating a Hierarchical Navigation Without Using the Treeview Control

, 15 Jan 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Learn how to bind to web.sitemap and output a hierarchical HTML list for site navigation.

Introduction

The ASP.NET TreeView control is Microsoft's solution for hierarchical web site navigation, but unfortunately, it's not great for public web sites. As a result, we avoid using the ASP.NET TreeView for public web sites. It relies on excessive table layouts, requires a form runat=server, and also needs a large viewstate. Each of these issues can be addressed, but in this article, I present a cleaner, more elegant solution for your hierarchical site navigation.

Using the code

The web.sitemap is a great place to keep the site map information for your site. This solution assumes that you use web.sitemap, but could easily be adapted for other site map providers.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode url="default.aspx" title="Home"  description="Home Page">
      <siteMapNode url="/about/default.aspx" title="About" >
          <!--<span class="code-comment">sitemap for work--></span>
          <siteMapNode url="/about/history/default.aspx" title="History" >
            <siteMapNode url ="/about/history/earlyyears.aspx" title ="The Early Years" />
            <siteMapNode url ="/about/history/modernday.aspx" title ="Modern Day"  />
          </siteMapNode>
          <siteMapNode url="/about/management/default.aspx" title="Management" />
          <siteMapNode url="/about/mission/default.aspx" title="Mission Statement" />
          <siteMapNode url="/about/locations/default.aspx" title="Locations" />
          <siteMapNode url="/products/default.aspx" title="Product Line"   >
            <siteMapNode url ="/products/widgetX2000.aspx" title ="Widget 2000" />
            <siteMapNode url ="/products/widgetX2005.aspx" title ="Widget 2005" />
            <siteMapNode url ="/products/widgetX5000.aspx" title ="Widget 5000 *New*" />
          </siteMapNode>
     </siteMapNode>
  </siteMapNode>
</siteMap>

To output your hierarchical navigation, I recommend the use of ul and li tags. Add style and behavior to your bulleted list by attaching a style sheet and JavaScript library. I recommend looking at Matt Krause's mktree library, which provides a simple to implement solution. This may seem like more work than dragging and dropping some Microsoft controls, and it is, but the upside is your ASP.NET page will produce cleaner, lighter weight code for web visitors. This is why this is a great solution for public websites.

The code that binds to your web.sitemap is very basic, it simply relies on nested Repeaters to bind to the XML.

<asp:XmlDataSource runat="server" DataFile="~/web.sitemap" 
     id="dsXMLSitemap"  XPath="/siteMap/siteMapNode/siteMapNode[@title='About']" />
<div id="divLeftMenu">
      <ul    id="ulLeftMenu" class="mktree">
      
        <asp:repeater DataSourceID="dsXMLSitemap" ID="dlXMLSitemap" Runat="server">
           
          <ItemTemplate>
           <li><a href="<%# XPath("@url")%>">

Optimize with output cache

In order to optimize this code, I recommend adding output caching to your navigation user control. While the work to render out the navigation is not that significant, it still requires I/O and processing. Also, if your web.sitemap file is large, loading that into memory for every hit could take significant resources.

Minor cleanup needed

Looking at the above code, you may notice that the header template and footer template always output the opening and closing ul tags. As a result, even if no nodes are found, you'll have an empty set of tags. The code to fix this is shown below:

public void cleanUpHeader(object source, EventArgs args)
{
    Repeater rpt = (Repeater)source;
    if (rpt.Items.Count == 0)
    {
        rpt.Visible = false;
    }
}

Now, simply add an event handler on your Repeaters.

<asp:repeater ID="Repeater1" DataSource='<%# XPathSelect("siteMapNode") %>' 
              Runat="server" OnPreRender="cleanUpHeader">

History

  • 1.0 - Initial article released.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Seth-B
Chief Technology Officer
United States United States
Seth Berger is a Technology Director at WHITTMANHART Interactive. At WHITTMANHART he develops and manages large .NET projects for some of the world's most successful companies. He is skilled in a large number of languages and development environments but his primary focus is on ASP.NET development, and has worked on it since it was in beta. He previously co-founded Estco Medical, a web development and software company focused on the life-science industry.

Comments and Discussions

 
GeneralWhy "its not great for public web sites" PinmemberHardy28-Jan-08 10:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 15 Jan 2008
Article Copyright 2008 by Seth-B
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid