A Navigation System Comes Easily

Share |

As far as I know, before ASP .NET 2.0, there was not a system of website navigation controls to speak of. Different websites have different navigation styles and execution methods. Many advanced websites have database or XML files for content/navigation management; the others, especially the less dynamic ones, still have hard-coded navigation links. Some websites use topdown menus, some use sidebars; some use collapesable tree menus, some have bread-crumb style path information at the top of every web page. A lot of websites use a combination of all these methods.

 

Asthetics plays an as important role as easy navigation. Some websites build exquisite graphics for every menu item, whereas others employ elaborate style sheets. After all, smooth and appealing navigation to a website equals good communication skills, and that's an asset to a person's career.

No matter the methodology and style, before ASP .NET 2.0, coding a dynamic navigation system required considerable planning, skills, and lots of work. Some developers simply purchased a commercial DHTML menu to save the headache.

Now, with the introduction of the new navigation controls of ASP .NET 2.0, building a navigation system for a complicated website becomes a systematic, easy-to-manage process.

The following section shows you how to use the three navigation controls in ASP .NET 2.0: TreeView, Menu, and SiteMapPath.

Create a web.sitemap File

The foundation upon which the three navigation controls rested is an XML file called web.sitemap that maps the structure of a website. It resides in the application's root directory. The SiteMap file has two elements: siteMap and siteMapNode. The SiteMap element is the root element; it can have unlimited nested sitemap nodes to mirror a website's hierarchy, but it can have only one top-level SiteMapNode designated for the home page. Each SitemapNode must have one unique URL, so no page can appear in the website more than once. The common attributes of a SiteMapNode are URL, description, title, and role. The last attribute, "role," is used to indicate a page's accessibility because not all pages are created nor treated equal. For example, you probably would want to hide all admin pages from public eyes.

To create a SiteMap file, choose the Web Site -> Add New File command. You also may start a new file, select its page type as a SiteMap file from the list of file options, and name it web.sitemap.

So, for a simple website that has the structure diagramed as the following:

the web.sitemap file would look like this:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/
                       SiteMap-File-1.0" >
   <siteMapNode url="Default.aspx" title="Home"
                description="Welcome to ASP .NET home">
      <siteMapNode url="About.aspx" title="About Us" description="" >
      <siteMapNode url="Histroy.aspx" title="History" description="" />
      <siteMapNode url="Contact.aspx" title="Contact Us"
                   description="" />
   </siteMapNode>

   <siteMapNode url="Research.aspx" title="Research" description="" />

   <siteMapNode url="" title="Publications" description="" >
      <siteMapNode url="Current.aspx" title="History" description="" >
         <siteMapNode url="Art.aspx" title="Arts and Culture"
                      description="" />
         <siteMapNode url="Qol.aspx" title="Qaulity of Life"
                      description="" />
      </siteMapNode>

      <siteMapNode url="Archive.aspx" title="Contact Us"
                   description="" />
      </siteMapNode>
   </siteMapNode>
</siteMap>

With the SiteMap file created, you now are ready to use the three navigation controls.

 

How to use a TreeView Control

The TreeView control is already supported by ASP .NET 1.x and is most suitable to display a directory-like structure in Windows Explorer's style. It also has been widely used to display the hierarchical structure of XML files. Now, in ASP .NET 2.0, by binding with a web.sitemap file, a TreeView control would be perfect for a hierarchical menu that can be easily expanded and collapsed.

 

A TreeView control can be dragged and dropped to a web form from the navigation group in the toolbox. However, for it to bind with the web.sitemap file you just created, you must create a SiteMapDataSource control.

To create a SiteMapDataSource control, you can click the Smart Tag icon for a navigation control, and choose New Data Source. This brings up the Data Source Configuration wizard. Or, you may simply drag and drop the SiteMapDataSource control from the Data group of the Toolbox.

The ASPX code for a basic TreeView Control:

<asp:TreeView ID="TreeView1" runat="server"
              DataSourceID="SiteMapDataSource1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

The TreeView control supports the Auto Format feature. There are a few a built-in formats, such as Arrows, BulletedList, Contacts, Events, FAQ, Inbox, News, Windows Help, and XP File Explorer. You may choose autoformat by simply right-clicking the TreeView control and selecting autoformat.

The following is the screenshot of a TreeView menu using the XP File Explorer format.

And the ASPX code:

<asp:TreeView ID="TreeView2" runat="server"
              DataSourceID="SiteMapDataSource1"
ImageSet="XPFileExplorer" NodeIndent="15">
   <ParentNodeStyle Font-Bold="False" />
   <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
   <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False"
   HorizontalPadding="0px" VerticalPadding="0px" />
   <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"
   HorizontalPadding="2px" NodeSpacing="0px" VerticalPadding="2px" />
</asp:TreeView >

You also can adjust the TreeControl's appearance properties, such as Backcolor and bordercolor, as well as style properties such as HoverNodeStyle, LeafNodeStyle, and ParentNodeStyle to set individual node's layout and style.

How to Use a Menu Control

Dynamic menus are widely used on many websites, but creating a great-looking, smooth-running one was no easy matter. But now, as you are equipped with the Menu control in ASP .NET, creating a dynamic menu is no more difficult than creating a text label.

Like all controls, you can drag and drop a Menu control to your page; then, you configure the datasource to bind with your website's sitemap file or a specific .xml file. You also may manually add menu items to your menu.

As with the TreeView control, you can apply a pre-existing format to the menu by selecting AutoFormat from the Menu control's smart tag menu. However, there is a very limited number of styles for the Menu control. You also may adjust the various style properties to customize the look and feel of a menu control. You can apply skins and themes to the Menu control. For more information, please read ASP.NET Menu Control Overview.

The following are the screenshot of a horizontal menu and its ASPX code:

<asp:Menu id="menu1" Orientation=Horizontal runat=server
         DataSourceID="siteMapdataSource1" BackColor="#E3EAEB"
         DynamicHorizontalOffset="2"
         Font-Names="Verdana" Font-Size="0.8em" ForeColor="#666666"
                              StaticSubMenuIndent="10px">
   <StaticMenuItemStyle HorizontalPadding="5px"
                        VerticalPadding="2px" />
   <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
   <DynamicMenuStyle BackColor="#E3EAEB" />
   <StaticSelectedStyle BackColor="#1C5E55" />
   <DynamicSelectedStyle BackColor="#1C5E55" />
   <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
   <StaticHoverStyle BackColor="#666666" ForeColor="White" />
>/asp:Menu>

How to Use a SiteMapPath Control

SiteMapPath is a great tool for users to quickly navigate back to the home page or to its higher-level section menu. Unlike TreeView and Menu Control, it does not use a SiteMapDataSource control and cannot be bound to other datasource. By default, it will be directly linked to the web.sitemap file for the each page's path information. However, you also may define a SiteMapProvider from which the SiteMapPath can retrieve data.

The ASPX code for a bareboned SiteMapPath control:

<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>

As you may have guessed, you may apply the few built-in formats for your SiteMapPath. As with all other controls, you can tinker with the many properties to set the appearance and styles of the SiteMapPath control. The SiteMapPath control supports different style settings for different types of nodes. Also, you may apply different skins and themes. In addition, you may design your own template to create a bread crumb path to suit your website's aesthetic needs.

The following is an example of a SiteMapPath using the professional autoformat.

<asp:SiteMapPath ID="SiteMapPath2" runat="server"
                 Font-Names="Verdana" Font-Size="0.8em"
        PathSeparator=" : ">
   <PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" />
   <CurrentNodeStyle ForeColor="#333333" />
   <NodeStyle Font-Bold="True" ForeColor="#7C6F57" />
   <RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" />
</asp:SiteMapPath>

And, another example of a customized SiteMapPath using templates:

<asp:SiteMapPath ID="SiteMapPath3" runat="server">
   <PathSeparatorTemplate>
                <asp:Image ID="Image1" ImageUrl="~/images/arrow.gif"
                  runat="server" GenerateEmptyAlternateText="True" />
   </PathSeparatorTemplate>
   <RootNodeTemplate>
      <img src="images/home.gif" border=0/>
     <a href='<%# Eval("url") %>'><%# Eval("title") %></a>
   </RootNodeTemplate>
   <CurrentNodeTemplate>
      <asp:Label ID="Label2" runat="server" Text='<%# Eval("title") %>'>
      </asp:Label>
   </CurrentNodeTemplate>
</asp:SiteMapPath>

For more details about SiteMapPath control, please read ASP .NET quick start tutorials: SiteMapPath.