ASP.NET 4 : Web Site Navigation (part 2) - Building Navigable Web Sites

3. Building Navigable Web Sites

Adding navigation support to a Web site is pretty straightforward. Once you establish the hierarchical layout of the site, use the site map XML file to describe the structure. When that's done, just point any navigation controls you put on the page to the new XML site map file. The navigation controls will then populate themselves and render a navigable Web site. The following example shows how to add navigation support to a Web site and use the ASP.NET navigation controls in the application.

Creating a site map

1. Start Visual Studio and create a new ASP.NET Web application project. The example here is called NavigateMeSite.

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

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

4. 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).

5. 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:

   

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

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

   

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

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

10. Now add a SiteMapPath control to the master page. Apply the XML site map data source to the DataSource property of the SiteMapPath control.

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

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

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

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

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

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