-
Start Visual Studio and create a new ASP.NET Web application project. The example here is called NavigateMeSite.
-
Notice that Visual Studio creates a new Web site complete with a master page ready to populate with controls. In this case, you place some navigation controls on it. Visual Studio also gives you a Default.aspx page and an About.aspx page.
-
The styles created by Visual Studio make it a bit difficult to read
the menu and navigation controls. Open the file Site.css and modify the hideSkiplink
so that the background color is a light gray rather than the dark blue
one created by Visual Studio. This example uses #C0C0C0 as the
background color for the hideSkiplink style, which is used as the style for the menu background on the master page.
-
Add four pages based
on the master page: a Default page, a products page, a support page,
and a contact page. Visual Studio includes a template for creating
a form based on a master page. For each page you add, right-click the
project node, click Add New Item, and then click Web Form from the
available templates. Be sure the Select Master Page option is selected
and click Add. Populate the pages with content so that you know what
you're looking at when you run the site (simple text placed directly on
the page is fine).
-
Add a new site
map to the project by right-clicking the project in Solution Explorer
and selecting Add New Item and then choosing Site Map from the available
templates. Keep the name Web.sitemap. The following graphic shows the
Visual Studio templates with the site navigation template highlighted:
-
Add the following data to the site map (you can change the URLs if
the names of the page files are different). Simply edit (or overwrite)
the two blank nodes Visual Studio inserted for you:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Home"
description="This is the home page">
<siteMapNode url="~/Products.aspx" title="Products"
description="This is the products page" />
<siteMapNode url="~/Support.aspx" title="Support"
description="This is the support page" />
<siteMapNode url="~/Contact.aspx" title="Contacts"
description="This is the contacts page" />
</siteMapNode>
</siteMap>
-
To see how the site map data works with the site, hook up the main
menu to the new site map. Open the Site.master file in the Designer and
select the navigation
menu control (currently it will have links to the Home and About
pages). Click the arrow in the upper right-hand corner of the menu to
open the menu tasks. Open the drop-down list associated with Choose Data
Source, and then click New Data Source. This activates the Data Source Configuration dialog box. There, set the Menu data source to the default site map file, and then click OK. The following graphic shows how to select a site map data source for the Menu control:
-
Run the site so that you can see the Menu in action. Click some pages on the Menu and notice how your selections navigate you to the correct places.
-
Next add a TreeView to the master page by dragging one from the Toolbox and placing it on the master page. Point the TreeView to the default site map data source. Run the application and see what happens.
-
Now add a SiteMapPath control to the master page. Apply the XML site map data source to the DataSource property of the SiteMapPath control.
-
Add two more pages to the project to display two ways to contact the
business running this site—one to display the physical address of the
business and the other to display other contact information such as
e-mail addresses and phone numbers. First, create two new folders, one
for each page. Name the folders ContactAddress and ContactEmailPhone.
Add the new pages, one per folder. Name the pages ContactAddress.aspx
and ContactEmailPhone.aspx. Be sure these pages use the master page. As
before, to each page add labels or text describing the page so that you
can identify it when the Web application runs.
-
Add two more elements to the site map XML file (web.sitemap) to
reflect these new pages. Nest them so that their parent node is the Contact node:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Home"
description="This is the home page" >
<siteMapNode url="Products.aspx" title="Products"
description="This is the products page" />
<siteMapNode url="Support.aspx" title="Support"
description="This is the support page"
ImageURL="supportimage.jpg"/>
<siteMapNode url="Contact.aspx" title="Contacts"
description="This is the contacts page" >
<siteMapNode url="~/ContactAddress/ContactAddress.aspx"
title="Contact using physical address"
description="This is the first contact page" />
<siteMapNode url="~/ContactEmailPhone/ContactEmailPhone.aspx"
title="Contact by email or phone"
description="This is the second contact page" />
</siteMapNode>
</siteMapNode>
</siteMap>
-
Run the Web site and see what effect the changes have. You should see new navigation options appear in the Menu and the TreeView, and the new pages should also be reflected in the SiteMapPath control.
-
Experiment with the SiteMapDataSource properties to see how the Menu and TreeView are affected. For example, SiteMapDataSource.ShowStartingNode turns off the root node (often the "home" page node). SiteMapDataSource.StartFromCurrentNode determines the hierarchical position at which the data source begins producing data.
-
Experiment with the Menu properties to see how the Menu is affected. For example, the Menu.StaticDisplayLevels and MaximumDynamicDisplayLevels determine how much of the data from SiteMapDataSource the Menu displays.
-
Notice how easy it is to add navigation
capability to your Web site. By using the site map file (and underlying
provider-based architecture), you limit the number of places you need
to modify to update site navigation.