Creating a Hierarchical Navigation Without Using the Treeview Control

• Download source - 1.82 KB

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" >
          <!--sitemap for work-->
          <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.