Use the Treeview ie Web Control

Scott Mitchell
July 2003
Applicable to: Microsoft ASP. NET

Abstract:Learn about the Treeview web control and how to apply it to ASP. NET web applications.ProgramUse the Treeview web control. In addition to standard ASP. NET Web controls (such as Textbox, dropdownlist, DataGrid, and datalist), Microsoft also released an additional web control set to fully utilize the Inherent functions of Internet Explorer. These new Web controls are known as Internet Explorer Web controls, also known as IE Web controls. They contain four controls, one of which is Treeview web control. (This article contains links to English sites .)

Download treeviewcontrol. MSI

Directory

Introduction
Install the IE Web Control
Getting started with IE Web controls
Getting started with Treeview ie Web Control
Other advanced features of Treeview
Summary

Introduction

In 2002, Microsoft released four ASP. NET Web controls to provide a better experience for Web visitors using Microsoft Internet Explorer. These Web controls are called Internet Explorer Web controls, or IE Web controls for short. They include the following four controls:

• Multipage Web Control
• Tabstrip Web Control
• Toolbar Web Control
• Treeview Web Control

These Web controls enhance ASP. NET web pages by providing user interfaces familiar to Web visitors. For example, the toolbar web control can display a toolbar similar to the toolbar in various Microsoft Office products, you can click the toolbar. Tabstrip and multipage Web controls can be used together to display option-style content. The Treeview web control can be used to display data in clickable and expandable trees-similar to displaying drives and folders in a PC File System Using a tree in Microsoft Windows Resource Manager. (You can find a vivid demonstration of these Web controls at the gotdotnet site: webcontrol toolbar demonstration, tabstrip/multipage webcontrol demonstration, and Treeview sample webcontrol demonstration .)

The IE web control can be used on a Web server installed with. NET Framework 1.0 or 1.1. Although ie Web controls are designed to work with Internet Explorer, they can also be displayed in other browsers. However, in browsers other than Internet Explorer, when users interact with the IE web control (for example, expand a node in the Treeview web control), a return occurs. In Internet Explorer 5.5 or later, the IE web control sends DHTMLCodeTo avoid the occurrence of callback. That is to say, when accessing your web site, visitors using Internet Explorer 5.5 or later will have a better user experience than users using other browsers. Of course, users who do not use IE 5.5 or later can still see and interact with the IE web control.

Next, this article will mainly introduce the Treeview ie Web Control and discuss how to use this control to display data on the ASP. NET web page. For more information about other IE Web controls, see Internet Explorer Web controls overview and Internet Explorer Web controls reference.

Install the IE Web Control

To use the IE Web Control in ASP. NET web applications, you must first downloadSource codeThen, run a compilation batch file to compile the source code and copy all the required files to the corresponding web application directory. The Internet Explorer Web Control download package is a 360 kb self-extracting Installation File.

After downloading and installing the IE web control, a new directory will be created (default: C: \ Program Files \ IE Web controls \, you can also configure this directory during installation ). Find the new directory and double-clickBuild. batFile. This will create a new subdirectoryBuild, CompileSRCClass in the subdirectory, and copy the generated assembly and supporting filesBuildSubdirectory.

RunBuild. batThe build subdirectory contains the Assembly file.Microsoft. Web. UI. webcontrols. dllAnd sub-DirectoriesRuntime. To use the IE web control in an ASP. NET web application, you mustBuild \ RuntimeCopy the content in the subdirectory to/Webctrl_client/route 0Sub-directory, and the Assembly file (Microsoft. Web. UI. webcontrols. dll) Copied to the Web Application/BinSubdirectory. (In the IE web controlReadme.txtFile, provides examples and command line instructions for executing these tasks .)

Getting started with IE Web controls

If Microsoft Visual Studio. NET is used to develop ASP. NET web applications, it is easy to add the IE web control to the ASP. NET web page. First, include the IE Web Control in the toolbox. To complete this operation, right-click the toolbox and select the Customize toolbox option. Select the. NET Framework components (. NET Framework component) tab, and click the Browse button. FindMicrosoft. Web. UI. webcontrols. dllAssembly file, and then click OK ). This adds ie Web controls such as multipage, tabstrip, toolbar, and Treeview to the Visual Studio. NET toolbox. To add any of the preceding controls to the ASP. NET web page, drag and drop the corresponding controls from the toolbox to the designer.

To use the IE web control in a class containing code, right-click reference and select add referenceMicrosoft. Web. UI. webcontrols. dllPrograms. Then, in the class containing the Code, if C # is used, addUsing Microsoft. Web. UI. webcontrolsIf Microsoft Visual Basic. NET is used, addImports Microsoft. Web. UI. webcontrols.

If Visual Studio. NET is not used as the ASP. NET web application Editor, manually add the following@ RegisterCommand:

 
<% @ Register tagprefix ="Whatever"Namespace =" Microsoft. Web. UI. webcontrols "assembly =" Microsoft. Web. UI. webcontrols "%>
 

Then, add the IE web control to the web page and use the following syntax:

 
<Whatever: webcontrolname runat = "server"...>... </whatever: webcontrolname>
 

For example, to add a Treeview control, you can add the following@ RegisterCommand:

<% @ Register tagprefix = "iewc" namespace = "Microsoft. Web. UI. webcontrols" assembly = "Microsoft. Web. UI. webcontrols" %>
 

Then, add the following web control syntax to the position where you want to display the Treeview on the ASP. NET web page:

 
<Iewc: Treeview Runat = "server"...>... </iewc: Treeview>
 

Getting started with Treeview ie Web Control

When the Treeview ie web control is displayed in the visitor's browser, a tree is displayed, which is similar to the tree in Windows Resource Manager. The difference is that Treeview can be composed of any number of treenode objects. Each treenode object can be associated with text and images. In addition, treenode can be displayed as a hyperlink and associated with a URL. Each treenote can also contain any number of child treenote objects. The hierarchy that contains the treenode and its subnodes constitutes the tree structure presented by the Treeview control.

Suppose you want to build a Treeview Control for displaying genealogy. Because the information basically does not need to be modified, you may want to specify the Treeview structure statically. If Visual Studio. NET is used, it is as easy to specify the Treeview structure statically as entering several tables. First, drag and drop the Treeview control from the toolbox to the designer to add the new Treeview control to the ASP. NET web page. ThenIDSet propertyTvfamilytree. After completing these two steps, your screen shouldFigure 1Similar.

Figure 1: simple Treeview

Now, you must specify the treenode to form the Treeview. Select the nodes (node) Attribute from the properties pane and click the ellipsis on the right of the attribute. The treenodeeditor dialog box is displayed. Now you can add a new treenode to the Treeview.Figure 2The treenodeeditor dialog box is displayed after the family tree information is entered.

Figure 2: treenodeeditor dialog box

After filling in the treenodeeditor dialog box, the following mark will be added to. AspxPart:

<Ie: Treeview id = "tvfamilytree" runat = "server"> <ie: treenode text = "John Smith"> <ie: treenode text = "Born: Jan. 3rd, 1885 "> </ie: treenode> <ie: treenode text =" Died: Feb. 13,191 9 "> </ie: treenode> <ie: treenode text =" spouse "> <ie: treenode text =" Marie Ellsworth "> <ie: treenode text =" Born: aug. 1, 1889 "> </ie: treenode> <ie: treenode text =" Died: Unknown "> </ie: treenode> <ie: treenode text = "children"> <ie: treenode text = "John Smith, Jr. "> <ie: treenode text =" Born: July 4, 1891 "> </ie: treenode> <ie: treenode text =" Died: Sept. 22,189 3 "> </ie: treenode> <ie: treenode text =" Mary Smith "> <ie: treenode text =" Born: June 7, 1893 "> </ie: treenode> <ie: treenode text =" Died: Aug. 13,194 9 "> </ie: treenode> <ie: treenode text =" spouse "> <ie: treenode text =" Edward Joy "> <ie: treenode text =" Born: unknown "> </ie: treenode> <ie: treenode text =" Died: Aug. 13,194 9 "> </ie: treenode> <ie: treenode text =" children "> <ie: treenode text =" Michael Joy "> <ie: treenode text = "Born: Oct. 8, 1918 "> </ie: treenode> <ie: treenode text =" Michelin Joy "> <ie: treenode text =" Born: may 21,192 0 "> </ie: treenode> </ie: treenode> </ie: Treeview>

If you do not use Visual Studio. NET as the editor, you must manually add this content to the ASP. NET web page. When you view ASP. NET web pages in a browser, an expandable tree is displayed, as shown in figureFigure 3. (Figure 3The tree after each node is expanded. By default, only the root node is displayed. You can setExpandedAttribute to indicate that the treenote should be expanded when this page is viewed for the first time .)

Figure 3: Expanded treenote

In addition to text tags, treenote can also be associated with images. In particular, each treenote can be associated with three images: an image is displayed when the treenote is in the standard (folding) state, and another image is displayed when the treenote is in the expanded State; the third image is displayed when the treenote is selected (when the user clicks treenote, the node changes to the selected state. All three attributes need a URL pointing to the specified image.

For example, you can use the following method to show the family tree:ImageurlProperty to point to the URL of a closed folder image.ExpandedimageurlProperty is set to point to the URL of an opened folder image, so that the collapsed and expanded treenote are displayed as closed folders and open folders respectively. (If you want to change an image for the selected treenote, you only needSelectedimageurlSet the property to the corresponding URL .)

Note that both Treeview and treenote haveImageurl,ExpandedimageurlAndSelectedimageurlAttribute. The difference is that when you setTreeviewBy defaultAllTreenote will display the specified image. If you set the treenote attributes, these attributes only apply to the current specific treenote. Because we want all the treenote to show as closed folders when it is folded and as open folders when it is expandedImageurlAndExpandedimageurlAttribute.

After setting these new attributes,Figure 3. In the new Treeview appearance, images are displayed next to the treenote, as shown inFigure 4.

Figure 4: treenote with image

Treenote can also be associated with a URL. When you click a treenote associated with a URL, the user is automatically quickly linked to the specified URL. TreenoteNavigateurlAttribute indicates the URL to which the user is linked when you click treenote. This function is useful for ASP. NET web pages that contain two windows. The left-side window box contains a Treeview control. When you click a treenote, the node details are displayed in the right window, which is similar to clicking a system folder in the left pane in Windows Resource Manager, the file in this folder will be displayed in the right pane in a similar way.

To associate a URL, you only needNavigateurlSet as the corresponding URL. To load the associated URLs of treenote to other browser windowsTargetSet the property to the corresponding window name. These steps can be completed through the treenodeeditor. To view examples of such applications, see Steve sharrock's introduction to using Treeview to create Resource Manager-style ASP. NET web applicationsArticle: Treeview-programming An Explorer-style site view.

Other advanced features of Treeview

Although the process of adding static treenote to the Treeview using Visual Studio. NET is very simple, it is usually necessary to dynamically Add the content to the Treeview. For example, if you store the family tree information in a database or are designing a resource manager-style Web application (in this application, you can browse the file system of the Web server ), in this case, you may need to dynamically fill the treenote according to the folder and file on the server.

In the classes containing code, you can add treenote to the Treeview programmatically. To add a new treenote to an existing treenote, you only need to use the add () method of the nodes attribute. For example, the following C # Code creates two treenote and adds the second treenote as the child node of the first treenote. Then, add the first child node to the root node of the Treeview.

// Create the first treenotetreenode tvfirst = new treenode (); tvfirst. TEXT = "First tree node"; // create the second treenotetreenode tvsecond = new treenode (); tvsecond. TEXT = "second tree node"; // Add the second treenote as the first child node tvfirst. nodes. add (tvsecond); // Add the first treenote to the root node of the Treeview. Tvfamilytree. nodes. Add (tvfirst );
 

Unfortunately, binding database data to Treeview is not as easy as binding data to a standard ASP. NET web control. Because Treeview is used to display hierarchical data, it is not suitable for displaying the results of simple SQL queries. Therefore, Treeview is not used to display the content of a simple SQL query, but to display the content of an XML file. Therefore, to facilitate the display of database information in the Treeview, you must first convert it to XML.

In addition, although the Treeview control can display static or dynamic XML files, the Treeview requires that the XML data have a specific format. Therefore, to display XML files in Treeview, you must provide an XSLT style table to convert XML from the current format to the format required by Treeview. For more information about how to complete this task, see my article: displaying XML data in the Internet Explorer Treeview control.

In addition to images and hyperlinks, The treenote of Treeview can also contain check boxes. In addition, when you expand or collapse a treenote, select a treenote, or select or deselect A treenote with a check box, the corresponding event is triggered. You can create an event handler for these events to customize the operations triggered by these events.

Summary

In this article, we briefly introduce the IE web control and how to obtain and install these controls, and discuss in detail how to use the Treeview ie web control. The Treeview control is displayed in a way similar to the standard Windows Treeview (you can experience it by performing operations in Windows resource manager ). Treeview is used to display layered data. It can be composed of any number of treenote, and each treenote can contain any number of sub-treenote.

You can customize the appearance of a treenote in multiple ways. For example, you can specify different images for the treenote in the folding, expanding, and selected statuses. When you click treenote, The treenote can be used as a hyperlink to redirect visitors to other URLs. Treenote can also contain check boxes.

With Visual Studio. NET and the treenote editor, you can easily display static data in the Treeview. You can dynamically specify the contents of the Treeview control by adding a treenote to an XML file or programmatically. Although this article only describes the Treeview control, it is also helpful for you to initially understand how to use the Treeview control in ASP. NET web applications.

Enjoy programming!

Recommendation link:

• Displaying XML data in the Internet Explorer Treeview Control
• Internet Explorer Web controls Overview
• Internet Explorer Web controls reference
• Using the Internet Explorer Web controls
• Treeview-programming An Explorer-style site View
• ASP. NET forums: Internet Explorer Web controls discussion forum

Author Profile

Scott MitchellI wrote five books about ASP/ASP. NET, the founder of 4guysfromrolla.com. I have been engaged in Microsoft Web Technology Research for the past five years. Scott is ASP and ASP. NETCommunityA very active member who loves ASP and ASP. NET technologies and is very willing to help others understand these exciting technologies. For details about the DataGrid, datalist, and repeater controls, see Scott's new book ASP. NET data Web controls kick start (ISBN is 0672325012 ).