Thông tin tài liệu
Evjen c14.tex V2 - 01/28/2008 2:39pm Page 687 Chapter 14: Site Navigation 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 associated TreeView class 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 the TreeView programmatically. 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 the ExpandAll or CollapseAll methods from the TreeView class. 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" %> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) TreeView1.ExpandAll() End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) TreeView1.CollapseAll() End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>TreeView Control</title> </head> <body> <form id="Form1" runat="server"> <p> <asp:Button ID="Button1" runat="server" Text="Expand Nodes" OnClick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Collapse Nodes" OnClick="Button2_Click" /> <br /> <br /> <asp:TreeView ID="TreeView1" runat="server" DataSourceId="SiteMapDataSource1"> Continued 687 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 688 Chapter 14: Site Navigation </asp:TreeView> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /></p> </form> </body> </html> C# <%@ Page Language="C#" %> <script runat="server"> protected void Button1_Click(object sender, System.EventArgs e) { TreeView1.ExpandAll(); } protected void Button2_Click(object sender, System.EventArgs e) { TreeView1.CollapseAll(); } </script> Running this page gives you two buttons above your TreeView control. Clicking the first button invokes the ExpandAll() method and completely expands the entire list of nodes. Clicking the second button invokes the CollapseAll() method and completely collapses the list of nodes (see Figure 14-17). Figure 14-17 688 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 689 Chapter 14: Site Navigation 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 the TreeView1.ExpandAll() command within the Page_Load event, but if you try this, you see that it doesn’t work. Instead, you use the OnDataBound attribute within the TreeView control: <asp:TreeView ID="TreeView1" runat="server" 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 the TreeView1_DataBound method you just created. Using the site map from Listing 14-1, change the TreeView1_DataBound method so that it appears as shown in Listing 14-13. Listing 14-13: Expanding specific nodes programmatically VB Protected Sub TreeView1_DataBound(ByVal sender As Object, _ ByVal e As System.EventArgs) TreeView1.CollapseAll() TreeView1.FindNode("Home").Expand() TreeView1.FindNode("Home/Finance").Expand() TreeView1.FindNode("Home/Finance/Markets").Expand() End Sub C# protected void TreeView1_DataBound(object sender, System.EventArgs e) { TreeView1.CollapseAll(); TreeView1.FindNode("Home").Expand(); TreeView1.FindNode("Home/Finance").Expand(); TreeView1.FindNode("Home/Finance/Markets").Expand(); } 689 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 690 Chapter 14: Site Navigation In this case, you use the FindNode() method and expand the node that is found. The FindNode() method takes a String value, which is the node and the path of the node that you want to reference. For instance, TreeView1.FindNode("Home/Finance").Expand() expands the Finance node. 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, the Finance node). 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 the Finance node. If you sim- ply used TreeView1.FindNode("Home/Finance/Markets").Expand() in the TreeView1_DataBound() method, the Finance node would indeed be expanded, but the parent nodes above it (the Finance and Home nodes) would not have been expanded and you wouldn’t see the expanded Markets node when invoking the page. (Try it; it’s interesting.) Instead of using the Expand method, you can just as easily set the Expanded property to True ,asshown in Listing 14-14. Listing 14-14: Expanding nodes programmatically using the Expanded property VB Protected Sub TreeView1_DataBound(ByVal sender As Object, _ ByVal e As System.EventArgs) TreeView1.CollapseAll() TreeView1.FindNode("Home").Expanded = True TreeView1.FindNode("Home/Finance").Expanded = True TreeView1.FindNode("Home/Finance/Markets").Expanded = True End Sub C# protected void TreeView1_DataBound(object sender, System.EventArgs e) { TreeView1.CollapseAll(); TreeView1.FindNode("Home").Expanded = true; TreeView1.FindNode("Home/Finance").Expanded = true; TreeView1.FindNode("Home/Finance/Markets").Expanded = true; } Although you focus on the Expand method and the Expanded property here, you can just as easily programmatically collapse nodes using the Collapse() method. No Collapsed property really exists. Instead, you simply set the Expanded property to False . 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 of TreeNode objects. Therefore, as you see in previous examples, the Finance node is actually a TreeNode object that you can work with programmatically. It includes the capability to add other TreeNode objects. A TreeNode object typically stores a Text and Value property. The Text property is what is displayed in the TreeView control for the end user. The Value property is an additional data item that you can use to associate with this particular TreeNode object. Another property that you can use (if your TreeView control is a list of navigational links) is the NavigateUrl property. Listing 14-15 demonstrates how to add nodes programmatically to the same site map from Listing 14-1 that you have been using. 690 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 691 Chapter 14: Site Navigation Listing 14-15: Adding nodes programmatically to the TreeView control VB <%@ Page Language="VB" %> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) TreeView1.ExpandAll() End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) TreeView1.CollapseAll() End Sub Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim myNode As New TreeNode myNode.Text = TextBox1.Text myNode.NavigateUrl = TextBox2.Text TreeView1.FindNode("Home/Finance/Markets").ChildNodes.Add(myNode) End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>TreeView Control</title> </head> <body> <form id="Form1" runat="server"> <p> <asp:Button ID="Button1" runat="server" Text="Expand Nodes" OnClick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Collapse Nodes" OnClick="Button2_Click" /></p> <p> <strong>Text of new node:</strong> <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 /> <br /> <asp:Button ID="Button3" runat="server" Text="Add New Node" OnClick="Button3_Click" /> </p> <p> <asp:TreeView ID="TreeView1" runat="server" DataSourceId="SiteMapDataSource1"> </asp:TreeView></p> <p> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /></p> Continued 691 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 692 Chapter 14: Site Navigation </form> </body> </html> C# protected void Button3_Click(object sender, System.EventArgs e) { 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 Text property of the new node that is created. The second text box is used to populate the NavigateUrl property of the new node. Figure 14-18 692 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 693 Chapter 14: Site Navigation If you run the page, you can expand the entire hierarchy by clicking the Expand Nodes button. Then you can add additional child nodes to the Markets node. To add a new node programmatically, use the FindNode method as you did before to find the Markets node. When you find it, you can add additional child nodes by using the ChildNodes.Add() method and pass in a TreeNode object instance. Submitting NASDAQ in the first text box and Nasdaq.aspx in 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 the Markets node. 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 .sitemap file). These sources remain unchanged throughout the entire process. Menu Server 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 a re 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 t he 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 693 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 694 Chapter 14: Site Navigation control onto the Visual Studio 2008 design surface and connect the two by using the Menu control’s DataSourceId property. 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 <%@ Page Language="VB" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Menu Server Control</title> </head> <body> <form id="form1" runat="server"> <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’s Web.sitemap file. The only other item included is the Menu control, which uses the typical ID and runat attributes and the DataSourceID attribute 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 include Classic and Professional and 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 the Classic option, you get the results shown in Listing 14-17. 694 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 695 Chapter 14: Site Navigation 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"> <StaticSelectedStyle BackColor="#507CD1"></StaticSelectedStyle> <StaticMenuItemStyle HorizontalPadding="5" VerticalPadding="2"></StaticMenuItemStyle> <DynamicMenuStyle BackColor="#B5C7DE"></DynamicMenuStyle> <DynamicSelectedStyle BackColor="#507CD1"></DynamicSelectedStyle> <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 the Home link that appears when the page is generated. Dynamic links are the items that appear dynamically when the user hovers the mouse over the Home link in the menu. It is possible to change the styles for both these types of nodes in the menu. 695 Evjen c14.tex V2 - 01/28/2008 2:39pm Page 696 Chapter 14: Site Navigation 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 696 . it’s interesting.) Instead of using the Expand method, you can just as easily set the Expanded property to True ,asshown in Listing 14-14. Listing 14-14: Expanding nodes programmatically using. the Finance node would indeed be expanded, but the parent nodes above it (the Finance and Home nodes) would not have been expanded and you wouldn’t see the expanded Markets node when invoking the page System.EventArgs) TreeView1.CollapseAll() TreeView1.FindNode("Home").Expand() TreeView1.FindNode("Home/Finance").Expand() TreeView1.FindNode("Home/Finance/Markets").Expand() End Sub C# protected void
Ngày đăng: 05/07/2014, 18:21
Xem thêm: Professional ASP.NET 3.5 in C# and Visual Basic Part 74 pptx
