Adding Site Navigation to a Web Site

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.

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

To create a file system Web site

1.     Open Visual Web Developer.

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

3.     Under Visual Studio installed templates, click ASP.NET Web Site.

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

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

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

1.     In Solution Explorer, right-click the name of the Web site, and then click Add New Item.

2.     In the Add New Item <Path> dialog box:

a.     Under Visual Studio installed templates, click Site Map.

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

c.     Click Add.

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

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

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

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

1.     In Solution Explorer, right-click the name of the Web site, and then click Add New Item.

2.     In the Add New Item <Path> dialog box:

a.     Under Visual Studio installed templates, click Web Form.

b.     In the Name box, type Home.aspx, and then click Add.

3.     Switch to Design view.

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

Creating a Navigation Menu Using the TreeView Control

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.

To add a tree-style navigation menu

1.     Open the Home.aspx page.

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

3.     From the Navigation group in the Toolbox, drag a TreeView control onto the page.

4.     On the TreeView Tasks menu, in the Choose Data Source box, click SiteMapDataSource1.

5.     Save the page.

Testing the Tree Style Navigation Menu

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

To test the navigation menu

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

The tree shows two levels of nodes.

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

Displaying Navigation History Using the SiteMapPath Control

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.

To display navigation history

1.     Open the Products.aspx page and switch to Design view.

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

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

Testing Navigation History

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

To test page navigation

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

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

3.     Click Home to return to the Home page.

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

Creating a Navigation Menu Using the Menu Control

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.

To add a menu-style navigation menu

1.     Open the Products.aspx page and switch to Design view.

2.     From the Navigation group in the Toolbox, drag a Menu control onto the page.

3.     On the Menu Tasks menu, in the Choose Data Source box, click NewDataSource.

4.     In the Configure Data Source — <Datasourcename> wizard, click Site Map, and then click OK.

5.     Save the page.

Testing the Menu Style Navigation Menu

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

To test the navigation menu

1.     Close Menu Tasks.

2.     Open the Home.aspx.

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

The tree shows two levels of nodes.

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

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

Combining Site Navigation with Master Pages

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.

To create the master page for navigation

1.     In Solution Explorer, right-click the name of the Web site, and then click Add New Item.

2.     In the Add New Item <Path> dialog box:

a.     Under Visual Studio installed templates, click Master Page.

b.     In the Name box, type Navigation.master, and then click Add.

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

To add navigation controls to the master page

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

This inserts a blank line in front of the ContentPlaceHolder control.

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

3.     By default, the SiteMapDataSource control will use the Web.sitemap file that you created in "Creating a Site Map," earlier in this walkthrough.

4.     Click the SiteMapDataSource control, press RIGHT ARROW, and then press ENTER.

This inserts a blank line under the SiteMapDataSource control.

5.     On the Table menu, click Insert Table, and then insert a table that has one row, two columns, and a width of 100 percent.

6.     From the Navigation group in the Toolbox, drag a TreeView control onto the left cell of the table.

7.     On the TreeView Tasks menu, in the Choose Data Source box, click SiteMapDataSource1.

8.     From the Navigation group in the Toolbox, drag a SiteMapPath control onto the right cell of the table.

9.     In the right cell, click the blank area, and then press SHIFT+ENTER to create a new line.

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

1.     In Solution Explorer, right-click the Home.aspx page, click Delete, and then click OK.

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

3.     In Solution Explorer, right-click the name of the Web site, and then click Add New Item.

4.     In the Add New Item dialog box:

a.     Under Visual Studio installed templates, click Web Form.

b.     In the Name box, type Home.aspx.

c.     Select the Select master page check box.

d.     Click Add.

The Select a Master Page dialog box appears.

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

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

7.     Click inside the Content window.

This is where you can add content for this specific page.

8.     Type Home, and then format the text as Heading 1.

You have created the static text (specifically, the heading) for the Home page.

9.     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 Navigation Controls in the Master Page

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

To test navigation controls in the master page

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

The Products content page is merged with the master

Add Simple Site Navigation

You can use the SiteMapPath, TreeView, or Menu controls to provide a consistent way for users to navigate your Web site.

The SiteMapPath control displays a navigation path, which is also known as a breadcrumb, or eyebrow, that shows the current page location and displays links as a path back to the home page.

Note:

If an .aspx page contains a SiteMapPath control, the .aspx page must be listed in the Web.sitemap file for the control to render.

On a Web page, the SiteMapPath control displays something like the following if the user is browsing the Training page:

Home > Services > Training

The TreeView control displays a tree structure that users can traverse for links to different pages in your site. A node that contains child nodes can be expanded or collapsed by clicking it. When it is first rendered, the TreeView control is fully expanded. On a Web page, the TreeView control displays something like the following:

- Home

   - Services

      + Training

The Menu control displays an expandable menu that users can traverse for links to different pages in your site. A node that contains child nodes is expanded when the cursor hovers over the menu item.

To use these site-navigation controls, you must describe the structure of your Web site in a Web.sitemap file.

To create a Web.sitemap file

1.     Create a file in the root directory of your Web site called Web.sitemap.

2.     Open the Web.sitemap file and add the following code.

	Copy Code
<?xml version="1.0" encoding="utf-8" ?> <siteMap>   <siteMapNode title="Home" >     <siteMapNode title="Services" >       <siteMapNode title="Training" url="~/Training.aspx"/>     </siteMapNode>   </siteMapNode> </siteMap>
Note:
Your Web application will fail if you list a URL that does not exist, or if you list a duplicate URL. The url attribute can start with the "~/" shortcut which indicates the application root.

3.     Later in this topic, you will create the Training.aspx page.

4.     Save your file and then close it.

To add site navigation to a Web page

1.     Create a file in the root directory of your Web site called Training.aspx.

2.     Open Training.aspx and add the following code.

C#

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">   <title>Simple Navigation Controls</title> </head> <body>   <form id="form1" runat="server">   <div>   <h2>Using SiteMapPath</h2>   <asp:SiteMapPath ID="SiteMapPath1" Runat="server">   </asp:SiteMapPath>   <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />   <h2>Using TreeView</h2>   <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">   </asp:TreeView>   <h2>Using Menu</h2>   <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">   </asp:Menu>   <h2>Using a Horizontal Menu</h2>   <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"     Orientation="Horizontal"     StaticDisplayLevels="2" >   </asp:Menu>   </div>   </form> </body> </html>

3.     Save and close the file, and then you can view your file in a browser to see how the controls display the navigation structure of your Web site.

Customize the Appearance of SiteMapPath Web Server Controls

The visual appearance of site-navigation controls can be customized by setting the attributes of the control, or by configuring the templates that are available for the control. Templates and styles are applied to links according to two rules of precedence that are described in the Remarks section of SiteMapPath.

The SiteMapPath control displays a navigation path, which is also known as a breadcrumb or eyebrow, that displays links as a path from the current page back to the home page of the Web site. On an ASP.NET page, the SiteMapPath control displays something like the following:

Home > Services > Training

The TreeView and Menu controls also render site-map data, and they, similar to the SiteMapPath control, can be customized like most other Web controls. This topic describes how to use the following customization features of the SiteMapPath Web server control:

·         Specify characters or images that display between the links.

·         Reverse the direction of the navigation path.

·         Specify the number of parent links that are displayed.

The procedures in this topic assume that you have already created a site map and a page that contains a SiteMapPath control. You can use the example Web.sitemap file in ASP.NET Site Maps.

To customize link style properties

1.     In an ASP.NET Web page that contains a SiteMapPath control, add the following properties to the control:

2.      For example, the code for the SiteMapPath control might look like the following:

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"   SkipLinkText="Skip Menu"   RootNodeStyle-Font-Names="Verdana"   RootNodeStyle-ForeColor="Orange"   RootNodeStyle-BorderWidth=2 > </asp:SiteMapPath>

3.     Most of the properties described in the Style and FontInfo classes are available, including the CssClass property.

4.     If you want the style of each link to be different, repeat the previous step with the ParentNodeStyle, CurrentNodeStyle, and PathSeperatorStyle properties of the SiteMapPath control.

To customize a character that displays between links

·         In an ASP.NET Web page that contains a SiteMapPath control, add the PathSeparator property to the control.

For example, the code for the SiteMapPath control might look like the following:

 Your SiteMapPath control will display something like the following:

Home :: Services :: Training

You can use any string to separate the links, however to use an image, follow the next procedure.

To specify an image that displays between links

·         In an ASP.NET Web page that contains a SiteMapPath control, add the following lines of code to the control:

·          For example, the code for the SiteMapPath control might look like the following:

<asp:SiteMapPath ID="SiteMapPath1" Runat="server" >   <PathSeparatorTemplate>     <asp:Image ID="Image1" Runat="Server"       Width="20"       ImageUrl="Images/PathSeparatorImage.jpg" />     </PathSeparatorTemplate>   </PathSeparatorTemplate> </asp:SiteMapPath>

To reverse the direction of the path displayed by the SiteMapPath control

·         In an ASP.NET Web page that contains a SiteMapPath control, add the PathDirection and PathSeparator to the control.

For example, the code for the SiteMapPath control might look like the following:

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"   PathDirection="CurrentToRoot"   PathSeparator=" <-- " > </asp:SiteMapPath>

To limit the number of parent links displayed

·         In an ASP.NET Web page that contains a SiteMapPath control, add the ParentLevelsDisplayed property to the control.

For example, the code for a SiteMapPath control that will display a maximum of two parent links might look like the following:

<asp:SiteMapPath ID="SiteMapPath1" Runat="server"   ParentLevelsDisplayed="2" > </asp:SiteMapPath>