Using the Microsoft Internet Explorer WebControls
Using the Microsoft Internet Explorer WebControlsThe Microsoft Internet Explorer WebControls are not part of the core ASP.NET Framework. Before you can use these controls, you must first download them from the Microsoft Web site. These controls are available for free download at the following URL: http://msdn.microsoft.com/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols/ NOTE As I write this, the IE WebControls have not been updated for ASP.NET 1.1. I've included this section on the IE WebControls since they proved to be extremely popular for ASP.NET 1.0 and it is my hope that they will be updated for ASP.NET 1.1 by the time that you read this note. After you download the controls, you can execute the setup program to install the controls on any machine configured with the .NET Framework. NOTE The documentation for the Microsoft Internet Explorer WebControls is located at the MSDN Web site (msdn.microsoft.com). Visit the following URL: http://msdn.microsoft.com/workshop/webcontrols/webcontrols_entry.asp Three main controls are included with the Internet Explorer WebControls : TreeView , Toolbar , and TabStrip . I discuss how you can use each control in an ASP.NET page in the following sections. Using the TreeView ControlYou can use the TreeView control to create a user interface that enables users to navigate through a hierarchy of pages or items. For example, you can create a TreeView control that represents the table of contents and sections for a book. When a user clicks a node displayed in the tree, he is brought to the proper section of the book. The TreeView control supports both up-level and down-level browsers. When a page containing the TreeView control is requested by Internet Explorer 5.5 (or higher), the control uses DHTML behaviors. When it is requested by any other browser, the control renders standard HTML 3.2 content. Creating a Simple Tree ViewTo create a simple tree view, complete the following steps:
The page in Listing 8.1, for example, displays a parent node, labeled ASP.NET Books , with two child nodes, labeled ASP.NET Unleashed and ASP.NET Tips, Code, and Tutorials . Listing 8.1 SimpleTreeView.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>SimpleTreeView.aspx</title></head> <body> <form runat="Server"> <IE:TreeView Runat="Server"> <TreeNode Text="ASP.NET Books"> <TreeNode Text="ASP.NET Unleashed"/> <TreeNode Text="ASP.NET Tips, Code, and Tutorials" /> </TreeNode> </IE:TreeView> </form> </body> </html> The C# version of this code can be found on the CD-ROM. When you open the page in Listing 8.1, the tree view in Figure 8.1 is displayed in your browser. Figure 8.1. A simple tree view. The first line in Listing 8.1 imports the Microsoft.Web.UI.WebControls namespace. Because the TreeView control is not part of the core ASP.NET Framework, you need to explicitly import this namespace to refer to classes in the Internet Explorer WebControls assembly. Next , you register the tag prefix IE for the Internet Explorer WebControls . Registering the prefix maps the prefix to the proper namespace for the controls. Notice that you use the IE prefix when declaring the TreeView control within the body of the page. The tree view in the body of the page consists of one TreeView control that contains three TreeNode child controls. Each TreeNode has a Text property that specifies the label for the node. The ASP.NET Books node contains the ASP.NET Unleashed and ASP.NET Tips, Code, and Tutorials nodes. Detecting TreeView Node SelectionsIn Listing 8.1, you created a simple tree view. If you click the ASP.NET Books node, the node expands to display its child nodes. However, if you click any of the child nodes, nothing happens. You need to add some logic to the page in Listing 8.1 to capture tree view events. The TreeView control supports four events:
If you want to detect when users select a particular node, you need to capture the SelectedIndexChanged event. The page in Listing 8.2 illustrates how you can associate a subroutine with this event. Listing 8.2 TreeViewSelectedIndexChanged.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <Script runat="Server"> Sub TreeView_SelectedIndexChanged(s As Object, e As TreeViewSelectEventArgs) lblSelectedNode.Text = treeBooks.GetNodeFromIndex(e.NewNode).Text End Sub </Script> <html> <head><title>TreeViewSelectedIndexChanged.aspx</title></head> <body> <form runat="Server"> <IE:TreeView id="treeBooks" AutoPostBack="True" OnSelectedIndexChange="TreeView_SelectedIndexChanged" Runat="Server"> <TreeNode Text="ASP.NET Books" > <TreeNode Text="ASP.NET Unleashed" /> <TreeNode Text="ASP.NET Tips, Code, and Tutorials" /> </TreeNode> </IE:TreeView> <p> <asp:Label id="lblSelectedNode" Runat="Server" /> </form> </body> </html> The C# version of this code can be found on the CD-ROM. In Listing 8.2, you add a property and method to the TreeView control declaration. You set AutoPostBack to the value True and associate the TreeView_SelectedIndexChanged subroutine with the OnSelectedIndexChanged method. When you select a new node in the tree view, the TreeView_SelectedIndexChanged subroutine executes. This subroutine assigns the text from the selected tree node to a Label control named lblSelectedNode . The TreeViewSelectEventArgs parameter has two properties:
Notice that both the NewNode and OldNode properties return a string, not an integer. For example, if you select the first book under the ASP.NET Books node, the NewNode property returns the string value 0.0 . If you select the second child node, the property returns the value 0.1 . The string represents the location of the node in the tree view hierarchy. In Listing 8.2, the GetNodeFromIndex method returns a TreeView node from its index. After you have the node, you can display its label by using the node's Text property. Associating URLs with TreeView NodesYou can associate a URL with any TreeView node. This capability is useful, for example, when you need to create a tree view for navigating your Web site. Listing 8.3 demonstrates how you can use the NavigateUrl property to create a tree view that enables you to display links to other Web sites. Listing 8.3 TreeViewNavigateUrl.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TreeViewNavigateUrl.aspx</title></head> <body> <form runat="Server"> <IE:TreeView Runat="Server"> <TreeNode Text="ASP.NET Web Sites" > <TreeNode Text="ASP Workshops" NavigateUrl="http://www.AspWorkshops.com" /> <TreeNode Text="Superexpert" NavigateUrl="http://www.Superexpert.com" /> </TreeNode> </IE:TreeView> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Associating Images with TreeView NodesYou can associate an image with each node in a tree view by using the TreeView control's ImageUrl property. By also specifying an ExpandedImageUrl property, you display different images depending on whether a node is expanded or collapsed. The page in Listing 8.4, for example, uses the ImageUrl and ExpandedImageUrl properties to display different folder images next to each node (see Figure 8.2). Listing 8.4 TreeViewImageUrl.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TreeViewImageUrl.aspx</title></head> <body> <form runat="Server"> <IE:TreeView ImageUrl="dir.gif" ExpandedImageUrl="dir_open.gif" Runat="Server"> <TreeNode Text="ASP.NET Web Sites"> <TreeNode Text="ASP Workshops" NavigateUrl="http://www.AspWorkshops.com"/> <TreeNode Text="Superexpert" NavigateUrl="http://www.Superexpert.com"/> </TreeNode> </IE:TreeView> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.2. Tree view with images. If you want to display different images for different types of nodes, you can use the TreeNodeType control. For example, the page in Listing 8.5 displays different images for the parent and child nodes (see Figure 8.3). Listing 8.5 TreeViewNodeType.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TreeViewNodeType.aspx</title></head> <body> <form runat="Server"> <IE:TreeView ImageUrl="dir.gif" ExpandedImageUrl="dir_open.gif" Runat="Server"> <TreeNodeType Type="Document" ImageUrl="text.gif" /> <TreeNode Text="ASP.NET Web Sites"> <TreeNode Text="ASP Workshops" Type="Document" NavigateUrl="http://www.AspWorkshops.com" /> <TreeNode Text="Superexpert" Type="Document" NavigateUrl="http://www.Superexpert.com"/> </TreeNode> </IE:TreeView> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.3. Tree view with multiple images. The TreeNodeType control associates a particular image with a particular type. Any node declared with the specified type displays the associated image. Associating Check Boxes with TreeView NodesYou can render a check box next to any node in a tree view by using the CheckBox property. You might, for example, want to use a tree view to display a hierarchical list of products for an online store. The page in Listing 8.6 demonstrates how you can display check boxes next to a list of ice cream flavors (see Figure 8.4). Listing 8.6 TreeViewCheckBox.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <Script runat="Server"> Sub Page_Load ShowChecked(treeIceCream.Nodes) End Sub Sub ShowChecked(colNodes As TreeNodeCollection) Dim tnNode As TreeNode For each tnNode in colNodes If tnNode.Checked = True Then lblCheckedNodes.Text &= "<li>" & tnNode.Text End If ShowChecked(tnNode.Nodes) Next End Sub </Script> <html> <head><title>TreeViewCheckbox.aspx</title></head> <body> <form runat="Server"> <IE:TreeView id="treeIceCream" AutoPostBack="True" Runat="Server"> <TreeNode Text="Ice Cream" > <TreeNode CheckBox="True" Text="Rocky Road"/> <TreeNode CheckBox="True" Text="Chocolate"/> <TreeNode CheckBox="True" Text="Strawberry"/> <TreeNode CheckBox="True" Text="Vanilla"/> </TreeNode> </IE:TreeView> <p> <asp:Label id="lblCheckedNodes" EnableViewState="False" Runat="Server" /> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.4. Tree view with check boxes. The Page_Load subroutine in Listing 8.6 iterates recursively through each node in the tree view. If a node is checked, the value of the node's Text property is appended to the text displayed by a Label control. The result that is every checked node is listed in the Label control. Binding the TreeView Control to an External XML FileInstead of specifying the nodes of a TreeView within the TreeView control itself, you can bind the TreeView control to an external XML file. To bind a TreeView to an XML file, you use the TreeNodeSrc property. The TreeView control in Listing 8.7, for example, is bound to an XML file named TreeNodes.xml . Listing 8.7 TreeViewNodeSrc.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TreeViewNodeSrc.aspx</title></head> <body> <form runat="Server"> <IE:TreeView TreeNodesrc="TreeNodes.xml" Runat="Server" /> </form> </body> </html> The C# version of this code can be found on the CD-ROM. The contents of the TreeNode.xml file, contained in Listing 8.8, are used to create all the nodes in the tree. Listing 8.8 TreeNodes.xml<TREENODES> <TREENODE TEXT="ASP.NET Web Sites"> <TREENODE TEXT="ASP Workshops" NAVIGATEURL="http://www.AspWorkshops.com" /> <TREENODE TEXT="Superexpert" NAVIGATEURL="http://www.Superexpert.com" /> </TREENODE> </TREENODES> The C# version of this code can be found on the CD-ROM. You also can bind XML files to individual nodes in a TreeView control. You can even bind a single TreeView control to multiple XML files, as illustrated in Listing 8.9. Listing 8.9 TreeViewNodeSources.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TreeViewNodeSources.aspx</title></head> <body> <form runat="Server"> <IE:TreeView AutoPostBack="True" Runat="Server"> <TreeNode Text="Microsoft ASP.NET Sites" TreeNodesrc="MicrosoftASPNET.xml" /> <TreeNode Text="Community ASP.NET Sites" TreeNodesrc="CommunityASPNET.xml" /> </IE:TreeView> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Notice that the TreeNodeSrc property is used with both TreeNode controls instead of the TreeView control. Also, notice that AutoPostBack is set to True . The TreeNode controls bind to the two XML files contained in Listings 8.10 and 8.11. Listing 8.10 MicrosoftASPNET.xml<TREENODES> <TREENODE TEXT="ASP.NET" NAVIGATEURL="http://www.asp.net" /> <TREENODE TEXT="GotDotNet" NAVIGATEURL="http://www.GotDotNet.com" /> </TREENODES> The C# version of this code can be found on the CD-ROM. Listing 8.11 CommunityASPNET.xml<TREENODES> <TREENODE TEXT="AspWorkshops" NAVIGATEURL="http://www.AspWorkshops.com" /> <TREENODE TEXT="Superexpert" NAVIGATEURL="http://www.Superexpert.com" /> </TREENODES> The C# version of this code can be found on the CD-ROM. Binding the TreeView Control to a Database TableThe TreeView control does not directly support binding to a database table. If you want to display database data with the TreeView control, you must trick it into thinking that you are binding it to an XML file. The page in Listing 8.12 illustrates how you can bind the TreeView control to the Categories and Products tables in the Northwind database (see Figure 8.5). Listing 8.12 TreeViewDataSet.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TreeViewDataSet.aspx</title></head> <body> <form runat="Server"> <IE:TreeView AutoPostBack="True" TreeNodesrc="Categories.aspx" Runat="Server" /> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.5. Tree view of the DataSet . In Listing 8.12, the TreeNodeSrc property binds the TreeView control to a file named Categories.aspx . The Categories.aspx file dynamically generates an XML file representing all the categories from the Categories table. The Categories.aspx file is included in Listing 8.13. Listing 8.13 Categories.aspx [View full width] <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <Script runat="Server"> Sub Page_Load Dim conNorthwind As SqlConnection Dim cmdCategories As SqlCommand Dim dstCategories As DataSet Dim strQuery As String conNorthwind = New SqlConnection("Server=localhost;UID=sa;PWD=secret; Database=Northwind") strQuery = "select CategoryName As Text, 'products.aspx?catid=' + LTRIM(STR(CategoryID The C# version of this code can be found on the CD-ROM. The Categories.aspx file renders an XML file within its Page_Load subroutine. First, a SQL SELECT statement that contains a for xml clause is created (this clause works only with Microsoft SQL Server 2000 and higher). The SELECT statement retrieves the contents of the Categories database table as an XML document. Next, a DataSet is created to represent the database query's results. Finally, the WriteXml method is called to output the contents of the DataSet as XML. When the Categories.aspx page is requested, it renders the following XML document: <TREENODES> <TreeNode Text="Beverages" TreeNodesrc="products.aspx?catid=1" /> <TreeNode Text="Condiments" TreeNodesrc="products.aspx?catid=2" /> <TreeNode Text="Confections" TreeNodesrc="products.aspx?catid=3" /> <TreeNode Text="Dairy Products" TreeNodesrc="products.aspx?catid=4" /> <TreeNode Text="Grains/Cereals" TreeNodesrc="products.aspx?catid=5" /> <TreeNode Text="Meat/Poultry" TreeNodesrc="products.aspx?catid=6" /> <TreeNode Text="Produce" TreeNodesrc="products.aspx?catid=7" /> <TreeNode Text="Seafood" TreeNodesrc="products.aspx?catid=8" /> </TREENODES> Notice that each TreeNode contains a TreeNodeSrc attribute, which points to another file named Products.aspx . Furthermore, a query string parameter representing the category ID is passed to the file. The Products.aspx file is contained in Listing 8.14. Listing 8.14 Products.aspx [View full width] <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <Script runat="Server"> Sub Page_Load Dim conNorthwind As SqlConnection Dim cmdProducts As SqlCommand Dim dstProducts As DataSet Dim strQuery As String conNorthwind = New SqlConnection("Server=localhost;UID=sa;PWD=secret; Database=Northwind") strQuery = "select ProductName As Text from Products As TreeNode " & _ "Where CategoryID=@categoryID for xml auto, XMLDATA " cmdProducts = New SqlCommand(strQuery, conNorthwind) cmdProducts.Parameters.Add(New SqlParameter("@categoryID", Request.QueryString( The C# version of this code can be found on the CD-ROM. The Products.aspx page is similar to the Categories.aspx page. Like the Categories.aspx page, the Products.aspx page renders an XML document. The Products.aspx page displays product names from the Products database table. When you pass a category ID to the page, an XML document representing the products that match the indicated category is displayed. Using the Toolbar ControlThe Toolbar control enables you to add a standard application toolbar to your ASP.NET pages. Like the TreeView control, the Toolbar control supports both up-level and down-level clients . When used with Internet Explorer 5.5 or higher, the control uses DHTML behavior. When it is used with a down-level browser, such as Netscape, standard HTML 3.2compliant content is generated. The Toolbar control itself acts as a container for one or more of the following controls:
In the following sections, you learn how to assemble a toolbar from these elements. Creating a Simple ToolbarTo add a simple toolbar to a page (see Figure 8.6), you need to complete the following steps:
Figure 8.6. A simple toolbar. Listing 8.15, for example, contains a single Toolbar control that contains six ToolbarButton controls separated by ToolbarSeparator controls. Listing 8.15 SimpleToolbar.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>SimpleToolbar.aspx</title></head> <body> <form runat="Server"> <IE:Toolbar Runat="Server"> <IE:ToolbarButton Text="File" /> <IE:ToolbarSeparator /> <IE:ToolbarButton Text="Edit" /> <IE:ToolbarSeparator /> <IE:ToolbarButton Text="View" /> <IE:ToolbarSeparator /> <IE:ToolbarButton Text="Favorites" /> <IE:ToolbarSeparator /> <IE:ToolbarButton Text="Tools" /> <IE:ToolbarSeparator /> <IE:ToolbarButton Text="Help" /> </IE:Toolbar> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Each ToolbarButton control in Listing 8.15 has a Text property that contains the label for the button. You can optionally supply an ImageUrl property, which adds an image to the button. Handling Toolbar EventsIf you want to perform an action when a user interacts with the Toolbar control, you need to create subroutines that handle Toolbar events. The Toolbar control raises two events:
The page in Listing 8.16, for example, contains a Toolbar control that contains a ToolbarTextBox , a ToolbarButton , and three ToolbarCheckButton controls. (The three ToolbarCheckButton controls are grouped in a ToolbarCheckGroup control.) Clicking the different buttons modifies the text displayed in a Label control. Clicking the ToolbarButton control assigns new text to the Label control. Clicking the ToolbarCheckButton control changes the color of the text (see Figure 8.7). Listing 8.16 ToolbarEvents.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <Script runat="Server"> Sub Toolbar_ButtonClick(s As Object, e As EventArgs) lblText.Text = txtSampleText.Text Select Case chkgColor.SelectedCheckButton.Text Case "Red" lblText.ForeColor = System.Drawing.Color.Red Case "Green" lblText.ForeColor = System.Drawing.Color.Green Case "Blue" lblText.ForeColor = System.Drawing.Color.Blue End Select End Sub </Script> <html> <head><title>ToolbarEvents.aspx</title></head> <body> <form runat="Server"> <IE:Toolbar AutoPostBack="True" OnButtonClick="Toolbar_ButtonClick" Runat="Server"> <IE:ToolbarLabel Text="Text" /> <IE:ToolbarTextBox id="txtSampleText" /> <IE:ToolbarButton Text="Update!" /> <IE:ToolbarSeparator /> <IE:ToolbarCheckGroup ID="chkgColor"> <IE:ToolbarCheckButton Text="Red" Selected="True" /> <IE:ToolbarCheckButton Text="Green" /> <IE:ToolbarCheckButton Text="Blue" /> </IE:ToolbarCheckGroup> </IE:Toolbar> <p> <asp:Label id="lblText" Font-Size="16pt" Runat="Server" /> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.7. Capturing toolbar events. When you click the ToolbarButton control or any of the ToolbarCheckButton controls, the Toolbar_ButtonClick subroutine is executed. This subroutine retrieves the text assigned to the ToolbarTextBox control and assigns it to a Label control named lblText . Next, the subroutine changes the foreground color of the Label control by using the SelectedCheckButton() method to retrieve the currently selected ToolbarCheckButton . Formatting the Toolbar ControlThe Toolbar control supports standard style properties, such as Font , Width , Height , BorderWidth , and BorderColor . It also supports a special formatting property named Orientation , which enables you to create a vertical toolbar instead of the default horizontal toolbar. These formatting properties are illustrated by the page in Listing 8.17. Listing 8.17 ToolbarStyle.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>ToolbarStyle.aspx</title></head> <body> <form runat="Server"> <IE:Toolbar Width="10px" Font-Name="Impact" Font-Size="16pt" BackColor="Orange" Orientation="Vertical" Runat="Server"> <IE:ToolbarCheckButton Text="File" /> <IE:ToolbarCheckButton Text="Edit" /> <IE:ToolbarCheckButton Text="View" /> <IE:ToolbarCheckButton Text="Favorites" /> <IE:ToolbarCheckButton Text="Tools" /> <IE:ToolbarCheckButton Text="Help" /> </IE:Toolbar> </form> </body> </html> The C# version of this code can be found on the CD-ROM. The toolbar rendered by the page in Listing 8.17 is oriented vertically with an orange background. It also renders text with a 16-point Impact typeface. Formatting Toolbar ButtonsYou can format the buttons displayed in a Toolbar control by assigning style attributes to the following properties:
The page in Listing 8.18, for example, displays unselected buttons with a blue font and selected buttons with a green font. When you hover the mouse pointer over a button, the button appears with a red font. Listing 8.18 ToolbarButtonStyle.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>ToolbarButtonStyle.aspx</title></head> <body> <form runat="Server"> <IE:Toolbar DefaultStyle="padding:10px;color:blue;font: 14pt Arial" SelectedStyle="padding:10px;color:green;font: 14pt Arial" HoverStyle="padding:10px;color:red;font: 14pt Arial" Runat="Server"> <IE:ToolbarCheckButton Text="File" /> <IE:ToolbarCheckButton Text="Edit" /> <IE:ToolbarCheckButton Text="View" /> <IE:ToolbarCheckButton Text="Favorites" /> <IE:ToolbarCheckButton Text="Tools" /> <IE:ToolbarCheckButton Text="Help" /> </IE:Toolbar> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Using the TabStrip ControlYou can use the TabStrip control to create a group of tabs in an ASP.NET page. When used with the MultiPage control, the TabStrip control can display different pages of content when different tabs are selected. Like the TreeView and Toolbar controls, the TabStrip control renders different content on up-level and down-level browsers. When used with Internet Explorer 5.5 or higher, the TabStrip control uses DHTML behavior. When used with other browsers, such as Netscape Navigator, the TabStrip control renders standard HTML 3.2compliant content. The TabStrip control contains one or more of the following controls:
Creating a Simple TabStripTo add a TabStrip to a page, you need to complete the following steps:
If you want to display different pages of content when different tabs are selected, you also need to add a MultiPage control to your page. Listing 8.19 illustrates how you can add a simple TabStrip to an ASP.NET page (see Figure 8.8). Listing 8.19 SimpleTabStrip.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>SimpleTabStrip.aspx</title></head> <body> <form runat="Server"> <IE:TabStrip TargetID="mpgPages" Style="width:400px;font: bold 10pt Arial;height:100%" TabDefaultStyle="width:50px;border:solid 1px blue;background:#dddddd; padding:5px" TabHoverStyle="color:red" TabSelectedStyle="background:white;border-bottom:none" SepDefaultStyle="width:10px;border-bottom:solid 1px blue;" Runat="Server"> <IE:Tab Text="Tab 1" /> <IE:TabSeparator /> <IE:Tab Text="Tab 2" /> <IE:TabSeparator /> <IE:Tab Text="Tab 3" /> <IE:TabSeparator DefaultStyle="width:100%" /> </IE:TabStrip> <IE:MultiPage id="mpgPages" Style="width:400px;padding:10px;border:solid 1px blue;border-top:none" Runat="Server"> <IE:PageView> Page 1 </IE:PageView> <IE:PageView> Page 2 </IE:PageView> <IE:PageView> Page 3 </IE:PageView> </IE:MultiPage> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.8. A simple TabStrip . The TabStrip in Listing 8.19 contains three Tab controls labeled Tab 1 through Tab 3 . A TabSeparator control appears after each Tab control to prevent the tabs from being scrunched together. Finally, the TargetID property of the TabStrip control points to the MultiPage control named mpgPages . The MultiPage control contains three pages that correspond to each of the three tabs. The pages are contained in PageView controls. If you click a tab in an up-level browser, such as Internet Explorer 5.5 or higher, the current page is switched on the client. No roundtrip to the server is made. If you click a tab in a down-level browser, such as Netscape, on the other hand, a roundtrip is made. Formatting a TabStripBy default, a TabStrip looks pretty ugly. To make a nicer looking TabStrip , you need to set some style properties. Each TabStrip , Tab , and TabSeparator control has style properties that you can modify. CAUTION The implementation of Cascading Style Sheets in Netscape Navigator is different from the implementation in Internet Explorer. Many of these style properties do not render correctly in the case of Netscape Navigator. You can set the following style properties for the TabStrip control:
In Listing 8.19, for example, you set the style attributes to the following values: Style="width:400px;font: bold 10pt Arial;height:100%" TabDefaultStyle="width:50px;border:solid 1px blue;background:#dddddd; padding:5px" TabHoverStyle="color:red" TabSelectedStyle="background:white;border-bottom:none" SepDefaultStyle="width:10px;border-bottom:solid 1px blue;" You also can set style attributes for individual Tab and TabSeparator controls in a TabStrip . Both the Tab and TabSeparator controls support the following style properties:
Creating a TabStrip with ImagesAs an alternative to using plain text to label the tabs in a TabStrip , you can use images (see Figure 8.9). The page in Listing 8.20 illustrates how you can create images for both the default and selected tabs. Listing 8.20 TabStripImage.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TabStripImage.aspx</title></head> <body> <form runat="Server"> <IE:TabStrip TargetID="mpgPages" Runat="Server"> <IE:Tab DefaultImageUrl="tab1.gif" SelectedImageUrl="tab1_selected.gif" /> <IE:TabSeparator /> <IE:Tab DefaultImageUrl="tab2.gif" SelectedImageUrl="tab2_selected.gif" /> <IE:TabSeparator /> <IE:Tab DefaultImageUrl="tab3.gif" SelectedImageUrl="tab3_selected.gif" /> <IE:TabSeparator DefaultStyle="width:100%" /> </IE:TabStrip> <IE:MultiPage id="mpgPages" Runat="Server"> <IE:PageView> Page 1 </IE:PageView> <IE:PageView> Page 2 </IE:PageView> <IE:PageView> Page 3 </IE:PageView> </IE:MultiPage> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.9. TabStrip with images. Two properties of the Tab control set the image used for each tab. The DefaultImageUrl property specifies the default image for the tab, and the SelectedImageUrl property specifies the image used when the tab is selected. You can also, optionally, provide a HoverImageUrl that specifies an image to show when the mouse pointer hovers over a tab. Creating a Vertical TabStripBy default, the tabs in a TabStrip are rendered horizontally. You can also create a vertical TabStrip by modifying the value of the TabStrip control's Orientation property (see Figure 8.10). A vertical TabStrip is illustrated in Listing 8.21. Listing 8.21 TabStripVertical.aspx<%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly ="Microsoft.Web.UI.WebControls" %> <html> <head><title>TabStripVertical.aspx</title></head> <body> <form runat="Server"> <table cellpadding=0 cellspacing=0 border=0> <tr><td> <IE:TabStrip TargetID="mpgPages" Orientation="Vertical" Style="width:50px;height:400px;font:bold 10pt Arial" TabDefaultStyle="border:solid 1px blue;background:#dddddd;padding:5px" TabHoverStyle="color:red" TabSelectedStyle="background:white;border-right:none" SepDefaultStyle="height:10px;border-right:solid 1px blue;" Runat="Server"> <IE:Tab Text="Tab 1" /> <IE:TabSeparator /> <IE:Tab Text="Tab 2" /> <IE:TabSeparator /> <IE:Tab Text="Tab 3" /> <IE:TabSeparator DefaultStyle="height:100%" /> </IE:TabStrip> </td><td> <IE:MultiPage id="mpgPages" Style="height:400px;width:600px;padding:30px;border:solid 1px blue; border-left:none" Runat="Server"> <IE:PageView> Page 1 </IE:PageView> <IE:PageView> Page 2 </IE:PageView> <IE:PageView> Page 3 </IE:PageView> </IE:MultiPage> </td></tr> </table> </form> </body> </html> The C# version of this code can be found on the CD-ROM. Figure 8.10. Vertical TabStrip . |
)) " & _ "As TreeNodeSrc from Categories As TreeNode for xml auto, XMLDATA" cmdCategories = New SqlCommand(strQuery, conNorthwind) conNorthwind.Open() dstCategories = New DataSet dstCategories.ReadXml(cmdCategories.ExecuteXmlReader(), XmlReadMode.Fragment) dstCategories.DataSetName = "TREENODES" dstCategories.WriteXml(Response.OutputStream) conNorthwind.Close() End Sub </Script> 
EAN: 2147483647
Pages: 263