Website Navigation

To make your Website easily accessible a web site menu and its navigation is very important. There is an image view of our website Navigation and Menu.

You want to add a Menu or a Navigation bar to your website. In both cases you need SiteMapDataSource. So how to create a SiteMapDataSource ?

1. Create a new File "WebNav.sitemap" in your Project root directory
2. Add links of your desired pages to it. it will look like this:  

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

<siteMapxmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

    <siteMapNode title="Home" url="Default.aspx">

   <siteMapNode title="Forum" url="Forum/ForumMain.aspx">

     <siteMapNode title="Forum Topics" url="Forum/ForumTopics.aspx">

             <siteMapNode title="Thread Messages" url="Forum/ThreadMessages.aspx"/>

             <siteMapNode title="Create Message" url="Members/Reply.aspx"/>

     </siteMapNode>   

     <siteMapNode title="Fast Code" url="FastCode/Default.aspx" />

      <siteMapNode title="Articles" url="Articles/Default.aspx" />

      <siteMapNode title="Tutorials" url="Tutorials/Default.aspx" />     

      <siteMapNode title="FamilyData" url="Family/Default.aspx" />

    </siteMapNode>

 </siteMap>

Title is a Text of the node whereas URL is the path of the page relative to the root directory. Don’t worry about the Family data link. It will only show to those who have the Family Role in your Members.

For reading about Roles Management read Manage Roles in your Web site using ASP .NET 2.0

How to create a SiteMap Provider?

You need to create a Provider to go next. Open your Web.Config File and enter the following line of tag to it. The SiteMap Tag comes inside the <System.web> </System.web> Tags.

<system.web>

<!----other code---- >

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">

   <providers>

<add name="XmlSiteMapProvider" description="SiteMap provider which reads Web.sitemap" type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="web.sitemap" securityTrimmingEnabled="true"/>

   </providers>                                                       </siteMap>                                                                  </system.web>

If you view the Tool box of Visual studio you will see three Controls. Here we are going to explain all them.

How to create a Website Navigation?

Now, our asp: SiteMapPath will access the Provider directly. It is recommended to use Master Page for a Website Navigation. Otherwise you have to create for each Page a new SiteMap tag.

Depends upon your likeness Insert this Tag in the Header or the Footer of the Master Page. 

<asp:SiteMapPath ID="SiteMapPath1" runat="Server" PathSeparator=" >" RenderCurrentNodeAsLink="true" SiteMapProvider="NavXmlSiteMapProvider" />

Use the SiteMapProvider in your SiteMapPath which you have just created. You can create many SiteMap Navigations as many as you want. For different Navigation you have create a unique set of SiteMap Provider and ASP SiteMap Tag.

How to create a Website Menu?

We need to create a SiteMapDataSource for creating a Menu. A vertical Menu can be compared with an ASP .NET TreeView control.  The SiteMapDataSource works the same it works for a TreeView.

Our SiteMapDataSource Look like this:

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" StartingNodeOffset="0" SiteMapProvider="XmlSiteMapProvider" />

ID is always unique for each SiteMapDataSource as per rule for every ASP .NET Control Whereas, SiteMap Provider is our created Provider which we have already registered in the Web.Config.

Access SiteMapDataSource in the Menu:

<asp:Menu ID="menua" runat="server" DataSourceID="SiteMapDataSource1" CssClass="menua"  Orientation="Horizontal" MaximumDynamicDisplayLevels="2" StaticDisplayLevels="2" />

Menu can be Static, dynamic or you can fix some level of the nodes to static and the following one Dynamic. Normally, as a best practice only the 1^st Level of the menu is kept Static. So you have more space for the website Contents. Also, you can change the Orientation to Vertical if you want to show the menu in the side vertical bar.

In the next example we will show that how we can bind the same DataSource to a TreeView. This will give us a different style.

<asp:TreeView runat="server" ID="subnavTreeview" ExpandDepth="1" MaxDataBindDepth="3"  DataSourceID="SiteMapDataSource1"  NodeIndent="8" ShowLines="True">

<HoverNodeStyle BackColor="White" BorderColor="White" BorderStyle="Solid" Font-Underline="True" />

<SelectedNodeStyle BackColor="White" BorderColor="#888888" BorderStyle="Solid" BorderWidth="1px" Font-Underline="False" HorizontalPadding="3px" VerticalPadding="1px" />

<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="#11518f" HorizontalPadding="5px" NodeSpacing="1px" VerticalPadding="2px" />

</asp:TreeView>

You will notice that this TreeView is identical in the behavior to asp menu Control. But we can have more Control and a better grip over the TreeView Style then an ASP .NET Menu.

If you are interested in viewing some graphical structure of how site navigation and Menu Classes relationship look like then have a look at the following diagram.

(Image taken from MSDN documentation)