Site Navigation

For navigation between multiple pages on a Website, you can define an XML file that contains the structure of the Website, and use some UI controls to display the navigation options. The controls that are important with navigation are listed in the following table.

Control	Description
SiteMapDataSource	SiteMapDataSource control is a data source control that references any site map data provider. In the Visual Studio toolbox you can find this control in the Data section.
Menu	The Menu control is a control that displays links to pages as defined with a site map data source. The Menu can be displayed horizontally or vertically, and it has many options to configure its style.
SiteMapPath	The SiteMapPath control uses a minimal space to display the current position of a page within the hierarchy of the Website. You can display text or image hyperlinks.
TreeView	The TreeView control displays a hierarchical view of the Website in a hierarchical manner.

In the next Try It Out you add navigation controls to the Website EventRegistrationWeb.

Try It Out – Add Navigation

1. Open the Website EventRegistrationWeb.

2. Add a new Site Map item to the Website. Keep the name Web.sitemap.

3. Change the content of the file as shown:

    <?xml version="1.0" encoding="utf-8" ?> <sitemap xmlns=http://schemas.microsoft.com/AspNet/SiteMap-File-1.0 > <siteMapNode url="Default.aspx" title="Home" /> <siteMapNode url="Register.aspx" title="Register" /> <siteMapNode url="EventList.aspx" title="Events" /> </siteMapNode> </sitemap> 

4. Open the file EventRegistration.master.

5. Add a SiteMapDataSource control to the page.

6. Add a Menu control below the title Registration Demo Web. Set the data source to SiteMapDataSource1.

7. Add a SiteMapPath control.

8. Open the file EventList.aspx in the browser. Notice the menu and the path that displays the position of the current file in the Website.

9. You can add other pages that are referenced in the file Web.sitemap as needed. You just have to reference the same master page to show the defined menus.

How It Works

The structure of the Website is defined by the Web pages listed in the file Web.sitemap. This XML file contains XML <siteMapNode> elements inside a <sitemap> root element. the <siteMapNode> element defines a Web page. The filename of the page is set with the url attribute, the title attribute specifies the name as it should appear on menus. The hierarchy of the pages is defined by writing <siteMapNode> elements as child elements of the page where the link to the children should happen.

The SiteMapDataSource control is a data source control with similarities to the data source controls shown in the previous chapter. This control can use different providers. By default the XmlSiteMapProvider class is used to get to the data. the XmlSiteMapProvider class by default uses the page Web.sitemap, that's why you've never configured this filename. In case you rename the XML file, the siteMapFile property of this provider must be set to a new filename.

With the Menu control you can edit menu items as needed that show up in the ASPX source; or you can add menu items programmatically. The easiest way for adding menu items is by using a site map data source by configuring the data source.