Use the TreeView control in ASP.NET [Series]

Use the TreeView control in ASP.NET [Series]

Published: 2004-10-9

Author: Unknown Introduction In 2002, Microsoft released four ASP.NET Web controls to provide a better experience for Web visitors to use of Microsoft Internet Explorer. These web controls are called Internet Explorer web controls, as well as IE web controls, including the following four controls: Multipage Web Control TabStrip Web Control Toolbar Web Control TreeView Web Controls These web controls are enhanced by providing web accessers familiar with web access. ASP.NET web page. For example, the Toolbar web control can display a clickable toolbar similar to the toolbar in a variety of Microsoft Office products. Tabstrip and Multipage Web controls can display tabular contents after use. The TreeView Web control can be used to display data in a clicked tree - with a tree in the Microsoft Windows® Explorer to display the drive and folders in the PC file system. (You can find a vivid presentation of these web controls in the GotdotNEt site: WebControl Toolbar demonstration, TabStrip / Multipage WebControl Demo and TreeView Sample WebControl Demo.) The IE web control can be used on a web server installed .NET Framework version 1.0 or 1.1 web server. Although the IE Web control is designed to be used with Internet Explorer, these web controls can also be displayed in other browsers. However, in a browser other than Internet Explorer, a backhabeling occurs when the user interacts with the IE web control (for example, a node in the TreeView web control). In Internet Explorer 5.5 or higher, the IE web control sends a DHTML code to avoid the occurrence of backhaul. That is, visitors who use Internet Explorer 5.5 or higher when accessing your Web site, will get a better user experience than users using other browsers; of course, no IE 5.5 or higher Users can still see the IE web control and can interact with it. Below, this article will mainly introduce the TreeView IE web control and discuss how to use this control to display data in 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. Installing the IE Web Control To use the IE web control in the ASP.NET web application, you must first download the source code of the control, then run a compiled batch file, compile the source code and copy all the required files to the corresponding The web application directory. The Internet Explorer Web Control Download Package is a self-destructive installation file with a size of 360 kb. After downloading and installing the IE web control, a new directory will be created (default is C: / Program Files / IE Web Controls /, you can also configure this directory during the installation process). Find this new directory, then double-click the build.bat file.

This will create a new subdirectory build, compile class in the SRC subdirectory, and copy the generated assemblies and support files into the build subdirectory. After running the build.bat file, the build subdirector will contain the assembly file Microsoft.Web.ui.WebControls.dll and subdirectory Runtime. To use the IE web control in the ASP.NET Web application, you must copy the contents of the build / runtime subdirectory to the Web application / WebCtrl_client / 1_0 subdirectory, and put the assembly files (Microsoft.Web.ui. WebControls.dll is copied into the / bin subdirectory of the web application. (In the readme.txt file of the IE web control, a command line instruction for performing these tasks is provided.) IE Web Control Getting Started If you are using Microsoft Visual Studio? Net to develop ASP.NET web applications, IE Web Control Add to the ASP.NET web page is a relaxed thing. First, include the IE web control in the toolbox. To do this, right click on the Toolbox and select the Customize Toolbox option. Select the .NET Framework Components tab, and then click the Browse button. Find the Microsoft.Web.ui.WebControls.dll assembly file, and then click OK. This will add the IE web controls such as MultiPage, Tabstrip, Toolbar, and TreeView to the Visual Studio .Net toolbox. To add any of the above controls to the ASP.NET web page, you only need to drag and drop the corresponding control from the toolbox to the designer. To use the IE web control in the category of the code, you first need to right-click Reference, then select Add Reference to add the reference to the Microsoft.Web. WebControls.dll program. Then, in the class of the code, if you are using C #, add USING Microsoft.Web.ui.webControls; if you are using Microsoft Visual Basic .NET, add imports Microsoft.Web.ui.WebControls.

If you don't use Visual Studio .NET as an ASP.NET Web Application Editor, you need to manually add the following @register command at the top of the ASP.NET web page: <% @regiTer tagprefix = / wherever / namespace = / microsoft.web. Ui.WebControls / askEMBLY = / microsoft.web.ui.webControls /%> Then add the IE web control to the web page, you can use the following syntax: ... For example, to add a TreeView control, you can add the following @register command at the top of the page: <% @ register tagprefix = / @ register tagprefix = / iewc / namespace = / microsoft.web.ui.WebControls / assembly = / microsoft.web. UI.WebControls /%> Next, you want to display the following web control syntax in the ASP.NET web page: ... TreeView IE WEB Control When TreeView IE Web Control is displayed in the Accessor Browser, a tree is displayed, which is very similar to the tree in the Windows Explorer. Different, TreeView can consist of any multiple Treenode objects. Each TREENODE object can be associated with text and images. In addition, Treenode can also be displayed as hyperlinks and associated with a URL. Each Treenote can also include any multiple sub-Treenote objects. The hierarchy containing Treenode and its subtasy constitutes the tree structure presentation by the TreeView control. Suppose you want to build a TreeView control for displaying a genealogy. Since the information does not need to be changed, you may want to quit the TreeView structure statically. If you are using Visual Studio .NET, static specifying the TreeView structure is as simple as filling in several tables. First, by dragging the TreeView control from the toolbox to the designer, add the new TreeView control to the ASP.NET web page. Then, set the ID attribute of the TreeView control to TvFamilytree. Now, you want to static TREENODE that makes up TreeView. Select the NODES attribute from the Properties pane, and then click the omitial button on the right of this property. The TreenodeEdETOR dialog is displayed at this time. Now you can add new Treenode to TreeView.

After filling the TreenodeEditor dialog, the following tags will be added to the ASP.NET web page:

If not using Visual Studio .NET as an editor, you need to manually add this to the ASP.NET web page. When viewing the ASP.NET web page via the browser, an expandable tree will be displayed. By default, only the root node is displayed. You can set the Treenote's Expanded Properties to indicate that the Treenote should be expanded when you see this page for the first time. In addition to the text tag, Treenote can also associate images. Each TREENOTE can be associated with three images: one image is displayed when Treenote is in standard (folded) state; another image is displayed when Treenote is expanded; when Treenote is selected (when the user When you turn Treenote, the node changes to the selected state) When the third image is displayed. These three properties require a URL to the specified image. For example, the family tree can be expanded by the following method: set the TreeView's imageURL property to the URL of a closed folder image, set the TreeView's ExpandedImageURL attribute to point to a URL of an open folder image, respectively, Folding and expanded Treenote showed a closed folder and an open folder. (If you want to change an image for the selected Treenote, you only need to set the TreeView's SELECTEDIMAGEURL to the corresponding URL.) Please note that TreeView and Treenote have imageURL, ExpandedImageURL, and SELECTEDIMAGEURL properties. Different, when setting the properties of TreeView, by default, all Treenote in TreeView will display the specified image; if you set the Treenote properties, these properties apply only to current Treenote. Since we want all Treenote display as a closed folder when all Treenote is folded, the folder is displayed as an open state, so we set up the ImageURL and ExpandedImageURL properties of the TreeView control. After setting these new properties, the appearance has a lot of color. In the new TreeView look, there is an image next to Treenote. Treenote can also be associated with the URL. When you click Treenote with a URL, you will automatically link the user to the specified URL. The Treenote's NaviGateURL property is used to indicate the URL link the user when you click Treenote. This feature is very useful for the ASP.NET web page containing two windows. The left window box contains a TreeView control.

When a user clicks a Treenote, the node details will be displayed in the right window box, which is in a system folder in the left pane in the Windows Explorer, the file. The situation in the right pane is displayed is similar. To associate URL, you only need to set each Treenote's NaviGateURL to the corresponding URL. To load Treenote's associated URL to another browser window box, set the Treenote's target property to the corresponding window frame name. These steps can be done by TreenodeEditor (Treenote Editor). To view an example of such applications, see Steve Sharock About Using TreeView Creating an Explorer-Style Site View. Other Advanced features of TreeView Although the process of adding the static Treenote added static Treenote to the TreeView using Visual Studio .NET, it is usually necessary to dynamically add content to TreeView. For example, you store the family tree information into the database, or you are designing a resource manager style web application (in this application, the user can browse the web server file system), then you may need to be based on the server Folders and files are dynamically populated with Treenote. In a class containing code, you can add Treenote to TreeView by programming. To add new Treenote to an existing Treenote, you only need to use the Add () method of the NODES attribute. For example, the following C # code will create two Treenote and add the second Treenote as the child node of the first Treenote. Then, the first child node is added to the root node of the TreeView. // Create the first trenotetreenode tvfirst = new Treenode (); tvfirst.text = / first tree node /; // creates the second trenotetreenode tvsecond = new Treenode (); tvsecond.text = / second tree node /; ///// Add a second Treenote to the first Treenote's child node TVFirst.NODES.ADD (TVSecond); // Add the first Treenote to the root node of the TreeView. TvfamilyTree.Nodes.Add (TVFirst); Unfortunately, bind database data to TreeView is not as simple as smuggling data to a standard ASP.NET web control. Because the TreeView itself is used to display the hierarchical data, it is not suitable for displaying the result of the simple SQL query. Therefore, TreeView is not used to display the content of the simple SQL query, but is used to display the content of the XML file. So, in order to facilitate display database information in TreeView, you must first convert it to XML. Moreover, although static or dynamic XML files can be displayed in the TreeView control, TreeView requires XML data to have a specific format. Therefore, to display an XML file in TreeView, an XSLT style sheet must be provided to convert XML from the current format to the TreeView requirements.