An Overview of ASP.NET s Site Navigation Features

An Overview of ASP.NET's Site Navigation Features

Prior to ASP.NET 2.0, a very common and very time-consuming task for developers was defining their website's structure and implementing the site's navigation. Some developers simply hard-coded their site's structure within the navigational elements; others created database tables or used files to store the site's structure. Developers were left on their own for turning the site's structure into a coherent navigation. Although a number of third-party navigation components were availablemenus, treeviews, breadcrumbs, and the likethere were no built-in ASP.NET Web controls.

Fortunately, these are concerns of the past. ASP.NET now provides a means to specify site structure by creating a site map. The site map is an XML file that defines the logical sections of the site and optionally ties each section to a particular URL. After the site map has been defined, a number of new ASP.NET Web controls can be used to turn the site's structure into a navigation user interface.

By the Way

XML, which stands foreXtensible Markup Language, is a technology for expressing data in a text-based format using elements that can contain attributes and text content, much like the static HTML and Web controls are expressed through the HTML portion of an ASP.NET page. XML documents, however, are more flexible than HTML's syntax, allowing the creator of the XML document to define the document's markup. The ASP.NET site map file defines a special set of elements to express a site's structure.

ASP.NET version 2.0 provides three new navigation Web controls:

• SiteMapPath This Web control provides a breadcrumb, which is a single line of text showing the user her location in the website's structure. For example, at an online bookstore, if a user had drilled down to Visual Studio Hacks, the breadcrumb might look like Home -> Computers -> Programming -> Visual Studio Hacks, with each sectionHome, Computers, and so onrendered as links back to the previous section. A breadcrumb allows the user to quickly see where she is in the site and to navigate back up the logical hierarchy. (Figure 19.7 shows the SiteMapPath control when viewed through a browser.)

• TreeView This Web control provides a hierarchical view of the site's structure. For an online bookstore, the top level would contain the main categoriesComputers, Fiction, History, and so onwhile each of those main categories could be expanded to show subcategories. (Figure 19.8 shows the TreeView control when viewed through a browser.)

• Menu A menu offers the same data as in the treeview, the only difference being in how the data is displayed. The treeview renders as an expandable/collapsible tree, whereas the menu is composed of menu items and submenus. (Consult Figure 19.11 to see the Menu control in action.)

Because the navigation Web controls' contents are rendered based on the page being visited and the site structure defined in the site map, updating the site map immediately updates the navigation controls used throughout the site. That is, if you want to add a new section to your website, simply create the appropriate ASP.NET pages and then tie those new pages into the site map. As soon as these changes are made and saved, the navigation Web controls used throughout the sitethe breadcrumbs, treeviews, and menuswill automatically be updated to include this new section.

Before we can start using the navigation Web controls, we'll first need to define our website's structure using a site map. In the next section we'll create the site map file. In the sections after that, we'll examine each of ASP.NET's three navigation Web controls.