Displaying a Breadcrumb with the SiteMapPath Control

ASP.NET provides three navigation Web controls for displaying a navigation user interface based on the site's structure defined in a site map: the SiteMapPath, the TreeView, and the Menu. The SiteMapPath control, which is the focus of discussion in this section, displays a breadcrumb, showing the user where in the site he is currently visiting. All three of these controls are available from the Navigation section of the Toolbox (see Figure 19.4).

Figure 19.4. The navigation Web controls can be found in the Toolbox under the Navigation label.

Watch Out!

If you want to work with the SiteMapPathor any of the other navigation Web controls, for that matterit's imperative that a legally formatted site map exist in the root directory and be named Web.sitemap. If you followed along with the steps in the previous section, you should have, at this point, a valid Web.sitemap file in your root directory containing the contents in Listing 19.2.

Did you Know?

Breadcrumbs are especially useful for sites that have a particularly deep structural hierarchy. As users drill down through the levels of hierarchy in a site, they can easily become disoriented. A breadcrumb control shows them where in the hierarchy they are currently visiting and provides a means to quickly move back to a higher level, if necessary.

To add the SiteMapPath control to an ASP.NET page, simply drag it from the Toolbox onto the page. Take a moment to add the SiteMapPath control to the Default.aspx pages in the root directory, in the Technology folder, and the Computers subfolder. When we view the SiteMapPath in the pages' Design views, the SiteMapPath control shows the layout based on the values in the site map. Figure 19.5 shows the Visual Web Developer Design view for Technology/Computers/Default.aspx.

Figure 19.5. The SiteMapPath shows the breadcrumb relative to the current page.

By the Way

If you do not see the SiteMapPath rendered in the Visual Web Developer Design view, as shown in Figure 19.5, one of several things could be awry. If you see a gray box with a warning message, the Web.sitemap file contains invalid XML. Returning to the site map and fixing the specified problems should remedy this situation.

If you see Root Node > Current Node > Parent Node in the Design view, you likely have not created a site map (or you have not named it Web.sitemap and placed it in the root directory). If you have a properly named and placed site map file, go to the View menu and choose Refresh.

At this point we've successfully added three SiteMapPath controls to our ASP.NET website! That sure was easy. Take a minute to try out these three pages in a browser. The SiteMapPath renders just like in the Design view; clicking the links in the breadcrumb whisks you back to the appropriate section. (Refer to Figure 19.7 to see the SiteMapPath control on Technology/Computers/Default.aspx.)

Customizing the SiteMapPath's Appearance

Like most Web controls we've examined throughout this book, the SiteMapPath control has a number of properties that can be used to customize its appearance. These properties can be set manually through the SiteMapPath's properties listed in the Appearances and Styles sections of the Properties window.

To understand how these properties affect the rendered appearance of the SiteMapPath, we first need to discuss the components of the SiteMapPath. The SiteMapPath builds up a list of nodes and path separators. A node is a section in the hierarchy, and the path separator is what separates each node. For example, the SiteMapPath in the Technology/Computers/Default.aspx page has three nodes: Home, Technology, and Computers. Each node is separated by a path separator: >, by default. There are three possible types of nodes:

• Root Node A SiteMapPath contains a single Root Node; it's the node that contains the section at the top of the site map hierarchy. In all pages that use the site map in Listing 19.2, the Root Node is Home.

• Current Node A SiteMapPath contains a single Current Node. The Current Node is the section that corresponds to the page the user is visiting. In the SiteMapPath in the Technology/Computers/Default.aspx page, the Current Node is Computers.

• General Nodes A SiteMapPath contains zero to many General Nodes, depending on the depth of the Current Node in the site map hierarchy. In the Technology/Computers/Default.aspx page, there's a single General Node, Technology.

Table 19.1 lists the SiteMapPath's appearance-related properties, along with a brief description of each one. Some of these properties affect the look and feel of the entire SiteMapPath, whereas others affect particular components of the SiteMapPath, such as just the Current Node or just the path separators.

Table 19.1. The SiteMapPath's Appearance Properties

Property Name	Description
BackColor ForeColor	Specify the background and foreground colors for the entire SiteMapPath.
BorderColor BorderStyle BorderWidth	Indicate the border settings for the SiteMapPath.
CssClass	Specifies the name of the cascading style sheet (CSS) class to be applied to the SiteMapPath's rendered HTML element.
Font	Specifies the font-related settings for the entire SiteMapPath.
PathDirection	Can be one of two values: RootToCurrent (the default) or CurrentToRoot. With RootToCurrent, the breadcrumb is rendered as Root > ... > Current; with CurrentToRoot, it's rendered as Current > ... > Root.
PathSeparator	Specifies the string that separates each node. Defaults to >
RenderCurrentNodeAsLink	Specifies a Boolean value that indicates whether the Current Node is rendered as a link. Defaults to False.
NodeStyle	Specifies the default style for all of the nodes in the breadcrumb. Applies to the Root Node, Current Node, and General Nodes. This and the other style properties have subproperties such as BackColor, ForeColor, Font, and so on.
CurrentNodeStyle	Indicates the appearance settings applied to the Current Node. Any settings here override the NodeStyle settings for the Current Node.
RootNodeStyle	Specifies the appearance settings applied to the Root Node. Any settings here override the NodeStyle settings for the Root Node.
PathSeparatorStyle	Indicates the appearance settings applied to the path separator.

Take a moment to tinker with these properties and note the results in the Design view.

If you don't trust your artistic skills, the SiteMapPath contains an Auto Format option, just like the GridView and DetailsView controls we examined back in Hour 15, "Displaying Data with the Data Web Controls." For some assistance in formatting the SiteMapPath, simply click the Auto Format link in the control's smart tag. Figure 19.6 shows the SiteMapPath's Auto Format dialog box, and Figure 19.7 shows the SiteMapPath control in Technology/Computers/Default.aspx after the Colorful Auto Format setting has been applied.

Figure 19.6. Let the Auto Format dialog box aid you in specifying the SiteMapPath's appearance.

Figure 19.7. The SiteMapPath control when visiting Technology/Computers/Default.aspx.