Using the Microsoft Internet Explorer WebControls


Using the Microsoft Internet Explorer WebControls

The 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 Control

You 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 View

To create a simple tree view, complete the following steps:

  1. Import the proper namespace and register the TreeView control.

  2. Add a TreeView control to your page.

  3. Add one or more TreeNode controls to the TreeView control.

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.

graphics/08fig01.jpg

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 Selections

In 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:

  • Checked Raised when a node's check box is clicked

  • Collapse Raised when a node is collapsed

  • Expand Raised when a node is expanded

  • SelectedIndexChanged Raised when a new node is selected

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:

  • NewNode Returns a string representing the index of the selected node

  • OldNode Returns a string representing the index of the previous node

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 Nodes

You 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 Nodes

You 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.

graphics/08fig02.jpg

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.

graphics/08fig03.jpg

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 Nodes

You 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.

graphics/08fig04.jpg

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 File

Instead 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 Table

The 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 .

graphics/08fig05.jpg

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 graphics/ccc.gif )) " & _     "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> 

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( graphics/ccc.gif "catID")))   conNorthwind.Open()     dstProducts = New DataSet     dstProducts.ReadXml(cmdProducts.ExecuteXmlReader(), XmlReadMode.Fragment)     dstProducts.DataSetName = "TREENODES"     dstProducts.WriteXml(Response.OutputStream)   conNorthwind.Close() End Sub </Script> 

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 Control

The 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:

  • ToolbarButton Renders a standard image or text button

  • ToolbarCheckButton Renders a button that can be selected or unselected

  • ToolbarCheckGroup Groups multiple ToolbarCheckButton controls and causes them to function like radio buttons (only one can be selected at a time)

  • ToolbarDropDownList Renders a drop-down list that can be used as a simple menu

  • ToolbarLabel Renders a text or image label

  • ToolbarSeparator Renders a separator between items in the Toolbar control

  • ToolbarTextBox Renders a text box

In the following sections, you learn how to assemble a toolbar from these elements.

Creating a Simple Toolbar

To add a simple toolbar to a page (see Figure 8.6), you need to complete the following steps:

  1. Import the proper namespace and register the Toolbar control.

  2. Add a Toolbar control to your page.

  3. Add one or more ToolbarButton , ToolbarCheckButton , ToolbarCheckGroup , ToolbarDropDownList , ToolbarLabel , ToolbarSeparator , or ToolbarTextBox controls to the Toolbar control.

Figure 8.6. A simple toolbar.

graphics/08fig06.jpg

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 Events

If 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:

  • ButtonClick This event is raised when you click a button in the toolbar.

  • CheckChange This event is raised when a ToolbarCheckButton changes state.

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.

graphics/08fig07.jpg

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 Control

The 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 Buttons

You can format the buttons displayed in a Toolbar control by assigning style attributes to the following properties:

  • DefaultStyle The style applied to the Toolbar button when the button is not selected and the mouse pointer is not hovering over the button

  • SelectedStyle The style applied to the Toolbar button when the button is selected

  • HoverStyle The style applied to the Toolbar button when the mouse pointer is hovering over the button

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 Control

You 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:

  • Tab Creates an individual tab in the TabStrip

  • TabSeparator Separates tabs in a TabStrip

Creating a Simple TabStrip

To add a TabStrip to a page, you need to complete the following steps:

  1. Import the proper namespace and register the TabStrip control.

  2. Add a TabStrip control to your page.

  3. Add one or more Tab or TabSeparator controls to the TabStrip control.

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 .

graphics/08fig08.jpg

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 TabStrip

By 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:

  • Style Specifies the style attributes applied to the TabStrip control

  • TabDefaultStyle Specifies the style attributes applied to each Tab control by default

  • TabSelectedStyle Specifies the style attributes applied to the selected Tab

  • TabHoverStyle Specifies the style attributes applied to a Tab when the mouse pointer hovers over it

  • SepDefaultStyle Specifies the style attributes applied to each TabSeparator control by default

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:

  • DefaultStyle Specifies the style attributes applied to the control by default

  • SelectedStyle Specifies the style attributes applied to the control when the control is selected

  • HoverStyle Specifies the style attributes applied to a control when the mouse pointer hovers over it

Creating a TabStrip with Images

As 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.

graphics/08fig09.jpg

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 TabStrip

By 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 .

graphics/08fig10.jpg



ASP.NET Unleashed
ASP.NET 4 Unleashed
ISBN: 0672331128
EAN: 2147483647
Year: 2003
Pages: 263

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net