Building Site Navigation Menu using ASP.NET 2.0 and C#

This tutorial will show you how to use SiteMapPath with the Menu control to build up site navigation menu by using ASP.NET 2.0 and C#.NET.

The controls of Menu, SiteMapPath and SiteMapDataSource can generate navigation UI based on navigation data. This data can be stored in XML files, or it can be stored using the provider-based storage capabilities of the Site Navigation feature. This samples demonstrate using the different controls in conjunction with the Site Navigation feature.

At first, you will need to create a file Web.sitemap. The code is as follows:

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode title="Home" url="~/SiteMapPathTreeViewCsharp.aspx" description="Home Page" > <siteMapNode title="Section One" url="~/sectionone.aspx" description="Section One"> <siteMapNode title="First Page" url="~/sectionone/firstpage.aspx" description="Section One - First Page"/> <siteMapNode title="Second Page" url="~/sectionone/secondpage.aspx" description="Section One - Second Page"/> </siteMapNode> <siteMapNode title="Section Two" url="~/sectiontwo.aspx" description="Section Two"> <siteMapNode title="First Page" url="~/sectiontwo/firstpage.aspx" description="Section Two - First Page"/> <siteMapNode title="Second Page" url="~/sectiontwo/secondpage.aspx" description="Section Two - Second Page"/> </siteMapNode> </siteMapNode> </siteMap>

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

Secondly, please build a MasterPage file Site.master. The code is as followw:

<table cellspacing="0" cellpadding="5" border="0" height="80%"> <tr> <td style="width: 100px" valign="top"> <asp:treeview ID="TreeView1" ForeColor="White" DataSourceId="SiteMapDataSource1" NodeIndent="0" NodeStyle-ChildNodesPadding="10" runat="server"> <LevelStyles> <asp:TreeNodeStyle Font-Bold="true"/> <asp:TreeNodeStyle /> <asp:TreeNodeStyle Font-Size="x-small"/> </LevelStyles> <nodestyle forecolor="White" HorizontalPadding="5"/> <SelectedNodeStyle backcolor="lightblue" forecolor="blue" /> <HoverNodeStyle Font-UnderLine="true" /> </asp:treeview> </td> <td style="background-color: white;padding-left:25;padding-top:15" colspan="2" valign="top"> <b>Current Page: </b> <asp:sitemappath id="SiteMapPath1" runat="server" /> &nbsp;<br/> <br /> <asp:contentplaceholder id="MainBody" runat="server" /> </td> </tr> </table> <asp:sitemapdatasource id="SiteMapDataSource1" runat="server" />

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

The front end SiteMapPathMenuNavigationCsharp.aspx page looks something like this:

<%@ Page Language="VB" MasterPageFile="~/Site.master"%> <asp:Content ID="Content1" ContentPlaceHolderID="MainBody" Runat="Server"> This is the home page </asp:Content>

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!