ASP.NET 2.0's site navigation features make it easy to add functionality that helps your users navigate your site. To implement these navigation features you'll use an XML site map file containing the structure of your site. The structure of your site contains all of the pages in the site and how they relate to each other. To add a new site map to your site, select "Add New Item" from the project shortcut menu. Select Site Map from the Add New Item dialog box and accept the default name of web.sitemap
(see Figure 22
|Figure 22: Select Site Map on the Add New Item dialog to create a navigational site map.|
XML file contains two types of XML elements: a single siteMap
and multiple siteMapNodes
. Table 3 describes the structure and attributes of a siteMapNode
Table 3. SiteMapNode Attributes: The table lists and describes SiteMapNode attributes.
Describes where the page is located in the Web site. If the file is located in the application root directory just use the file name (~/benefits.aspx, for example). If the file is located in a subdirectory beneath the application root directory, be sure to include the name of the subdirectory (~/members/reservations.aspx). Each url specified in the site map must be unique.
Specifies the text that will appear in the menu.
Specifies the tooltip text for the item (optional).
ASP.NET resolves the web application root operator (~) to the root of the current application. For example, the URL ~/Images/somepicture.gif
would resolve to http://www.takenote.com/images/somepicture.gif
ASP.NET 2.0 provides three navigation controls that can take advantage of the site map (see Listing 4
). You will find these controls in the Navigation section of the Toolbox.
|Figure 23: The SiteMapPath control displays a bread crumb trail that tracks a user's location in the site.|
|Figure 24: Select Edit Menu Items
to manually configure a menu when not specifying a data source.|
- The SiteMapDataSource control, located on the Data tab in the Toolbox, connects the navigation controls to the site map.
- The SiteMapPath control provides a bread crumb trail to keep the user informed of their location in the site hierarchy (see Figure 23). Selecting the "Auto Format
" option from the SiteMapPath Tasks menu (displayed by clicking the control's smart tag glyph) provides a way to configure the display of the control.
- The Menu control displays a menu horizontally or vertically. You configure the menu direction and create menu items with submenu items below them. Menu items that are always displayed are called static items, while submenus that appear only when the user hovers the mouse over a static menu item are called dynamic menus, and their sub-items as dynamic menu items. Each different menu item type has its own set of associated visual styles, so you can get just the right look and feel for your menus.
You can manually create and maintain menus, or you can bind them to a SiteMapDataSource control. Clicking the smart tag glyph for the Menu control displays the Menu Tasks options. Like the SiteMapPath control, the "Auto Format
" option presents a list of pre-defined visual styles available for the control. The Choose Data Source option defines whether you want to maintain the menu manually or if you want to bind it to a SiteMapDataSource. Leave the data source as None
and click on "Edit Menu Items
" to manually configure the menu. Using the Menu Item Editor (see Figure 24
) you add root items and child items below them. The Text
property for a menu item specifies the text to appear in the menu. The NavigateURL
property specifies where to redirect users when they click a menu item. Menus bound to a SiteMapDataSource display menu items that reference the nodes defined in the site map pointed to by the SiteMapDataSource control.
event fires when the user clicks a menu item and provides an opportunity for you to code an event handler. In the code below, e.Item
refers to the item the user clicked:
Protected Sub Menu1_MenuItemClick( _
ByVal sender As Object, _
ByVal e As
System.Web.UI.WebControls. MenuEventArgs) _
Dim Message As String = e.Item.Text
The TreeView control provides a hierarchical display of information. While this example uses it as a navigational control, you can use the TreeView control to display information from a wide variety of data sources including XML files, strings, or from data retrieved from a database. Within the Treeview control each individual item is called a node
. A TreeView control has three types of nodes:
- Root. Top-level node that has no parent node. Root nodes have one or more child nodes.
- Parent. A mid-level node that has a parent node and one or more child nodes.
- Leaf. A bottom-level node that has no child nodes.
You can expand a node by clicking the plus (+
) sign or collapse it by clicking the minus (-
) sign associated with the node.
|Figure 25: Add, remove, indent, and move TreeView items up or down with the TreeView Node Editor.|
You populate the TreeView control similarly to the way you populate a Menu control—by either manually creating and maintaining nodes or binding a TreeView to a SiteMapDataSource control. Clicking the smart tag glyph displays the TreeView Tasks dialog box. The "Auto Format
" option provides a wide variety of predefined formatting options. Use the Choose Data Source option to specify whether you want to maintain the TreeView manually or bind it to a SiteMapDataSource. Leave the data source as None
and click "Edit Nodes
" to configure the TreeView manually (see Figure 25
That should be enough to keep you busy for a while. When you are ready to continue learning more about ASP.NET 2.0, I suggest you explore the data access and data binding capabilities, the caching feature to increase the performance of your site, and working with the portal architecture and associated web parts.