26. Using ASP.NET Navigation Controls

Overview of Navigation Systems

What is the most overlooked aspect of most sites? If you said it’s the navigational structure, you’re exactly right. Many web designers spend a considerable amount of time creating great-looking graphics and carefully choosing just the right colors, and then they quickly slap down an inefficient site navigation structure.

A good web designer will tell you that content is the most important aspect of any site. I certainly wouldn’t disagree with that, but I’d give navigational structure the same importance as content. After all, what good is great content if your site’s viewers are unable to locate it?

One of the most popular navigation techniques in use today is the hierarchical menu system. You’ve no doubt seen these menus on many sites. When you hover over a particular topic, a menu pops up, allowing you to dig deeper into the site’s content, as shown in Figure 26.1.

Figure 26.1. The menu on the Jimco Books site is implemented using a DHTML menu system. Hover over a topic and you see a menu for that topic.

Other navigational systems are more appropriate for more complex structures. For example, Microsoft’s MSDN site contains an enormous amount of hierarchical content. The sheer volume of content would quickly overwhelm a menu system such as the one shown in Figure 26.1. In these situations, a tree view is a much better system because it is, by nature, hierarchical. As shown in Figure 26.2, the tree view system works perfectly for a site like MSDN.

Figure 26.2. The tree view system is the perfect solution to presenting large amounts of hierarchical information.

Either of these navigation systems is nicely supplemented by a bread crumb system. Remember the story of Hansel and Gretel? Hansel left a trail of bread crumbs along the path so he and Gretel would be able to find their way back to where they started. The bread crumb navigation system got its name from Hansel’s famous technique, and while it didn’t work out so well for Hansel and Gretel, bread crumbs can make a huge difference for your site visitors. Figure 26.3 shows the use of bread crumb navigation on the MSDN site.

Figure 26.3. The bread crumb navigation system used on MSDN lets you easily determine where you’ve been. Each time you dig deeper into the site, a new link is added to the bread crumb navigation system.

You might be asking yourself at this point just how difficult it is to build one or more of these cool navigation systems. With ASP.NET and Expression Web, it’s so easy you likely won’t believe it. ASP.NET offers a Menu control for creating professional menus, a TreeView control for creating tree view-style navigation systems, and a SiteMapPath control for easily creating bread crumb navigation systems. You can use each of these controls without writing any code at all, but they all expose advanced functionality as well for those web designers who are more adept at programming.

Creating a Sitemap File

Chances are that you’re going to want to use a couple of different ASP.NET navigation controls at the same time. For example, you might want to use the Menu control for your navigational menu system and the SiteMapPath control to provide bread crumb navigation links. Imagine the nightmare you’d have to deal with if you had to manage the links in each of those controls manually as your site grows and changes!

Fortunately, ASP.NET allows you to define your site’s navigational structure in one place, and then all the navigation controls automatically read that structure to produce your menu, bread crumb links, and tree view nodes. ASP.NET uses a special XML file called a sitemap file for this purpose.

The code in Listing 26.1 shows a typical sitemap file.

Listing 26.1. A Sitemap File

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
<siteMapNode url="default.aspx" title="Home Page"
  description="Company Web Site Home" />
    <siteMapNode url="software.aspx" title="Software"
  description="Our Software">
            <siteMapNode url="apps.aspx" title="Applications"
description="Software Applications" />
            <siteMapNode url="addins.aspx" title="Add-ins"
description="Software Add-ins" />
    </siteMapNode>

    <siteMapNode url="reviews.aspx" title="Reviews"
description="Software Reviews"/>
    <siteMapNode url="about.aspx" title="About"  description="About Us"/>
        <siteMapNode url="contact.aspx" title="Contact"
  description="Contact Us"/>
    </siteMapNode>

</siteMap>

Notice that a sitemap file has exactly one root siteMapNode. All other siteMapNodes are nested within the root siteMapNode.

The easiest way to use a sitemap file is to save it as web.sitemap in the root directory of your site. As we progress through the rest of this chapter, you get a good idea of how the sitemap file is used to build navigation structure into your site.

Using the ASP.NET Menu Control

As I mentioned previously, hierarchical menus have become the most common navigational element on the Web these days. Almost every site uses them, and it’s pretty safe to say that all the sites operated by the major players use them. That level of popularity has caused enormous growth in the number of software programs that allow nonprogrammers to create and manage powerful navigation systems using menus.

When it comes to implementing a menu system in Expression Web, you have three choices: You can write your own code, you can use a third-party application to generate the code for your menus, or you can use a server-side solution such as the ASP.NET Menu control.

Creating a Test Site

Before we dig deeper into the ASP.NET Menu control, let’s create a site that allows us to experiment with it and other navigation controls in ASP.NET:

1. Create a new site.

2. Delete the home page.

3. Create a new ASPX page.

4. Enter the text Home Page on the page and save it as default.aspx.

5. Create a new ASPX page.

6. Enter the text Software Page on the page and save it as software.aspx.

7. Create a new ASPX page.

8. Enter the text Add-ins Page on the page and save it as addins.aspx.

9. Create a new ASPX page.

10. Enter the text Applications Page on the page and save it as apps.aspx.

11. Create a new ASPX page.

12. Enter the text Reviews Page on the page and save it as reviews.aspx.

13. Create a new ASPX page.

14. Enter the text About Us on the page and save it as about.aspx.

15. Create a new ASPX page.

16. Enter the text Contact Us on the page and save it as contact.aspx.

17. Create a new XML file.

18. Add the code from Listing 26.1 to the file.

19. Choose All Files (*.*) from the Save As Type drop-down.

20. Save the file as web.sitemap.

For more information on creating a site, see Chapter 2, “Creating, Opening, and Importing Sites.”

Adding a Menu Control

The web.sitemap file is a special file that ASP.NET looks for when using navigation controls. If a web.sitemap file exists in the root of the site, ASP.NET uses it automatically to feed the navigation links in the controls you are using. You don’t have to write any code at all. It just happens automatically.

To see what I mean by this, do the following:

1. Open the default.aspx page.

2. Make sure you are in Design View.

3. Place the insertion point below the text you entered on the page.

4. Insert a Menu control onto the page, as shown in Figure 26.4.

Figure 26.4. The Menu control is located in the Navigation section of the ASP.NET controls toolbox.

5. Click New Data Source from the Choose Data Source drop-down in the Menu Tasks dialog, as shown in Figure 26.5.

Figure 26.5. The Menu Tasks dialog makes it easy to configure a Menu control, including connecting it to a sitemap file in your site.

6. Select the Sitemap option in the Data Source Configuration Wizard, as shown in Figure 26.6, and click OK.

Figure 26.6. The Data Source Configuration Wizard allows you to connect controls on your page to data. In this case, we’re connecting the Menu control to the sitemap file we created earlier.

Save the page. At this point, the Menu control is invisible when previewed in a browser. We’ll fix that shortly.

One of the strange things about the ASP.NET sitemap file is that you are required to have exactly one root sitemap node. In the case of Listing 26.1, I created an empty sitemap node to satisfy that requirement. However, that causes the menu to be blank when you browse it.

The problem of a blank menu is easily resolved, but it requires you to go into Code View to fix it:

1. If it’s not already open, open default.aspx.

2. Switch to Code View.

3. Locate the code for the SiteMapDataSource control. It looks like this:

<asp:SiteMapDataSource runat="server" ID="SiteMapDataSource1">

4. Change the code in step 3 to this:

<asp:SiteMapDataSource runat="server"
ID="SiteMapDataSource1"
ShowStartingNode="false">

5. Save the page.

Now browse the page again and you’ll see a menu system displays correctly. However, it’s not very pretty. Right now it consists of only a few text links. Luckily, you have quite a few options for sprucing up the appearance of a Menu control.

Formatting the Menu Control

When it comes to formatting the Menu control, you have several options. You can use the existing AutoFormat feature if you want to format it quickly. You can also use an ASP.NET theme, skin the control using the skinning features of ASP.NET, or use CSS styles.

Using the AutoFormat Feature

The quickest way to format the Menu control for a better appearance is by using the AutoFormat feature available from the Menu Tasks dialog, as shown in Figure 26.7.

Figure 26.7. The Menu Tasks dialog contains a link for the AutoFormat function. This is by far the fastest way to format the Menu control for a better appearance.

Click the AutoFormat link; the AutoFormat dialog appears with four formats, as shown in Figure 26.8. You can remove any existing formatting by selecting the Remove Formatting option from the list. Choose a format you find attractive and click OK to apply it.

Figure 26.8. The AutoFormat dialog contains four formats for the Menu control. The Remove Formatting option allows you to easily remove any previously applied formatting.

Using CSS Styles

The Menu control exposes many properties that can be used to format the control using CSS. The Menu control uses two kinds of styles:

• Dynamic styles—Styles that apply to menu items that aren’t visible by default. These menu items appear when another menu item is hovered over.

• Static styles—Styles that apply to menu items that are visible by default.

To format a Menu control using these styles, use the Tag Properties panel to alter the styles. For example, to change the style of dynamic menu items, change the settings for the DynamicMenuItemStyle property, as shown in Figure 26.9.

Figure 26.9. The DynamicMenuItemStyle property controls the appearance of dynamic menu items. The easiest way to modify it is via the Tag Properties panel.

For more information on the Tag Properties panel, see Chapter 7, “Editing Tag Properties.”

For more information on using CSS, see Chapter 17, “Creating Style Sheets.”

When you choose to automatically format the Menu control using the AutoFormat dialog, you are actually just setting some of the CSS properties of the menu. Open the AutoFormat dialog for the menu and select the Simple scheme. Now look at the properties that have been set in the Tag Properties panel. You should see several of the CSS properties set, as shown in Figure 26.10.

Figure 26.10. The Tag Properties panel shows that selecting an AutoFormat scheme simply presets many of the CSS properties for the Menu control.

You can experiment with the styles available using the Tag Properties panel. Just keep in mind that changing a style for a dynamic item affects only those items that are not initially visible and does not affect the appearance of any items that are visible when the Menu control is first loaded.

Using the ASP.NET TreeView Control

Now that you’ve dug through some of the features of the Menu control and how to use it on a page, you’ll have no trouble at all using the TreeView control. In fact, it’s similar to the Menu control and can use the same sitemap file you used with the Menu control.

To add a TreeView control to your page:

1. Open default.aspx.

2. Place the insertion point where you want the TreeView control to be inserted.

3. Double-click the TreeView control in the toolbox to add it to the page.

4. In the TreeView Tasks dialog, select SiteMapDataSource1 from the Choose Data Source drop-down, as shown in Figure 26.11.

Figure 26.11. The TreeView control uses the same SiteMapDataSource1 used by the Menu control.

Save the page and preview it in your browser. The TreeView control displays links to pages in your site, as shown in Figure 26.12.

Figure 26.12. Once connected to the sitemap file we created earlier, the TreeView control displays links to all your pages in a hierarchical tree. Parent nodes contain a minus button that can be clicked to collapse the nodes beneath them.

Each link in a TreeView control is referred to as a node. There can be several types of nodes in a TreeView control:

• Root node—Each TreeView contains exactly one root node. The root node is the top-level node. There are no nodes above the root node.

• Parent node—A parent node has one or more nodes nested beneath it. In the TreeView control in Figure 26.12, the Software node is a parent node.

• Leaf node—A leaf node is any node that has no child nodes. The only node in Figure 26.12 that is not a leaf node is the Software node.

Notice that the Software node has a minus button next to it that can be clicked to collapse the nodes beneath it. You can then click the plus sign to expand the nodes again.

Formatting the TreeView Control

The TreeView control can be easily formatted using the AutoFormat dialog, just as you did with the Menu control. However, as shown in Figure 26.13, there are many more choices in the TreeView control’s AutoFormat dialog.

Figure 26.13. The TreeView control offers many formatting options in the AutoFormat dialog.

Using the TreeView Control’s Properties

The TreeView control also has several unique formatting properties you can set in the Tag Properties panel.

ExpandDepth Property

The ExpandDepth property controls the number of levels in the TreeViewstyle menu that are initially visible when your page loads. The default value is FullyExpand, which expands all nodes in the TreeView control. However, you can specify any number of levels to expand by default by specifying a number for the ExpandDepth property.

Notice in Figure 26.12 that the Software node is expanded so you can see the Applications and Add-ins nodes. To configure the TreeView so it is fully collapsed, set the ExpandDepth property to 0.

ImageSet Property

As shown in Figure 26.14, the ImageSet property configures the images used in the TreeView control. Notice that the values available for this property reflect the AutoFormat options available in Figure 26.13.

Figure 26.14. The ImageSet property controls the images used for the TreeView control. The values available match the AutoFormat options.

NodeIndent Property

The NodeIndent property configures the number of pixels that nodes are indented. Note that only nodes that are children of other nodes are affected. In the case of the TreeView control we’re using, only the Applications and Add-ins nodes are affected by the NodeIndent property.

ShowCheckBoxes Property

The ShowCheckBoxes property allows you to display check boxes on specific types of nodes. Valid values are None, Root, Parent, Leaf, or All. By showing check boxes for nodes, you can allow users to select multiple nodes in a TreeView control.

The TreeView control in Figure 26.15 has a ShowCheckBoxes property set to Leaf.

Figure 26.15. If you show check boxes on TreeView control nodes, users can select multiple nodes. The ShowCheckBoxes property gives you control over which nodes display check boxes.

ShowExpandCollapse Property

The ShowExpandCollapse property configures whether the plus and minus buttons are displayed for parent nodes. The TreeView control shown previously in Figure 26.12 has the ShowExpandCollapse property set to True.

ShowLines Property

By default, there are no lines connecting nodes in a TreeView control. If you’d like lines to be drawn connecting the nodes, set the ShowLines property to True (see Figure 26.16).

Figure 26.16. The ShowLines property controls the appearance of lines connecting TreeView control nodes.

Using CSS Styles

The TreeView control provides a full range of CSS styles to make formatting with CSS easy. Figure 26.17 shows the CSS properties available for the TreeView control.

Figure 26.17. The Tag Properties panel shows the many CSS styles available when using a TreeView control.

Just as with the Menu control, any AutoFormat options you choose for a TreeView will be applied using the CSS styles for the control. To tweak the configuration of formatting applied using the AutoFormat dialog, use the various style properties for the control.

Using the ASP.NET SiteMapPath Control

The SiteMapPath control improves your site’s navigation by providing users with a bread crumb-style navigation bar, as shown in Figure 26.18.

Figure 26.18. The SiteMapPath control is a convenient way to allow users to easily navigate your site. As a user navigates the site, the SiteMapPath control shows links to where she has been.

Unlike the Menu and TreeView controls, the SiteMapPath control doesn’t require you to configure a data source as long as a web.sitemap file exists in the root of the site. Just drop the control on the page and it automatically uses the data in the sitemap file to create links.

To use the SiteMapPath control, do the following:

1. Open the addins.aspx page.

2. Place the insertion point on the page underneath the text you entered when the page was created.

3. Insert a SiteMapPath control from the toolbox.

That’s all there is to it. After the SiteMapPath control is added to the page, it automatically connects to the sitemap file and displays the appropriate links.

Formatting the SiteMapPath Control

As with the other controls we’ve looked at, the SiteMapPath control can be easily formatted using the AutoFormat dialog available from the SiteMapPath Tasks dialog. The AutoFormat schemes available are identical to the ones available for the Menu control.

In addition to the AutoFormat schemes, you can use several CSS style properties to affect the appearance of your SiteMapPath control, as shown in Figure 26.19.

Figure 26.19. Just as with the other navigation controls, the SiteMapPath control has plenty of CSS style properties you can use to configure the look of the control.

Using SiteMapPath Properties

Several properties affect the behavior and appearance of the SiteMapPath control:

• ParentLevelsDisplayed property—Controls the number of parent nodes displayed. If this value is set to the default value of -1, all parent nodes are displayed.

• PathDirection property—Controls the direction of the SiteMapPath control. The default value is RootToCurrent, which displays the root node at the left and the current location at the far right. The other valid setting is CurrentToRoot, which reverses the order of the nodes.

• PathSeparator property—Configures the character displayed between nodes. The default is the : (colon) character.

The ASP.NET navigation controls make building a powerful and dynamic navigation system easy, and you can do it without writing a single line of ASP.NET code. You can, of course, significantly add to the functionality of these controls with ASP.NET code, but as you’ve seen in this chapter, it’s not necessary to be a programmer to build perfectly functional site navigation with ASP.NET.

Improving Navigation with Master Pages

You’ve seen some powerful navigation features in this chapter. To make the best use of these navigation controls, however, you should consider using them with ASP.NET Master Pages.

For more information on using ASP.NET Master Pages, see Chapter 27, “Using ASP.NET Master Pages and User Controls.”

If you use navigation controls in combination with ASP.NET Master Pages, insert the navigation controls on one page only; ASP.NET automatically adds the controls to all your other pages when the pages are browsed. Using this method makes managing your navigation much more efficient because making a change is as easy as changing one page. Without Master Pages, a navigation change would require you to manually update every page that uses the navigation controls.

Note that you can also use Expression Web’s Dynamic Web Templates if you choose. For a comparison of using Master Pages versus Dynamic Web Templates, see the sidebar “Master Pages Versus Dynamic Web Templates,” Chapter 27.

For more information on using Dynamic Web Templates, see Chapter 19, “Using Dynamic Web Templates.”