Professional ASP.NET 3.5 in C# and Visual Basic Part 72 docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (341.91 KB, 10 trang )
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=" /><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=" /><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
