ASP.NET Website Navigation

Views: This article has been read 99423 times.
Abstract: Instructions on how to set up ASP.NET navigation in your ASP.NET Web application; describing the various settings made in the Web.sitemap and web.config files and in the ASP.NET TreeView control.

ASP.NET Website Navigation

ASP.NET uses an ASP.NET site map provider to display Website menus, and authorization controls to protect certain Web pages based on user roles. The following is an outline of the locations of navigation settings and controls:

  • Web.sitemap Settings
  • web.config Settings
  • TreeView Control
  • SiteMapPath Control

Web.sitemap

The ASP.NET Website menu is driven by an xml file named Web.sitemap. This file is located in the application’s root directory. The Web.sitemap file is based on the ASP.NET SiteMap class, which is an in-memory representation of the navigation structure for the Website. Whenever a new menu is needed, xml tags representing this new menu must be added to Web.sitemap. The menu’s title, description (hover-over text), and roles are placed between the <siteMapNode></siteMapNode> tags. If the menu is part of a higher-level menu, the menu’s site map nodes need to be nested within the site map nodes of the higher-level menu.

In the following code, the <siteMapNode></siteMapNode> tags are used to specify the “Articles” menu. The “title” attribute specifies what the menu should display, in this case, “Articles”. The position of the <siteMapNode></siteMapNode> tag within the hierarchy of other <siteMapNode></siteMapNode> tags will determine whether or not the menu will be placed above or below or within other menus.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" roles="*" title="Articles" description="Menu of articles">
        <siteMapNode url="~/Article1.aspx" roles="User" title="Article 1" description="The first article">
    </siteMapNode>
</siteMap>

web.config Settings (Site Map Provider)

In order for the site map service to work with Web.sitemap (the datasource), a setting is made in web.config, as shown in the following code. This setting registers the provider (XmlSiteMapProvider) and specifies the provider’s datasource or site map file (siteMapFile="Web.sitemap"). The XmlSiteMapProvider class generates the Website’s site map tree from Web.sitemap, which is an XML file. During runtime, the provider acts as an interface between the site map service and Web.sitemap.

The securityTrimmingEnabled="true" setting is a security trimming, which restricts the visibility of site map nodes based on users' role memberships. Internally, the provider’s methods that retrieve nodes from Web.sitemap, call the provider's virtual IsAccessibleToUser method to determine whether nodes can be retrieved.

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
 <providers>
  <add name="XmlSiteMapProvider" description="Default SiteMap provider." type="System.Web.XmlSiteMapProvider" siteMapFile="Web.sitemap" securityTrimmingEnabled="true"/>
 </providers>
</siteMap>

TreeView Control

An ASP.NET 2.0 TreeView control is declared in the master page file. This control is used to display hierarchical data in a tree structure. Menu information is bound to the Web.sitemap file by setting the TreeView’s property DataSourceID to "dsSiteMapData". This points to a SiteMapDataSource control on the same page. This control was configured to use Web.sitemap as its databasource when the instance of the TreeView control was created. The TreeView control contains several attributes that display the menu information according to specific formatting and behavior referenced from a cascading style sheet (StyleSheet.css) and the control’s properties.

<asp:SiteMapDataSource ID="dsSiteMapData" runat="server" />

<asp:TreeView
     ID="NavTree" runat="server" 
     DataSourceID="dsSiteMapData" 
     CssClass="NavTree" 
     NodeIndent="0" ImageSet="Arrows" ExpandDepth="2">
     <ParentNodeStyle CssClass="NavTreeParent" />
     <HoverNodeStyle CssClass="NavTreeHover" />
     <NodeStyle CssClass="NavTreeNodes"/>
     <RootNodeStyle CssClass="NavTreeRoot" ForeColor="White" ChildNodesPadding="1px" />
     <LeafNodeStyle CssClass="NavTreeLeaf" HorizontalPadding="1px" />
     <SelectedNodeStyle CssClass="NavTreeSelected" />
</asp:TreeView>

SiteMapPath Control (Website’s “Breadcrumbs”)

A SiteMapPath control is used usually at the top of a Website to display “breadcrumbs” in each Web page. This shows the user where they are at in the Website’s hierarchy. For example, if the user is in a Web page named "Contact", which is a subdirectory of "Home", the breadcrumb will display “Home> Contact”. The SiteMapPath control automatically binds itself to the Web.sitemap file, which contains the Website’s navigation information. These breadcrumbs are hyperlinked to provide an additional navigational tool for the user. This is due to the RenderCurrentNodeAsLink set to “True”.


<div id="navigationbreadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" RenderCurrentNodeAsLink="True">
</asp:SiteMapPath>
</div>

By Todd Paholsky