Professional ASP.NET 3.5 in C# and Visual Basic Part 74 pptx

Listing 14-12: Expanding and collapsing the nodes of the TreeView control programmatically VB Protected Sub Button1_ClickByVal sender As Object, ByVal e As System.EventArgs TreeView1.E

Trang 1

the new folder,TreeViewLineImages, which contains all the new images and styles you created Look

in the folder — it is interesting to see what is output by the tool

Working with the TreeView Control Programmatically

So far, with the TreeView control, you have learned how to work with the control declaratively The great thing about ASP.NET is that you are not simply required to work with its components declaratively, but you can also manipulate these controls programmatically

The TreeView control has an associatedTreeViewclass that enables you to completely manage the Tree-View control and how it functions from within your code The next section looks at how to use some of the more common ways to control theTreeViewprogrammatically

Expanding and Collapsing Nodes Programmatically

One thing you can do with your TreeView control is to expand or collapse the nodes within the hierarchy programmatically You can accomplish this by using either theExpandAllorCollapseAllmethods

from theTreeViewclass Listing 14-12 shows you one of the earlier TreeView controls that you used in

Listing 14-6, but with a couple of buttons above it that you can now use to initiate the expanding and

collapsing of the nodes

Listing 14-12: Expanding and collapsing the nodes of the TreeView control

programmatically

VB

<%@ Page Language="VB" %>

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)

TreeView1.ExpandAll() End Sub

TreeView1.CollapseAll() End Sub

</script>

<title>TreeView Control</title>

</head>

<body>

<p>

<asp:Button ID="Button1" runat="server" Text="Expand Nodes"

OnClick="Button1_Click" />

<asp:Button ID="Button2" runat="server" Text="Collapse Nodes"

<br />

<asp:TreeView ID="TreeView1" runat="server"

DataSourceId="SiteMapDataSource1">

Trang 2

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /></p>

</form>

</body>

</html>

C#

<%@ Page Language="C#" %>

protected void Button1_Click(object sender, System.EventArgs e)

{

TreeView1.ExpandAll();

}

{

TreeView1.CollapseAll();

}

</script>

Running this page gives you two buttons above your TreeView control Clicking the first button invokes

theExpandAll()method and completely expands the entire list of nodes Clicking the second button

invokes theCollapseAll()method and completely collapses the list of nodes (see Figure 14-17)

Figure 14-17

Trang 3

The example shown in Listing 14-12 is nice, but it expands and collapses the nodes only on end-user

actions (when the end user clicks the button) It would be even nicer if you could initiate this action

programmatically

You might want to simply place theTreeView1.ExpandAll()command within thePage_Loadevent,

but if you try this, you see that it doesn’t work Instead, you use theOnDataBoundattribute within the

TreeView control:

DataSourceId="SiteMapDataSource1" OnDataBound="TreeView1_DataBound">

</asp:TreeView>

The value of this attribute points to a method in your code, as shown here:

VB

Protected Sub TreeView1_DataBound(ByVal sender As Object, _

ByVal e As System.EventArgs)

TreeView1.ExpandAll()

End Sub

C#

protected void TreeView1_DataBound(object sender, System.EventArgs e)

{

TreeView1.ExpandAll();

}

Now when you run the page, notice that the TreeView control is completely expanded when the page is first loaded in the browser

You can also expand specific nodes within the tree instead of just expanding the entire list For this

example, use theTreeView1_DataBoundmethod you just created Using the site map from Listing 14-1, change theTreeView1_DataBoundmethod so that it appears as shown in Listing 14-13

Listing 14-13: Expanding specific nodes programmatically

VB

TreeView1.CollapseAll()

TreeView1.FindNode("Home").Expand()

TreeView1.FindNode("Home/Finance").Expand()

TreeView1.FindNode("Home/Finance/Markets").Expand()

End Sub

C#

{

TreeView1.FindNode("Home").Expand();

TreeView1.FindNode("Home/Finance").Expand();

TreeView1.FindNode("Home/Finance/Markets").Expand();

}

Trang 4

In this case, you use theFindNode()method and expand the node that is found TheFindNode()method

takes aStringvalue, which is the node and the path of the node that you want to reference For instance,

TreeView1.FindNode("Home/Finance").Expand()expands theFinancenode To find the node, it is

important to specify the entire path from the root node to the node you want to work with (in this case,

theFinancenode) You separate the nodes within the site map path structure with a forward-slash

between each of the nodes in the site map path

Note that you had to expand each of the nodes individually until you got to theFinancenode If you

sim-ply usedTreeView1.FindNode("Home/Finance/Markets").Expand()in theTreeView1_DataBound()

method, theFinancenode would indeed be expanded, but the parent nodes above it (theFinanceand

Homenodes) would not have been expanded and you wouldn’t see the expandedMarketsnode when

invoking the page (Try it; it’s interesting.)

Instead of using theExpandmethod, you can just as easily set theExpandedproperty toTrue, as shown

in Listing 14-14

Listing 14-14: Expanding nodes programmatically using the Expanded property

VB

TreeView1.FindNode("Home").Expanded = True

TreeView1.FindNode("Home/Finance").Expanded = True

TreeView1.FindNode("Home/Finance/Markets").Expanded = True

End Sub

C#

{

TreeView1.FindNode("Home").Expanded = true;

TreeView1.FindNode("Home/Finance").Expanded = true;

TreeView1.FindNode("Home/Finance/Markets").Expanded = true;

}

Although you focus on theExpandmethod and theExpandedproperty here, you can just as easily

programmatically collapse nodes using theCollapse()method NoCollapsedproperty really exists

Instead, you simply set theExpandedproperty toFalse

Adding Nodes

Another interesting thing you can do with the TreeView control is to add nodes to the overall hierarchy

programmatically The TreeView control is made up of a collection ofTreeNodeobjects Therefore, as

you see in previous examples, theFinancenode is actually aTreeNodeobject that you can work with

programmatically It includes the capability to add otherTreeNodeobjects

ATreeNodeobject typically stores aTextandValueproperty TheTextproperty is what is displayed in

the TreeView control for the end user TheValueproperty is an additional data item that you can use

to associate with this particularTreeNodeobject Another property that you can use (if your TreeView

control is a list of navigational links) is theNavigateUrlproperty Listing 14-15 demonstrates how to add

nodes programmatically to the same site map from Listing 14-1 that you have been using

Trang 5

Listing 14-15: Adding nodes programmatically to the TreeView control

VB

TreeView1.ExpandAll()

End Sub

Dim myNode As New TreeNode

myNode.Text = TextBox1.Text

myNode.NavigateUrl = TextBox2.Text

TreeView1.FindNode("Home/Finance/Markets").ChildNodes.Add(myNode)

End Sub

</script>

<title>TreeView Control</title>

</head>

<body>

<p>

<asp:Button ID="Button1" runat="server" Text="Expand Nodes"

<asp:Button ID="Button2" runat="server" Text="Collapse Nodes"

OnClick="Button2_Click" /></p>

<p>

<asp:TextBox ID="TextBox1" runat="server">

</asp:TextBox>

</p>

<p>

<strong>Destination URL of new node:</strong>

<asp:TextBox ID="TextBox2" runat="server">

</asp:TextBox>

<br />

<asp:Button ID="Button3" runat="server" Text="Add New Node"

</p>

<p>

DataSourceId="SiteMapDataSource1">

</asp:TreeView></p>

<p>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /></p>

Continued

Trang 6

</body>

</html>

C#

{

TreeNode myNode = new TreeNode();

myNode.Text = TextBox1.Text;

myNode.NavigateUrl = TextBox2.Text;

TreeView1.FindNode("Home/Finance/Markets").ChildNodes.Add(myNode);

}

This page contains two text boxes and a new Button control The first text box is used to populate the

Textproperty of the new node that is created The second text box is used to populate theNavigateUrl

property of the new node

Figure 14-18

Trang 7

If you run the page, you can expand the entire hierarchy by clicking theExpand Nodesbutton Then

you can add additional child nodes to theMarketsnode To add a new node programmatically, use the

FindNodemethod as you did before to find theMarketsnode When you find it, you can add additional child nodes by using theChildNodes.Add()method and pass in aTreeNodeobject instance Submitting

NASDAQin the first text box andNasdaq.aspxin the second text box changes your TreeView control as

illustrated in Figure 14-18

After it is added, the node stays added even after the hierarchy tree is collapsed and re-opened You

can also add as many child nodes as you want to theMarketsnode Note that, although you are chang-ing nodes programmatically, this in no way alters the contents of the data source (the XML file, or the

.sitemapfile) These sources remain unchanged throughout the entire process

Menu Ser ver Control

One of the cooler navigation controls found in ASP.NET 3.5 is the Menu server control This control

is ideal for allowing the end user to navigate a larger hierarchy of options while utilizing very little

browser real estate in the process Figure 14-19 shows you what the menu control looks like when it is

either completely collapsed or completely extended down one of the branches of the hierarchy

Figure 14-19

From here, you can see that the first Menu control displayed simply shows the Home link with a small arrow to the right of the display The arrow means that more options are available that relate to this

up-most link in the hierarchy The second Menu control displayed shows what the default control looks like when the end user works down one of the branches provided by the site map

The Menu control is an ideal control to use when you have lots of options — whether these options are selections the end user can make or navigation points provided by the application in which they are

working The Menu control can provide a multitude of options and consumes little space in the process Using the Menu control in your ASP.NET applications is rather simple The Menu control works with

a SiteMapDataSource control You can drag and drop the SiteMapDataSource control and the Menu

Trang 8

control onto the Visual Studio 2008 design surface and connect the two by using the Menu control’s

DataSourceIdproperty Alternatively, you can create and connect them directly in code Listing 14-16

shows an example of the Menu control in its simplest form

Listing 14-16: A simple use of the Menu control

<title>Menu Server Control</title>

</head>

<body>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">

</asp:Menu>

</form>

</body>

</html>

From this example, you can see that I’m using a SiteMapDataSource control that automatically works

with the application’sWeb.sitemapfile The only other item included is the Menu control, which uses the

typicalIDandrunatattributes and theDataSourceIDattribute to connect it with what is retrieved from

the SiteMapDataSource control

Although the default Menu control is pretty simple, you can highly customize how this control looks and

works by redefining the properties of the control The following sections look at some examples of how

you can modify the appearance and change the behavior of this control

Applying Different Styles to the Menu Control

By default, the Menu control is pretty plain If you want to maintain this appearance, you can use what

is provided or simply change the font sizes and styles to make it fit in with your site You actually have

quite a number of ways in which you can modify this control so that it appears unique and fits in with

the rest of your site Either you can customize this control’s appearance yourself, or you can use one of

the predefined styles that come with the control

Using a Predefined Style

Visual Studio 2008 includes some predefined styles that you can use with the Menu control to quickly

apply a look-and-feel to the displayed menu of items Some of the provided styles includeClassic

andProfessionaland more To apply one of these predefined styles, you work with the Menu control

from the Design view of your page Within the Design view, highlight the Menu control and expand

the control’s smart tag From here, you see a list of options for working with this control To change the

look-and-feel of the control, click the Auto Format link and select one of the styles

Performing this operation changes the code of your control by applying a set of style properties For

example, if you select theClassicoption, you get the results shown in Listing 14-17

Trang 9

Listing 14-17: Code changes when a style is applied to the Menu control

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"

BackColor="#B5C7DE" ForeColor="#284E98"

Font-Names="Verdana" Font-Size="0.8em" StaticSubMenuIndent="10px"

DynamicHorizontalOffset="2">

<StaticMenuItemStyle HorizontalPadding="5"

VerticalPadding="2"></StaticMenuItemStyle>

<DynamicMenuItemStyle HorizontalPadding="5"

VerticalPadding="2"></DynamicMenuItemStyle>

<DynamicHoverStyle ForeColor="White" Font-Bold="True"

BackColor="#284E98"></DynamicHoverStyle>

<StaticHoverStyle ForeColor="White" Font-Bold="True"

BackColor="#284E98"></StaticHoverStyle>

</asp:Menu>

You can see a lot of added styles that change the menu items that appear in the control Figure 14-20

shows how this style selection appears in the browser

Figure 14-20

Changing the Style for Static Items

The Menu control considers items in the hierarchy to be either static or dynamic Static items from this

example would be theHomelink that appears when the page is generated Dynamic links are the items

that appear dynamically when the user hovers the mouse over theHomelink in the menu It is possible to change the styles for both these types of nodes in the menu

Trang 10

To apply a specific style to the static links that appear, you must add a static style element to the Menu

control The Menu control includes the following static style elements:

❑ <StaticHoverStyle>

❑ <StaticItemTemplate>

❑ <StaticMenuItemStyle>

❑ <StaticMenuStyle>

❑ <StaticSelectedStyle>

The important options from this list include the<StaticHoverStyle>and the<StaticMenuItemStyle>

elements The<StaticHoverStyle>is what you use to define the style of the static item in the menu

when the end user hovers the mouse over the option The<StaticMenuItemStyle>is what you use for

the style of the static item when the end user is not hovering the mouse over the option

Listing 14-18 illustrates adding a style that is applied when the end user hovers the mouse over static

items

Listing 14-18: Adding a hover style to static items in the menu control

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">

<StaticHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid"

BorderWidth="1"></StaticHoverStyle>

</asp:Menu>

This little example adds a background color and border to the static items in the menu when the end user

hovers the mouse over the item The result is shown in Figure 14-21

Figure 14-21

Định dạng
Số trang	10
Dung lượng	282,54 KB