10.2. Navigation

Web sites are becoming larger and more complex, and developers are called upon to provide navigational hints and menus to assist visitors avoid "getting lost" and to help visitors find all the features of the site.

Figure 10-6. Page2.aspx

Figure 10-7. Two pages sharing a common master page

The ASP.NET toolset includes a number of controls that facilitate creating both "bread crumbs" (how did I get to this page?) and site maps (how do I find that other page?).

Most of the time, you will want all of these features to be present on every page, and thus master pages are a great asset. If you change the site map or the control, you only have to update the master, and all the other pages are "updated" automatically.

10.2.1. Getting Started with Site Navigation

The most common way to create a site navigation data source is to create an xml file. It is possible to use a database, multiple xml files, and other sources, but for now let's keep things simple.

To begin, create a new web site called SiteNavigation . Right-click on the web site in Solution explorer and choose Add New Item. The Add New Item dialog box appears. Choose Site map and verify that the name provided is Web.sitemap , as shown in Figure 10-8.

Figure 10-8. Creating the sitemap

When you click the button, Add Web.sitemap is added to your web site, and the skeleton of a sitemap is provided for you, as shown in Example 10-1.

Example 10-1. Web.sitemap skeleton

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >     <siteMapNode url="" title=""  description="">         <siteMapNode url="" title=""  description="" />         <siteMapNode url="" title=""  description="" />     </siteMapNode> </siteMap> 

The title attribute defines the text that will be used as the link, while the description attribute will be used in the tool tip.

Replace the contents of Web.sitemap with the sitemap XML shown in Example 10-2.

Example 10-2. Web.sitemap

 <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >    <siteMapNode title="Welcome" description="Welcome" url="~/welcome.aspx">       <siteMapNode title="Writing" description="Writing"          url="~/Writing.aspx">          <siteMapNode title="Books" description="Books"             url="~/Books.aspx">             <siteMapNode title="In Print Books"                description="Books in Print"             url="~/BooksInPrint.aspx" />             <siteMapNode title="Out Of Print Books"                description="Books no longer in Print"             url="~/OutOfPrintBooks.aspx" />          </siteMapNode>          <siteMapNode title="Articles" description="Articles"             url="~/Articles.aspx" />       </siteMapNode>       <siteMapNode title="Programming"          description="Contract Programming"          url="~/Programming.aspx">          <siteMapNode title="On-Site Programming"             description="On-site contract programming"             url="~/OnSiteProgramming.aspx" />          <siteMapNode title="Off-Site Programming"             description="Off-site contract programming"             url="~/OffSiteProgramming.aspx" />       </siteMapNode>       <siteMapNode title="Training"          description="On-Site Training"          url="~/OnSiteTraining.aspx">          <siteMapNode title="C# Training"             description="C# Training"             url="~/TrainCSharp.aspx" />          <siteMapNode title="ASP.NET Training"             description="ASP.NET Training"             url="~/TrainASPNET.aspx" />          <siteMapNode title="Windows Forms Training"             description="Windows Forms Training"             url="~/TrainWinForms.aspx" />       </siteMapNode>       <siteMapNode title="Consulting"          description="Consulting"          url="~/Consulting.aspx">          <siteMapNode title="Application Analysis"             description="Analysis"             url="~/ApplicationAnalysis.aspx" />          <siteMapNode title="Application Design"             description="Design"             url="~/ApplicationDesign.aspx" />          <siteMapNode title="Mentoring"             description="Team Mentoring"             url="~/Mentoring.aspx" />       </siteMapNode>    </siteMapNode> </siteMap> 

The sitemap file has a single <sitemap> element that defines the namespace:

     <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > 

Only one SiteMapNode (in this case, Welcome) may be nested within the sitemap element. Nested within that SiteMapNode, however, can be any number of children SiteMapNode elements.

In Example 10-2, there are four such children: Writing, Programming, Training, and Consulting. Nested within each of these SiteMapNode elements may be more nodes. For example, Writing has both Books and Articles. You may nest arbitrarily deep. The Books node has nested within it nodes for books in print and books no longer in print.

ASP.NET is configured to protect files with the extension .sitemap so that they can not be downloaded to a client (web browser). If you need to use a different extension, be sure to place your file in the protected App_Data folder.

10.2.2. Setting Up the Pages

To experiment with the sitemap, right-click on the project and choose Add New Item. Create a master page for this application named MasterPage.master (the default name offered by Visual Studio 2005), as shown in Figure 10-9.

Figure 10-9. Adding a master page

From the Toolbox, drag a SiteMapDataSource control from the Data tab, onto the master page. By default, the SiteMapDataSource control will look for and use the file named Web.sitemap.

Add all the navigation controls to the master page outside the contentPlaceHolder because you want them to be displayed on every page.

Make sure you are in Design view and drag a treeView control from the navigation panel onto the form, (again, outside of the Content area). Click on its smart tag and set the data source to the SiteMapDataSource control you just created, as shown in Figure 10-10.

Figure 10-10. Creating the TreeView

To take control of the layout of the various elements on the master page, drag a table control into Source view and set its width to 100%. Drag the treeView into the first cell, and drag a SiteMapPath control into a second cell. Add two <br/> elements after the SiteMapPath and then drag the contentplaceholder control already on the master page into the same cell, as shown in Example 10-3.

Example 10-3. MasterPage.master

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>Liberty Associates, Inc.</title> </head> <body>     <form  runat="server">     <div>         <asp:SiteMapDataSource  runat="server" />         <asp:Table  runat="server" Width="100%" >             <asp:TableRow>                 <asp:TableCell>                    <asp:TreeView  runat="server"                       DataSource />                 </asp:TableCell>                 <asp:TableCell VerticalAlign="Top">                     <asp:SiteMapPath  runat="server" />                     <br /><br />                     <asp:contentplaceholder                         runat="server">                     </asp:contentplaceholder>                 </asp:TableCell>             </asp:TableRow>         </asp:Table>     </div>     </form> </body> </html> 

To test this master page, you'll need to create at least a few of the pages defined in the sitemap. Delete the default page and create a new page named Welcome.aspx. Be sure to check the Select master page checkbox and set the master page to MasterPage.master. Within the content control, add the line of code shown in bold below:

     <asp:Content      ContentPlaceHolder     Runat="Server">         <h1>Welcome</h1>     </asp:Content> 

Create each of the other pages, providing whatever stubbed out data you want, as long as you can tell what page you are on. When you are done, your Solution Explorer should look more or less like Figure 10-11.

Figure 10-11. Solution explorer

Start the application and navigate from the welcome page to another page, e.g., Programming, as shown in Figure 10-12.

Figure 10-12. Off-Site Programming

There are a few things to notice about the Programming page. The treeView was built for you (by reading the XML file through the SiteMapDataSource control, as shown in Figure 10-12). You can see that each node can be collapsed or expanded. When you click on a node (in this case Off-Site Programming), you are brought directly to that page. The bread crumbs, put in place by the SiteMapPath, show you how you got here and how to get back to home.

It is uncommon in production applications to provide both a map and bread crumbs on the same page.

10.2.3. Customizing the Look and Feel

There are a number of properties that you can set for the treeView. To begin with, you may click on the Smart Tag and choose Auto Format... to bring up the Auto Format dialog that offers a series of preset formats for the tree, as shown in Figure 10-13.

In addition, you can click on the TReeView control and then set its properties through the Properties window. Most of the TReeView's properties have to do with the styles used for the various nodes, as shown in Figure 10-14

Some of the most important properties are shown in Table 10-1.

Figure 10-13. TreeView Auto Format

Figure 10-14. TreeView node styles

Table 10-1. TreeView properties

Property	Description
AutogenerateDataBindings	Defaults to true; lets you manually set the bindings between data and tree nodes.
CheckedNodes	Get back a collection of TReeNode objects that contains only those nodes whose checkbox was selected.
ExpandDepth	How many levels should the tree be expanded to.
PathSeparator	Change the character used to delimit the node values.
SelectedNode	Returns the selected treeNode object.
ShowExpandCollapse	Should the expand/collapse indicators be displayed (default = true).

The TReeView has a number of public methods that allow you to poke into the control and pick out specific nodes, or to programmatically change, expand and contract nodes. The most important methods are shown in Table 10-2.

Table 10-2. TreeView methods

Method	Description
CollapseAll	Collapses the entire tree
ExpandAll	Expands the entire tree
FindNode	Retrieves the designated treeNode

Finally, there are a number of events that the treeView control raises that allow you to hook into the user's interaction with the treeView and modify the results. The most important events are shown in Table 10-3.

Table 10-3. TreeView events

Event	Description
SelectedNodeChanged	When a node is selected in the TReeView
treeNodeCollapsed	When a node is collapsed
treeNodeExpanded	When a node is expanded
treeNodePopulate	Fires when a node whose PopulateOnDemand property is set to true is expanded in the treeView (gives you an opportunity to fill in the sub-nodes for that node)

Similarly, the SiteMapPath control can be modified either by using the smart tag to set Autoformatting or by setting properties on the control. Some common tasks include customizing the link style properties (such as RootNodeStyle-Font-Names and RootNodeStyle-BorderWidth). These can be set in the declaration of the control itself. IntelliSense will help; when you press the spacebar while within the declaration of the control, a list of its properties, methods, and events will pop up, as shown in Figure 10-15.

Figure 10-15. Setting SiteMapPath properties

In addition to setting styles for the RootNode you can also set separate styles for the ParentNode, the CurrentNode and the PathSeparator. You can also use the NodeTemplate to customize the style of all the links at once.

In the previous example, the bread crumbs separated the various pages with the greater-than symbol (>). It is easy to add the PathSeparator property to change that to, for example, an arrow:

     <asp:SiteMapPath  runat="server"  PathSeparator="->"  /> 

The result is shown in Figure 10-16.

Figure 10-16. Arrow path separator

10.2.3.1. Limiting the number of links shown

For very "deep" ASP.NET sites, the bread crumbs may become unwieldy. You have the option to limit the number of levels shown by setting the ParentLevelDisplayed property:

     <asp:SiteMapPath  runat="server"  ParentLevelDisplayed="3"  /> 

10.2.4. Populating on Demand

You may decide that you would like your TReeView to populate on demand. That is, rather than loading all the contents of each node when the tree is first shown, and displaying the full tree, you can display, for example, just the first node. As each node is clicked on, it will populate the next level.

To do this, you'll make some simple changes to the master page: First, modify the treeView not to be a self-closing element (you'll be adding content between the opening and closing tags). Also add an attribute to treeView ExpandDepth that you will set to 0 (or whatever zero-based level you want the tree to expand to when loaded).

Within the treeView you'll add a DataBindings element and within that you'll add an ASP:TreeNodeBinding, as shown in Example 10-4.

Example 10-4. Adding Tree Node bindings for Populate On Demand

 <asp:TreeView  runat="server"  DataSource ExpandDepth="0">      <DataBindings>         <asp:TreeNodeBinding DataMember="SiteMapNode" NavigateUrlField="URL"         PopulateOnDemand="true" TextField="Title" />      </DataBindings>  </asp:TreeView> 

Run the application with Welcome.aspx as the first page. The tree is fully closed. Expand it to choose Off-Site Programming. When you get to the page, once again the tree is fully closed, as shown in Figure 10-17.

Figure 10-17. Menu fully closed

The nodes are loaded as you click on each level of the treeView. With a large site map, this can save a bit of memory overhead.