Professional ASP.NET 3.5 in C# and Visual Basic Part 73 ppsx
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 (347.1 KB, 10 trang )
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 677
Chapter 14: Site Navigation
Listing 14-8: Hardware.xml
<?xml version="1.0" encoding="utf-8"?>
<Hardware>
<Item Category="Motherboards">
<Option Choice="Asus" />
<Option Choice="Abit" />
</Item>
<Item Category="Memory">
<Option Choice="128mb" />
<Option Choice="256mb" />
<Option Choice="512mb" />
</Item>
<Item Category="HardDrives">
<Option Choice="40GB" />
<Option Choice="80GB" />
<Option Choice="100GB" />
</Item>
<Item Category="Drives">
<Option Choice="CD" />
<Option Choice="DVD" />
<Option Choice="DVD Burner" />
</Item>
</Hardware>
As you can see, this list is not meant to be used for site navigation purposes, but instead for allowing
the end user to make a selection from a hierarchical list of options. This XML file is divided into four
categories of available options:
Motherboards
,
Memory
,
HardDrives
,and
Drives
. To bind your TreeView
control to this XML file, use an XmlDataSource control that specifies the location of the XML file you
are going to use. Then within the TreeView control itself, use the
<
asp:TreeNodeBinding
> element to
specify which elements to bind in the XML file to populate the nodes of the TreeView control. This is
illustrated in Listing 14-9.
Listing 14-9: Binding a TreeView control to the Hardware.xml file
<%@ Page Language="VB" %>
<html xmlns=" /><head runat="server">
<title>Latest Hardware</title>
</head>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware"
Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
Continued
677
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 678
Chapter 14: Site Navigation
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="Hardware.xml">
</asp:XmlDataSource>
</form>
</body>
</html>
The first item to look at is the <
asp:XmlDataSource
> control. It is just as simple as the previous
<
asp:SiteMapDataSource
> control, but it points at the
Hardware.xml
file using the
DataFile
property.
The next step is to create a TreeView control that binds to this particular XML file. You can bind a default
TreeView control directly to the XmlDataSource control such as this:
<asp:TreeView ID="TreeView1" runat="server" DataSourceId="XmlDataSource1" />
Doing this, you get the incorrect result shown in Figure 14-11.
Figure 14-11
As you can see, the TreeView control binds just fine to the
Hardware.xml
file,butlookingatthenodes
within the TreeView control, you can see that it is simply displaying the names of the actual XML ele-
ments from the file itself. Because this isn’t what you want, you specify how to b ind to the XML file with
the use of the
<
DataBindings
> element within the TreeView control.
678
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 679
Chapter 14: Site Navigation
The <
DataBindings
> element encapsulates one or more
TreeNodeBinding
objects. Two of the more
important available properties of a
TreeNodeBinding
object are the
DataMember
and
TextField
proper-
ties. The
DataMember
property points to the name of the XML element that the TreeView control should
look for. The
TextField
property specifies the XML attribute that the TreeView should look for in that
particular XML element. If you do this correctly, using the
<
DataBindings
> construct, you get the result
shown in Figure 14-12.
Figure 14-12
You can also see from Listing 14-9 that you can override the text value of the root node from the XML
file,
<
Hardware
>, and have it appear as
Computer Hardware
in the TreeView control, as follows:
<asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" />
Selecting Multiple Options in a TreeView
As stated earlier, the TreeView control is not meant to be used exclusively for navigation purposes. You
can use it for all sorts of things. In many cases, you can present a hierarchical list from which you want
theendusertoselectoneormoreitems.
One great built-in feature of the TreeView control is the capability to put check boxes next to nodes within
the hierarchical items in the list. These boxes enable end users to make multiple selections. The TreeView
control contains a property called
ShowCheckBoxes
that can be used to create check boxes next to many
different types of nodes within a list of items.
679
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 680
Chapter 14: Site Navigation
The available values for the
ShowCheckBoxes
property are discussed in the following table.
Value Description
All
Applies check boxes to each and every node within the TreeView control.
Leaf
Applies check boxes to only the nodes that have no additional child elements.
None
Applies no check boxes to any node within the TreeView control.
Parent
Applies check boxes to only the nodes considered parent nodes within the
TreeView control. A parent node has at least one child node associated with it.
Root
Applies a check box to any root node contained within the TreeView control.
When working with the
ShowCheckBoxes
property, you can set it declaratively in the control itself, as
follows:
<asp:TreeView ID="Treeview1" runat="server" Font-Underline="false"
DataSourceID="XmlDataSource1" ShowCheckBoxes="Leaf">
</asp:TreeViewTreeView>
Or you can set it programmatically by using the following code:
VB
TreeView1.ShowCheckBoxes = TreeNodeTypes.Leaf
C#
TreeView1.ShowCheckBoxes = TreeNodeTypes.Leaf;
For an example of using check boxes with the TreeView control, let’s continue to expand on the com-
puter hardware example from Listing 14-9. Create a hierarchical list that enables people to select multiple
items from the list in order to receive a dditional information about them. Listing 14-10 shows an example
of this.
Listing 14-10: Applying check boxes next to the leaf nodes within the hierarchical list
of nodes
VB
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
If TreeView1.CheckedNodes.Count > 0 Then
Label1.Text = "We are sending you information on:<p>"
For Each node As TreeNode In TreeView1.CheckedNodes
Label1.Text += node.Text & " " & node.Parent.Text & "<br>"
Next
Else
Label1.Text = "You didn’t select anything. Sorry!"
680
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 681
Chapter 14: Site Navigation
End If
End Sub
</script>
<html xmlns=" /><head runat="server">
<title>Latest Hardware</title>
</head>
<body>
<form runat="server">
Please select the items you are interested in:
<p>
<asp:TreeView ID="TreeView1" runat="server" Font-Underline="False"
DataSourceID="XmlDataSource1" ShowCheckBoxes="Leaf">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware"
Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
<p>
<asp:Button ID="Button1" runat="server" Text="Submit Choices"
OnClick="Button1_Click" />
</p>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="Hardware.xml">
</asp:XmlDataSource>
</p>
<asp:Label ID="Label1" runat="Server" />
</form>
</body>
</html>
C#
<%@ Page Language="C#" %>
<script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
if (TreeView1.CheckedNodes.Count > 0)
{
Label1.Text = "We are sending you information on:<p>";
foreach (TreeNode node in TreeView1.CheckedNodes)
{
Label1.Text += node.Text + " " + node.Parent.Text + "<br>";
}
}
else
{
Label1.Text = "You didn’t select anything. Sorry!";
}
}
</script>
681
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 682
Chapter 14: Site Navigation
In this example, you first set the
ShowTextBoxes
property to
Leaf
, meaning that you are interested in
having check boxes appear only next to items in the TreeView control that do not contain any child
nodes. The items with check boxes next to them should be the last items that can be expanded in the
hierarchical list.
After this property is set, you then work with the items that are selected by the end user in the
Button1_Click
event. The first thing you should check is w hether any selection at all was made:
If TreeView1.CheckedNodes.Count > 0 Then
End If
Figure 14-13
682
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 683
Chapter 14: Site Navigation
In this case, the number of checked nodes on the postback needs to be greater than zero, meaning that
at least one was selected. If so, you can execute the code within the
If
statement. The
If
statement then
proceeds to populate the Label control that is on the page. To populate the Label control with data from
the selected nodes, you use a
For Each
statement, as shown here:
For Each node As TreeNode In TreeView1.CheckedNodes
Next
This works with an instance of a
TreeNode
object and checks each
TreeNode
object within the
TreeView1
collection of checked nodes.
For each node that is checked, you grab the nodes
Text
value and the
Text
value of this node’s parent
node to further populate the Label control, as follows:
Label1.Text += node.Text & " " & node.Parent.Text & "<br>"
In the end, you get a page that produces the results shown in Figure 14-13.
Specifying Custom Icons in the TreeView Control
The TreeView control allows for a high degree of customization. You saw earlier in the chapter that you
were easily able to customize the look-and-feel of the TreeView control by specifying one of the built-in
styles. Applying one of these styles dramatically changes the appearance of the control. One of the most
noticeable changes concerns the icons used for the nodes within the TreeView control. Although it is not
as easy as just selecting one of the styles built into the TreeView control, you can apply your own icons
to be used for the nodes within the hierarchical list of nodes.
The TreeView control contains the properties discussed in the following table. These properties enable
you to specify your own images to use for the nodes of the control.
Property Description
CollapseImageUrl
Applies a custom image next to nodes that have been expanded to
show any of their child nodes and have the capability of being
collapsed.
ExpandImageUrl
Applies a custom image next to nodes that have the capability of
being expanded to display their child nodes.
LeafNodeStyle-ImageUrl
Applies a custom image next to a node that has no child nodes and is
last in the hierarchical chain of nodes.
NoExpandImageUrl
Applies a custom image to nodes that, for programmatic reasons,
cannot be expanded or to nodes that are leaf nodes. This is primarily
used for spacing purposes to align leaf nodes with their parent nodes.
ParentNodeStyle-ImageUrl
Applies a custom image only to the parent nodes within the TreeView
control.
RootNodeStyle-ImageUrl
Applies a custom image next to only the root nodes within the
TreeView control.
683
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 684
Chapter 14: Site Navigation
Listing 14-11 shows an example of these properties in use.
Listing 14-11: Applying custom images to the TreeView control
<asp:TreeView ID="TreeView1" runat="server" Font-Underline="False"
DataSourceId="XmlDataSource1"
CollapseImageUrl="Images/CollapseImage.gif"
ExpandImageUrl="Images/ExpandImage.gif"
LeafNodeStyle-ImageUrl="Images/LeafImage.gif">
<DataBindings>
<asp:TreeNodeBinding DataMember="Hardware" Text="Computer Hardware" />
<asp:TreeNodeBinding DataMember="Item" TextField="Category" />
<asp:TreeNodeBinding DataMember="Option" TextField="Choice" />
</DataBindings>
</asp:TreeView>
Specifying these three images to precede the nodes in your control overrides the default values of using
a plus (+) sign and a minus (–) sign for the expandable and collapsible nodes. It also overrides simply
using an image for any leaf nodes when by default nothing is used. Using the code from Listing 14-11,
you get something similar to the results illustrated in Figure 14-14 (depending on the images you use,
of course).
Figure 14-14
684
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 685
Chapter 14: Site Navigation
Specifying Lines Used to Connect Nodes
Because the TreeView control shows a hierarchical list of items to the end user, you sometimes want
to show the relationship between these hierarchical items more explicitly than it is shown by default
with the TreeView control. One possibility is to show line connections between parent and child nodes
within the display. Simply set the
ShowLines
property of the TreeView control to
True
(by default, this
property is set to
False
):
<asp:TreeView ID="TreeView1" runat="server" Font-Underline="False"
DataSourceId="XmlDataSource1" ShowCheckBoxes="Leaf" ShowLines="True">
</asp:TreeViewTreeView>
This code gives the result shown in Figure 14-15.
Figure 14-15
If the
ShowLines
property is set to
True
, you can also define your own lines and images within
the TreeView control. This is quite easy to do because Visual Studio 2008 provides you w ith an ASP.NET
TreeView Line I mage Generator tool. This tool enables you to visually design how you want the lines
and corresponding expanding and collapsing images to appear. After you have it set up as you want, the
tool then creates all the necessary files for any of your TreeView controls to use.
To get at the tool, move to the Design view of your file and click the smart tag for the TreeView control
that is on your page. Here you find the option Customize Line Images. You will not see this option unless
685
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 686
Chapter 14: Site Navigation
the Show Lines check box is checked. Click this and you are presented with the ASP.NET TreeView Line
Generator dialog (shown in Figure 14-16).
Figure 14-16
From within this dialog, you can select the images used for the nodes that require an Expand, Collapse,
or NoCollapse icon. You can also specify the color and style of the lines that connect the nodes. As you
create your styles, a sample TreeView control output is displayed for you directly in the dialog box based
on how your styles are to be applied. The final step is to choose the output of the files that this dialog will
create. When you have completed this step, click OK. This generates a long list of new files to the folder
that you specified in the dialog. By default, the ASP.NET TreeView Line Image Generator wants you to
name the output folder
TreeLineImages
, but feel free to name it as you wish. If the folder does not exist
in the project, you are prompted to allow Visual Studio to create the folder for you. After this is in place,
the TreeView control can use your new images and styles if you set the
LineImagesFolder
property
as follows:
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True"
DataSourceId="SiteMapDataSource1" LineImagesFolder="TreeViewLineImages">
The important properties are shown in bold. The
ShowLines
property must be set to
True
. After it is set,
it uses the default settings displayed earlier, unless you have specified a location where it can retrieve
custom images and styles using the
LineImagesFolder
property. As you can see, this simply points to
686
