Building Site Navigation Menu using ASP.NET 2.0 and VB

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 VB.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>

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

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" />

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

The front end SiteMapPathMenuNavigationVB.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 C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!