Evjen c14.tex V2 - 01/28/2008 2:39pm Page 667 Chapter 14: Site Navigation Figure 14-4 With the use of the PathSeparator attribute or the < PathSeparatorTemplate > element, it is quite easy to specify what you want to use to separate the links in the b readcrumb navigation, but you might also want to give this pipe some visual style as well. You can add a < PathSeparatorStyle > node to your SiteMapPath control. An example of this is shown in Listing 14-4. Listing 14-4: Adding style to the PathSeparator property <asp:SiteMapPath ID="Sitemappath1" runat="server" PathSeparator=" | "> <PathSeparatorStyle Font-Bold="true" Font-Names="Verdana" ForeColor="#663333" BackColor="#cccc66"></PathSeparatorStyle> </asp:SiteMapPath> Okay, it may not be pretty, but by using the < PathSeparatorStyle > element with the SiteMapPath control, we are able to change the visual appearance of the separator elements. The results are shown in Figure 14-5. Figure 14-5 667 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 668 Chapter 14: Site Navigation Using these constructs, you can also add an image as the separator, as illustrated in Listing 14-5. Listing 14-5: Using an image as the separator <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Using the SiteMapPath Server Control</title> </head> <body> <form id="form1" runat="server"> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> <PathSeparatorTemplate> <asp:Image ID="Image1" runat="server" ImageUrl="divider.gif" /> </PathSeparatorTemplate> </asp:SiteMapPath> </form> </body> </html> To utilize an image as the separator between the links, you use the < PathSeparatorTemplate > element and place an Image control within it. In fact, you can place any type of control between the navigation links that the SiteMapPath control produces. The PathDirection Property Another interesting property to use with the SiteMapPath control is PathDirection . This property changes the direction of the links generated in the output. Only two settings are possible for this property: RootToCurrent and CurrentToRoot . The Root link is the first link in the display. This is usually the Home page. The Current link is the link for the page current ly being displayed. By default, this property is set to RootToCurrent . Changing the example to CurrentToRoot produces the results shown in Figure 14-6. Figure 14-6 668 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 669 Chapter 14: Site Navigation The ParentLevelsDisplayed Property In some cases, your navigation may go quite deep. You can see on the site map, shown in Listing 14-1, that you go three pages deep, which isn’t a big deal. Some of you, however, might be dealing with sites that go quite a number of pages deeper. In these cases, it might be bit silly to use the SiteMapPath control. Doing so would display a huge list of pages. In a case like this, you can turn to the ParentLevelsDisplayed property that is part of the SiteMapPath control. When set, this property displays pages only as deep as specified. Therefore, if you are using the SiteMapPath control with the Web.sitemap , as shown in Listing 14-1, and you give the ParentLevelsDis- played property a value of 3 , you don’t notice any change to your page. It already displays the path three pages deep. If you change this value to 2 , however, the SiteMapPath control is constructed as follows: <asp:SiteMapPath ID="Sitemappath1" runat="server" ParentLevelsDisplayed="2"> </asp:SiteMapPath> Notice the result o f this change in Figure 14-7. The SiteMapPath control shows links only two pages deep and doesn’t show the Home page link. Figure 14-7 By default, no limit is set on the number of links shown, so the SiteMapPath control just generates the specified number of links based on what is labeled in the site map file. The ShowToolTips Property By default, the SiteMapPath control generates tooltips for each link if a description property is used within the Web.sitemap file. Remember, a tooltip is the text that appears onscreen when an end user hovers the mouse over one of the links in the SiteMapPath control. This capability was shown earlier in this chapter. There may be times when you do not want your SiteMapPath control to show any tooltips for the links that it generates. For these situations, you can actually turn off this capability in a couple of ways. The first way is to omit any description attributes in the .sitemap file. If you remove these attributes from the file, the SiteMapPath has nothing to display for the tooltips on the page. 669 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 670 Chapter 14: Site Navigation The other way to turn o ff the display of tooltips is to set the ShowToolTips property to False ,as shown here: <asp:SiteMapPath ID="Sitemappath1" runat="server" ShowToolTips="false"> </asp:SiteMapPath> This turns off the tooltips capability but still enables you to use the description property in the .sitemap file. You may still want to use the description attribute because it allows you to keep track of what the links in your file are used for. This is quite advantageous when you are dealing with hundreds or even thousands of links in your application. The SiteMapPath Control’s Child Elements You already saw the use of the < PathSeparatorStyle > and the < PathSeparatorTemplate > child ele- ments for the SiteMapPath control, but additional child elements exist. The following table covers each of the available child elements. Child Element Description CurrentNodeStyle Applies styles to the link in the SiteMapPath navigation for the currently displayed page. CurrentNodeTemplate Applies a template construction to the link in the SiteMapPath navigation for the currently displayed page. NodeStyle Applies styles to all links in the SiteMapPath navigation. The settings applied in the CurrentNodeStyle or RootNodeStyle elements supersede any settings placed here. NodeTemplate Applies a template construction to all links in the SiteMapPath navigation. The settings applied in the CurrentNodeTemplate or RootNodeTemplate elements supersede any settings placed here. PathSeparatorStyle Applies styles to the link dividers in the SiteMapPath navigation. PathSeparatorTemplate Applies a template construction to the link dividers in the SiteMapPath navigation. RootNodeStyle Applies styles to the first link (the root link) in the SiteMapPath navigation. RootNodeTemplate Applies a template construction to the first link in the SiteMapPath navigation. TreeView Server Control The TreeView server control is a rich server control for rendering a hierarchy of data, so it is quite ideal for displaying what is contained in your .sitemap file. Figure 14-8 shows you how it displays the contents of the site map (again from Listing 14-1) that you have been working with thus far in this chapter. This 670 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 671 Chapter 14: Site Navigation figure first shows a completely collapsed TreeView control at the top of the screen; the second TreeView control has been completely expanded. Figure 14-8 This control can dynamically load the nodes to be displayed as they are selected by the expandable and collapsible framework of the control. If the control can render the TreeView output along with some client-side script, the control can make a call back to the server if someone expands one of the nodes in the control to get the subnodes of the selected item. This is ideal if your site navigation system is large. In this case, loading nodes of the TreeView control dynamically greatly helps performance. One of the great features of this postback capability is it is done under the covers and does not require the ASP.NET page to be completely refreshed. Of course, this capability is there only if the browser accepts the client-side code that goes along with the TreeView control. If the browser does not, the control knows this and renders only what is appropriate (pulling all the information that is required of the entire TreeView control). It only performs these JavaScript-based postbacks for those clients who can work with this client-side script. You can definitely see this in action if you run the TreeView control on a page that is being monitored by an HTTP sniffer of some kind to monitor the traffic moving across the wire. I recommend Fiddler by Eric Lawrence of Microsoft that is freely downloadable on the Internet at fiddlertool.com. 671 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 672 Chapter 14: Site Navigation If your browser allows client-side script and you expand one of the expandable nodes of the TreeView control, your HTTP request will be similar to the following: POST /Navigation/Default.aspx HTTP/1.1 Accept: */* Accept-Language: en-us Referrer: http://localhost:1882/Navigation/Default.aspx Content-Type: application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; .NET CLR 3.5.20404; .NET CLR 1.1.4322) Host: localhost:1882 Content-Length: 904 Proxy-Connection: Keep-Alive Pragma: no-cache __EVENTTARGET=&__EVENTARGUMENT=&TreeView1_ExpandState=c&TreeView1_SelectedNode=Tree View1t0&TreeView1_PopulateLog=&__VIEWSTATE=%2FwEPDwUKLTY0ODk0OTE2Mg9kFgICBA9kFgICAw 88KwAJAgAPFggeDU5ldmVyRXhwYW5kZWRkHgtfIURhdGFCb3VuZGceDFNlbGVjdGVkTm9kZQULVHJlZVZpZ XcxdDAeCUxhc3RJbmRleAIBZAgUKwACBQMwOjAUKwACFhAeBFRleHQFBEhvbWUeBVZhbHVlBQRIb21lHgtO YXZpZ2F0ZVVybAUYL05hdmlnYXRpb24vRGVmYXVsdC5hc3B4HgdUb29sVGlwBQlIb21lIFBhZ2UeCERhdGF QYXRoBRgvbmF2aWdhdGlvbi9kZWZhdWx0LmFzcHgeCURhdGFCb3VuZGceCFNlbGVjdGVkZx4QUG9wdWxhdG VPbkRlbWFuZGdkZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAwURTG9naW4xJFJlbWVtY mVyTWUFF0xvZ2luMSRMb2dpbkltYWdlQnV0dG9uBQlUcmVlVmlldzFtwszVpUMxFTDtpERnNjgEIkWWbg%3 D%3D&Login1$UserName=&Login1$Password=&__CALLBACKID=TreeView1&__CALLBACKPARAM=0%7C1 %7Ctft%7C4%7CHome24%7C%2Fnavigation%2Fdefault.aspxHome&__EVENTVALIDATION=%2FwEWBgKg 8Yn8DwKUvNa1DwL666vYDAKC0q%2BkBgKnz4ybCAKn5fLxBaSy6WQwPagNZsHisWRoJfuiopOe The response from your ASP.NET application will not be the entire page that holds the TreeView control, but instead it is a small portion of HTML that is used by a JavaScript method on the page and is loaded into the TreeView control dynamically. A sample response is illustrated here: HTTP/1.1 200 OK Server: ASP.NET Development Server/8.0.0.0 Date: Sat, 11 Feb 2008 17:55:02 GMT X-AspNet-Version: 2.0.50727 Cache-Control: private, no-store Content-Type: text/html; charset=utf-8 Content-Length: 1756 Connection: Close 112|/wEWCgKg8Yn8DwKUvNa1DwL666vYDAKC0q+kBgKnz4ybCAKn5fLxBQKAgtPaBALEmcbhCgK8nZDfCAL M/ZK8AR/nFcl4nlPgp6HcFlU6YiFBfoNM14|nn|<div id="TreeView1n6Nodes" style="display:none;"> <table cellpadding="0" cellspacing="0" style="border-width:0;"> <tr> <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyy PCMT8DIfngU4PXeMiAHxJNuXB-tU1&t=632662834831594592" alt="" /> </div></td><td><div style="width:20px;height:1px"><img src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyyPCMT8DIfngU 4PXeMiAHxJNuXB-tU1&t=632662834831594592" alt="" /> </div></td><td><img 672 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 673 Chapter 14: Site Navigation src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyy PCMT8DCXmyNCWX5x-n_pSXFIW2qE1&t=632662834831594592" alt="" /></td><td style="white-space:nowrap;"> <a href="/Navigation/MarketsUSasdf.aspx" title="Looking at the U.S. Market" id="TreeView1t12" style="text-decoration:none;">U.S. Market Report</a></td> </tr> </table><table cellpadding="0" cellspacing="0" style="border-width:0;"> <tr> <td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"><img src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyyPCMT8DI fngU4PXeMiAHxJNuXB-tU1&t=632662834831594592" alt="" /> </div></td><td><div style="width:20px;height:1px"><img src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyyPCMT8DI fngU4PXeMiAHxJNuXB-tU1&t=632662834831594592" alt="" /> </div></td><td><img src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fY yyPCMT8DGyYai5iS-79vjeYzdeJoiI1&t=632662834831594592" alt="" /> </td><td style="white-space:nowrap;"> <a href="/Navigation/NYSE.aspx" title="The New York Stock Exchange" id="TreeView1t13" style="text-decoration:none;">NYSE</a></td> </tr> </table> </div> This postback capability is rather powerful, but if you want to disable it (even for browsers that can handle it), you just set the PopulateNodesFromClient attribute to false in the TreeView control (the default value is true ). The TreeView control is quite customizable; but first, take a look at how to create a default version of the control using the .sitemap file from Listing 14-1. For this example, continue to use the MarketsUS.aspx page you created earlier. The first step is to create a SiteMapDataSource control on the page. When working with the TreeView control that displays the contents of your .sitemap file, you must apply one of these data source con- trols. The TreeView control doesn’t just bind to your site map file automatically as the SiteMapPath control does. After a basic SiteMapDataSource control is in place, position a TreeView control on the page and set the DataSourceId property to SiteMapDataSource1 . When you have finished, your code should look like Listing 14-6. Listing 14-6: A basic TreeView control <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Using the TreeView Server Control</title> </head> Continued 673 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 674 Chapter 14: Site Navigation <body> <form id="form1" runat="server"> <asp:SiteMapPath ID="SiteMapPath1" runat="server"> </asp:SiteMapPath> <br /><p> <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:TreeView> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /></p> </form> </body> </html> After the page is run and the TreeView control is expanded, the results are displayed as shown in Figure 14-9. Figure 14-9 This is a very basic TreeView control. The great thing about this control is that it allows for a high degree of customization and even gives you the capability to use some predefined styles that come prepackaged with ASP.NET 3.5. Identifying the TreeView Control’s Built-In Styles As stated, the TreeView control does come with a number of pre-built styles right out of the box. The best way to utilize these predefined styles is to do so from the Design view of your page. By clicking on the 674 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 675 Chapter 14: Site Navigation arrow located in the upper right section o f the server control in the Design view in Visual Studio 2008, you will find the Auto Format option. Click this option and a number of styles become available to you. Selecting one of these styles changes the code of your TreeView control to adapt to that chosen style. For instance, if you choose MSDN from the list of options, the simple one-line TreeView control you created is converted to what is shown in Listing 14-7. Listing 14-7: A TreeView control with the MSDN style applied to it <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ImageSet="Msdn" NodeIndent="10"> <ParentNodeStyle Font-Bold="False" /> <HoverNodeStyle BackColor="#CCCCCC" BorderColor="#888888" BorderStyle="Solid" Font-Underline="True" /> <SelectedNodeStyle BackColor="White" BorderColor="#888888" BorderStyle="Solid" BorderWidth="1px" Font-Underline="False" HorizontalPadding="3px" VerticalPadding="1px" /> <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="1px" VerticalPadding="2px" /> </asp:TreeView> As you can see, if you use these built-in styles, it is not too difficult to completely change the look and feel of the TreeView control. When t his bit of code is run, you get the results shown in Figure 14-10. Figure 14-10 675 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 676 Chapter 14: Site Navigation Examining the Parts of the TreeView Control To master working with the TreeView control, you must understand the terminology used for each part of the hierarchical tree that is created by the control. First, every element or entry in the TreeView control is called a node. The uppermost node in the hierarchy ofnodesistheroot node. It is possible for a TreeView control to have multiple root nodes. Any node, including the root node, is also considered a parent node if it has any nodes that are directly under it in the hierarchy of nodes. The nodes directly under this parent node are referred to as child nodes.Each parent node can have one or more child nodes. Finally, if a node contains no child nodes, it is referred to as a leaf node. The following is based on the site map shown earlier and details the use of this terminology: Home - Root node, parent node News - Parent node, child node U.S. - Child node, leaf node World - Child node, leaf node Technology - Child node, leaf node Sports - Child node, leaf node Finance - Parent node, child node Quotes - Child node, leaf node Markets - Parent node, child node U.S. Market Report - Child node, leaf node NYSE - Child node, leaf node Funds - Child node, leaf node Weather - Child node, leaf node From this listing, you can see what each node is and how it is referred in the hierarchy of nodes. For instance, the U.S. Market Report node is a leaf node — meaning that it doesn’t have any child nodes associated with it. However, it is also a child node to the Markets node, which is a parent node to the U.S. Market Report node. If you are working with the Markets node directly, it is also a child node to the Finance node, which is its parent node. The main point to take away from all this is that each node in the site map hierarchy has a relationship to the other nodes in the hierarchy. You must understand these relationships because you can programmatically work with these nodes (as will be demonstrated later in this chapter), and the methods used for working with them include terms such as RootNode , CurrentNode and ParentNode . Binding the TreeView Control to an XML File You are not limited to working with just a .sitemap file in order to populate the nodes of your TreeView controls. You have many ways to get this done. One cool way is to use the XmlDataSource control (instead of the SiteMapDataSource control) to populate your TreeView controls from your XML files. For an example of this, create a hierarchical list of items in an XML file called Hardware.xml .Anexample of this is shown in Listing 14-8. 676 . application/x-www-form-urlencoded Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0 .50 727 ; Media Center PC 5. 0; .NET CLR 3. 0.0 450 6; .NET CLR 3. 5. 20404; .NET CLR 1.1. 432 2) Host:. style="width:20px;height:1px"><img src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyyPCMT8DIfngU 4PXeMiAHxJNuXB-tU1&t= 632 662 834 831 59 459 2" alt="" /> </div></td><td><img 672 Evjen c14.tex V2 - 01/28/2008 2 :39 pm Page 6 73 Chapter 14: Site Navigation src="/Navigation/WebResource.axd?d=GOWKLfnbFU9fYyy PCMT8DCXmyNCWX5x-n_pSXFIW2qE1&t= 632 662 834 831 59 459 2" alt="". on the Internet at fiddlertool.com. 671 Evjen c14.tex V2 - 01/28/2008 2 :39 pm Page 672 Chapter 14: Site Navigation If your browser allows client-side script and you expand one of the expandable