Walkthrough: Adding Site Navigation to a Web Site

Article
11/16/2012

In any site that has more than just several pages, it can be difficult to construct a navigation system that lets users move freely between pages, especially as you change the site. ASP.NET site navigation lets you create a centralized site map of the pages.

This walkthrough shows you how to configure a site map and how to use controls that rely on the site map to add navigation to pages in the Web site.

During this walkthrough, you will learn how to do the following:

Create a Web site that has example pages and a site-map file that describes the layout of the pages.
Use the TreeView control as a navigation menu that lets users jump to any page in your site.
Use the SiteMapPath control to add a navigation path, also known as a breadcrumb, that enables a user to view and move back up the site hierarchy from the current page.
Use the Menu control to add a navigation menu that lets users view one level of nodes at a time. Pausing the mouse pointer over a node that has child nodes generates a submenu of the child nodes.
Use site navigation and controls on a master page so that you have to define the site navigation only once.

Prerequisites

In order to complete this walkthrough, you will need the following:

Microsoft Visual Web Developer Web development tool.
The .NET Framework.

This walkthrough assumes that you know how to use Visual Web Developer.

Creating a Web Site That Has Example Pages and a Site Map

If you have already created a Web site in Visual Web Developer by completing Walkthrough: Creating a Basic Web Page in Visual Web Developer, you can use that Web site and go to the next section. Otherwise, create a new Web site and page by following these steps.

Creating a File System Web Site

To create a file system Web site

Open Visual Web Developer.
On the File menu, click New Web Site (or on the File menu, click New, and then click Web Site).

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the left-most Location box, click File System, and then in the right-most Location box, enter the name of the folder where you want to keep the pages of the Web site.

For example, type the folder name C:\WebSites\SiteNavigation.
In the Language box, click the programming language that you prefer to work in.

The programming language that you choose will be the default for the Web site, but you can set the programming language for each page individually.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a Site Map

To use site navigation, you need a way to describe how the pages in your site are laid out. The default method is to create an .xml file that contains the site hierarchy, including the page titles and URLs.

The structure of the .xml file reflects the structure of your site. Each page is represented as a siteMapNode element in the site map. The top-most node represents the home page, and child nodes represent pages that are deeper in the site.

To create a site map

In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
In the Add New Item <Path> dialog box:
1. Under Visual Studio installed templates, click Site Map.
2. In the Name box, Make sure that the name is Web.sitemap.
  
  Note
  
  The file must be named Web.sitemap and must appear in the root of the Web site.
3. Click Add.

Copy the following XML content into the Web.sitemap file, overwriting the default contents.

<siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      </siteMapNode>
  </siteMapNode>
</siteMap>

The Web.sitemap file contains a set of siteMapNode elements that are nested to three levels. The structure of each element is the same. The only difference among them is the location within the XML hierarchy.

The URL of the pages that are defined in the sample .xml file is unqualified. This means that all pages are treated as having URLs that are relative to the application root. However, you can specify any URL for a specific page — the logical structure that you define in the site map does not have to correspond to the physical layout of the pages in folders.

Save the file, and then close it.

Creating Pages to Navigate

In this section, you will create only a few of the pages that are described in the site map that you defined in the preceding section. (The site map is more complete so that you will be able to view a full hierarchy when testing the pages in this walkthrough.)

To create pages to navigate

In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
In the Add New Item <Path> dialog box:
1. Under Visual Studio installed templates, click Web Form.
2. In the Name box, type Home.aspx**,** and then click Add.
Switch to Design view.
On the Home.aspx page, type Home, and then format it as a Heading 1.

Repeat this procedure and create four additional pages named Products.aspx, Hardware.aspx, Software.aspx, and Training.aspx. Use the name of the page (for example, Products) as the heading so that you will be able to recognize each page when the page is displayed in the browser.

It is not important which pages you specifically create. The pages that are listed in this procedure are suggestions that will let you see the site hierarchy nested to three levels.

Now that you have a site map and some pages, you can add navigation to your site. You will use the TreeView control to act as a collapsible navigation menu.

vbVenusSiteNavigation_TreeView1 image

Open the Home.aspx page.
From the Data group in the Toolbox, drag a SiteMapDataSource control onto the page.

In its default configuration, the SiteMapDataSource control retrieves its information from the Web.sitemap file that you created in "Creating a Site Map," earlier in this walkthrough, so that you do not have to specify any additional information for the control.
From the Navigation group in the Toolbox, drag a TreeView control onto the page.
On the TreeView Tasks menu, in the Choose Data Source box, click SiteMapDataSource1.
Save the page.

You can now perform an interim test of your navigation system.

Press CTRL+F5 to run the Home.aspx page.

The tree shows two levels of nodes.
Click Products to view the Products page.
- If you did not create a Products.aspx page, click the link for a page that you did create.

In the current state of the Web site, the navigation menu appears only on the Home page. You could add the same SiteMapDataSource and TreeView controls to each page in the application to display a navigation menu on each page. However, later in this walkthrough, you will see how to place the navigation menu on a master page so that the navigation menu automatically appears with every page.

Besides creating a navigation menu by using the TreeView control, you can add navigation on each page that displays where the page is in the current hierarchy. This kind of navigation control is also known as a breadcrumb. ASP.NET provides the SiteMapPath control that can automatically implement page navigation.

Open the Products.aspx page and switch to Design view.
From the Navigation group in the Toolbox, drag a SiteMapPath control onto the page, place the cursor in front of the SiteMapPath control, and then press ENTER to create a new line.

The SiteMapPath control displays the position of the current page in the page hierarchy. By default, the SiteMapPath control represents the hierarchy that is created in the Web.sitemap file. For example, when you display the Products.aspx page, the SiteMapPath control displays the following path:

Home > Products
Repeat this procedure for the other pages that you have created in this walkthrough, except the Home page.

Even if you do not put a SiteMapPath control on each page, for testing purposes you need a control on a page at each level of the site hierarchy (for example, on the Products.aspx and Hardware.aspx pages).

You can test page navigation by viewing pages that are at the second and third levels of the hierarchy.

Open the Home.aspx page, and then press CTRL+F5 to run the page.
Use the TreeView control to move to the Products page.

At the location in the page where you put the SiteMapPath control, you see a path that is similar to the following:

Home > Products
Click Home to return to the Home page.
Use the TreeView control to move to the Hardware page.

This time you see a path that is similar to the following:

Home > Products > Hardware

All page names that are displayed by the SiteMapPath control are links, except the last one, which represents the current page. You can make the current node into a link by setting the RenderCurrentNodeAsLink property of the SiteMapPath control to true.

The SiteMapPath control lets users move back up the site hierarchy, but it does not allow for them to jump to a page that is not in the current hierarchy path.

Besides creating a navigation menu by using the TreeView control, you can use the Menu control to display an expandable navigation menu that lets users view one level of nodes at a time. Pausing the mouse pointer over a node that has child nodes generates a submenu of the child nodes.

Open the Products.aspx page and switch to Design view.
From the Navigation group in the Toolbox, drag a Menu control onto the page.
On the Menu Tasks menu, in the Choose Data Source box, click NewDataSource.
In the Configure Data Source — <Datasourcename> wizard, click Site Map, and then click OK.
Save the page.

You can now perform an interim test of your navigation system.

Close Menu Tasks.
Open the Home.aspx.
Press CTRL+F5 to run the Home.aspx page.

The tree shows two levels of nodes.
Click Products to view the Products page.
- If you did not create a Products.aspx page, click the link for a page that you did create.
On the navigation menu, rest the mouse pointer on the Home link to expand the menu.

In the current state of the Web site, the navigation menu appears only on the Home page. You could add the same SiteMapDataSource and Menu controls to each page in the application to display a navigation menu on each page. However, in the next section of this walkthrough, you will see how to put the navigation menu on a master page so that it automatically appears with each page.

In the pages that you have created up to this point in this walkthrough, you have added site navigation controls individually to each page. Doing this is not especially complex, because you do not have to configure the controls differently for each page. However, it can add to the maintenance costs for your site. For example, to change the location of the SiteMapPath control for pages in your site, you would have to change each page individually.

By using site navigation controls in combination with master pages, you can create a layout that contains the navigation controls in one location. You can then display pages as content within the master page.

In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
In the Add New Item <Path> dialog box:
1. Under Visual Studio installed templates, click Master Page.
2. In the Name box, type Navigation.master, and then click Add.
Switch to Design view.

The master page appears with a default ContentPlaceHolder control.

In the following procedure, you will create a master page with a simple layout for navigation controls. In a real application, you would likely use more sophisticated formatting, but the techniques for using navigation controls on a master page will be similar.

Select the ContentPlaceHolder control, press LEFT ARROW, and then press ENTER.

This inserts a blank line in front of the ContentPlaceHolder control.
From the Data group in the Toolbox, drag a SiteMapDataSource control onto the master page and position it above the ContentPlaceHolder control.

Note

Do not position the SiteMapDataSource control on the ContentPlaceHolder control.

By default, the SiteMapDataSource control will use the Web.sitemap file that you created in "Creating a Site Map," earlier in this walkthrough.
Click the SiteMapDataSource control, press RIGHT ARROW, and then press ENTER.

This inserts a blank line under the SiteMapDataSource control.
On the Table menu, click Insert Table, and then insert a table that has one row, two columns, and a width of 100 percent.
From the Navigation group in the Toolbox, drag a TreeView control onto the left cell of the table.
On the TreeView Tasks menu, in the Choose Data Source box, click SiteMapDataSource1.
From the Navigation group in the Toolbox, drag a SiteMapPath control onto the right cell of the table.
In the right cell, click the blank area, and then press SHIFT+ENTER to create a new line.
Drag the ContentPlaceholder control onto the right cell of the table and position it under the SiteMapPath control.

When you are using a master page, you create the pages in your site as content pages. The content pages use Content controls to define the text and controls that are displayed in the ContentPlaceholder control of the master page. Therefore, you will have to re-create the Home, Products, and Hardware pages as content pages.

To create content pages for the site

In Solution Explorer, right-click the Home.aspx page, click Delete, and then click OK.
Repeat step 1 for the Products.aspx, Software.aspx, Training.aspx, and Hardware.aspx pages, and any other pages you have created.

You will re-create the pages as content pages that use a master page.
In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
In the Add New Item dialog box:
1. Under Visual Studio installed templates, click Web Form.
2. In the Name box, type Home.aspx.
3. Select the Select master page check box.
4. Click Add.
The Select a Master Page dialog box appears.
Under Contents of folder, click Navigation.master, and then click OK.

You have created a content page that is bound to the master page that you created in the preceding section.
Switch to Design view.

In Design view, you see the layout that you created for the master page, with an editable region corresponding to the ContentPlaceHolder1 control on the master page.
Click inside the Content window.

This is where you can add content for this specific page.
Type Home, and then format the text as Heading 1.

You have created the static text (specifically, the heading) for the Home page.
Repeat steps 3 through 8 to create a Products.aspx content page and a Hardware.aspx content page. In step 8, type Products and Hardware, respectively, instead of Home.

Testing with master pages and content pages is the same as testing individual pages.

Open the Products.aspx page, and then press CTRL+F5 to run the page.

The Products content page is merged with the master page. In the browser, you see a page that contains the Products heading and the navigation controls that you added to the master page.
In the TreeView control, click Hardware.

The Hardware page is displayed with the same layout as the Products page, except that the SiteMapPath control displays a different path.

Next Steps

This walkthrough illustrates the basic functionality of ASP.NET site navigation and the navigation controls. You might want to experiment with additional features of navigation. For example, you might want to do the following:

Format the SiteMapPath control to customize its appearance. The control supports many options that manage how the links are displayed. For more information, see SiteMapPath.
Customize the display of the pages in the TreeView control. For example, you might highlight the current page in the tree view node.
Work programmatically with the site-navigation information. A SiteMapPath control is available on the current page, which you can use to programmatically display navigation information.
Use a different data store for the site-map information. Instead of using the default XML site-map file, you might want to use an existing site map or store site-map information in a database. ASP.NET site navigation uses a provider model. You can create a component that manages site-map information, and then configure your application to use that component instead of the default site-map provider. For more information, see ASP.NET Site Navigation Providers.

Share via

Walkthrough: Adding Site Navigation to a Web Site

Prerequisites

Creating a Web Site That Has Example Pages and a Site Map

Creating a File System Web Site

To create a file system Web site

Creating a Site Map

To create a site map

Creating Pages to Navigate

To create pages to navigate

Creating a Navigation Menu Using the TreeView Control

To add a tree-style navigation menu

Testing the Tree Style Navigation Menu

To test the navigation menu

Displaying Navigation History Using the SiteMapPath Control

To display navigation history

Testing Navigation History

To test page navigation

Creating a Navigation Menu Using the Menu Control

To add a menu-style navigation menu

Testing the Menu Style Navigation Menu

To test the navigation menu

Combining Site Navigation with Master Pages

To create the master page for navigation

To add navigation controls to the master page

To create content pages for the site

Testing Navigation Controls in the Master Page

To test navigation controls in the master page

Next Steps

See Also

Tasks

Concepts

Other Resources

Additional resources