Source Code: Build an ASP.NET 2.0 Web Site Navigation System Pt1
Build an ASP.NET 2.0 Web Site Navigation System Part 1
This is part one of a three part article that demonstrates how to build an ASP.NET navigation system. In part one, web pages are added to a web site and then referenced in a ASP.NET 2.0 SiteMap file. In part two an ASP.NET 2.0 Menu control will be tied to the SiteMap file created in part one. In part three an ASP.NET SiteMapPath (bread crumbs menu) will be tied to the SiteMap created in part one and the Menu added in part two.
Getting Started
Create a new web site solution with Visual Studio 2005.
Add a folder named 'SitePages' to the solution.
Add an ASP.NET 2.0 master page to the SitePages folder. Add an HTML table to the master page which includes at a minimum, a column for a left side menu and a row at the top for a 'bread crumbs menu. See the SiteMaster.master page in the source code for an example.
Add folders to the SitePages folder and within the folders add web pages so you have some web pages to reference in the site map file you will later create and edit. See the folders in the example web site's SitePages folder in the source code for ideas. You can keep your Web site's files in any folder structure that is convenient for your application. In the example web site, folders are used to create a hierarchal structure which holds pages that can be used for presenting .NET topics.
Add an ASP.NET 2.0 SiteMap
Right-click the name of the web site in the Visual Studio Solution Explorer and select 'Add New Item...'.
The 'Add New Item' window will open. Select the 'Site Map' template and then click the 'Add' button.
A new site map file named 'Web.sitemap' is added to your web site solution.
Add an ASP.NET 2.0 SiteMapDataProvider control to your master page. View the master page in design mode. Drag a SiteMapDataProvider from the Data tab of the Visual Studio Toolbox and place it just under the HTML table on the master page.
Add References to Site Web Pages to the Web.sitemap File
You must modify the XML in the Web.sitemap file to create a site map for your web site. There is no wizard in Visual Studio for editing the site map XML.
Double-click the Web.sitemap file in your Visual Studio solution. The file will open in an XML code editor within the Visual Studio solution:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
The default XML you see is an example of the format you must follow to create your site map.
A siteMapNode can be nested within another site map node.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMapNode>
</siteMap>
Open and study the Web.sitemap in the article's source code. It demonstrates how to use and nest nodes to build a site map.
Source Code Extract
<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode url="Home.aspx" title="Home" description="Home" roles="">
<siteMapNode url="SitePages/VisualBasic/VisualBasic.aspx" title="Visual Basic" description="Visual Basic" roles="">
<siteMapNode url="SitePages/VisualBasic/Syntax/Syntax.aspx" title="Syntax" description="Syntax" roles="">
<siteMapNode url="SitePages/VisualBasic/Syntax/ClassStatement.aspx" title="Class Statement" description="Class Statement" roles="" />
<siteMapNode url="SitePages/VisualBasic/Syntax/ForEach.aspx" title="For..Each" description="For..Each Statement" roles="" />
</siteMapNode>
</siteMapNode>
<siteMapNode url="SitePages/CSharp/CSharp.aspx" title="CSharp" description="CSharp" roles="">
<siteMapNode url="SitePages/CSharp/Syntax/Syntax.aspx" title="Syntax" description="Syntax" roles="">
<siteMapNode url="SitePages/CSharp/Syntax/ClassStatement.aspx" title="Class Statement" description="Class Statement" roles="" />
</siteMapNode>
</siteMapNode>
<siteMapNode url="SitePages/WindowsForms/Forms.aspx" title="Win Forms" description="Win Forms" roles="">
<siteMapNode url="SitePages/WindowsForms/TabStripMenu.aspx" title="TabStripMenu" description="TabStripMenu" roles="" />
</siteMapNode>
<siteMapNode url="SitePages/WebForms/Forms.aspx" title="Web Forms" description="Web Forms" roles="">
<siteMapNode url="SitePages/WebForms/Menu.aspx" title="Menu Control" description="Menu Control" roles="" />
</siteMapNode>
<siteMapNode url="" title="Search Engines" description="Search Engines" roles="">
<siteMapNode url="http://www.google.com/" title="Google" description="Google" roles="" />
<siteMapNode url="http://www.yahoo.com/" title="Yahoo" description="Yahoo" roles="" />
<siteMapNode url="http://search.msn.com/" title="MSN Search" description="MSN Search" roles="" />
</siteMapNode>
</siteMapNode>
</siteMap>
Modify your site map file, using the article source code as an example of how to edit your site map file. Add a referent to all the web pages in your SitePages folder and its sub folders to your site map file.
About the SiteMap Class
A SiteMap object provides access to read-only site map information via the SiteMapDataSource control. SiteMap objects are used in conjunction with SiteMapDataSource, Menu, and SiteMapPath objects to render a navigation interface for users to navigate a Web site.
The XmlSiteMapProvider class is the default provider for the SiteMap class, which works with an XML configuration file, Web.sitemap. At runtime, an XmlSiteMapProvider object reads the Web.sitemap into a SiteMap object.
Next time:
In part two of this article, an ASP.NET menu will be tied to the Web.sitemap.
For more information:
SiteMap Class
Menu Class
SiteMapPath Class
mike mcintyre http://www.getdotnetcode.com