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 Using the SiteMapPath Server Control
Trang 1Figure 14-4
With the use of thePathSeparatorattribute or the<PathSeparatorTemplate>element, it is quite easy
to specify what you want to use to separate the links in the breadcrumb 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 theSiteMapPath
control, we are able to change the visual appearance of the separator elements The results are shown in Figure 14-5
Figure 14-5
Trang 2Using 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 isPathDirection This property
changes the direction of the links generated in the output Only two settings are possible for this property:
RootToCurrentandCurrentToRoot
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 currently being displayed By default, this property is set toRootToCurrent Changing the
example toCurrentToRootproduces the results shown in Figure 14-6
Figure 14-6
Trang 3The 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 theParentLevelsDisplayedproperty 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 theWeb.sitemap, as shown in Listing 14-1, and you give the ParentLevelsDis-playedproperty a value of3, you don’t notice any change to your page It already displays the path three pages deep If you change this value to2, however, the SiteMapPath control is constructed as follows:
<asp:SiteMapPath ID="Sitemappath1" runat="server" ParentLevelsDisplayed="2">
</asp:SiteMapPath>
Notice the result of 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 theWeb.sitemapfile 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.sitemapfile If you remove these attributes from
the file, the SiteMapPath has nothing to display for the tooltips on the page
Trang 4The other way to turn off the display of tooltips is to set theShowToolTipsproperty toFalse, 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 eleele-ments 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 theCurrentNodeStyleorRootNodeStyleelements supersede any settings placed here
NodeTemplate Applies a template construction to all links in the SiteMapPath
navigation The settings applied in theCurrentNodeTemplateor
RootNodeTemplateelements 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
TreeV iew Ser ver 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.sitemapfile 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
Trang 5figure 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
Trang 6If 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
Trang 7src="/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 thePopulateNodesFromClientattribute tofalsein the TreeView control (the
default value istrue)
The TreeView control is quite customizable; but first, take a look at how to create a default version of the control using the.sitemapfile from Listing 14-1 For this example, continue to use theMarketsUS.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.sitemapfile, 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
DataSourceIdproperty toSiteMapDataSource1 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
Trang 8<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
Trang 9arrow located in the upper right section of 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 chooseMSDNfrom 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 this bit of code is run, you get the results shown in Figure 14-10
Figure 14-10
Trang 10Examining 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
of nodes is the root 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, theU.S Market Reportnode is a leaf node — meaning that it doesn’t have any child nodes
associated with it However, it is also a child node to theMarketsnode, which is a parent node to the
U.S Market Reportnode If you are working with theMarketsnode directly, it is also a child node to
theFinancenode, 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 asRootNode,CurrentNode
andParentNode
Binding the TreeView Control to an XML File
You are not limited to working with just a.sitemapfile 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 calledHardware.xml An example
of this is shown in Listing 14-8