Use the TreeView IE web control

xiaoxiao2021-03-05 46

SCOTT MITCHELL 2003 for: Microsoft® ASP.NET

Summary: Learn about the TreeView web control and learn how to use the TreeView web control in the ASP.NET web application. In addition to standard ASP.NET web controls (such as TextBox, DropDownList, DataGrid, DataList, etc.), Microsoft also releases additional Web control sets to give full play to the natural features of Internet Explorer. These new web controls are called Internet Explorer web controls, as well as IE web controls, including four controls, one of the TreeView Web controls. (This article contains some links to English sites.)

Download TreeViewControl.msi

table of Contents

Introduction Installing IE Web Control IE Web Control Getting Started TreeView IE Web Control Other Advanced Features Summary Treve

Introduction

In 2002, Microsoft® released four ASP.NET Web controls for providing a better experience for web accessors using 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 Control

These web controls enhance the ASP.NET web page by providing a user interface familiar to Web Accessors. 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 - similar to the drive and folders in the Microsoft Windows® Explorer to display the PC file system. (You can find a vivid presentation of these web controls at the GotdotNEt site: WebControl Toolbar Demo, TabStrip / Multipage WebControl Demo and TreeView Sample WebControl demonstration.)

IE Web controls 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. Install 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 web application directory. in. 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, the command line instructions for performing these tasks are provided.)

IE Web Control Getting Started

If you are using Microsoft Visual Studio® .NET to develop an ASP.NET web application, add the IE web control 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 are not using Visual Studio .NET as an ASP.NET Web Application Editor, you need to add the following @register instructions to the top of the ASP.NET web page:

<% @ Register tagprefix = "whatver"

Namespace = "Microsoft.Web.ui.WebControls"

AskMBLY = "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 directive at the top of the page:

<% @ Register tagprefix = "iewc"

Namespace = "Microsoft.Web.ui.WebControls"

AskMBLY = "Microsoft.Web.ui.WebControls"%>

Next, you want to display the following Web Control Syntax in the ASP.NET Web page:

...

TreeView IE Web Control Getting Started

When the TreeView IE web control is displayed in the visitor 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. After completing these two steps, your screen should be similar to Figure 1.

Figure 1: Simple TreeView now, you want to static TREENODE that makes it upview. 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. Figure 2 shows the TREENODEEDITOR dialog after entering the information of the family tree.

Figure 2: TreenodeEditor (Treenote Editor) dialog

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

// Create a second Treenote

Treenode tvsecond = new treenode ();

Tvsecond.text = "Second Tree Node";

// Add the second Treenote to the child node of the first Treenote

TVFirst.Nodes.Add (TVsecond);

// Add the first Treenote to the root node of TreeView.

Tvfamilytree.nodes.add (TVFirst);

Unfortunately, bind database data to TreeView, unlike to bind 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. For more information on how to complete this task, see My article: Displaying XML Data In The Internet Explorer TreeView Control.

In addition, TreeView's Treenote can also include a checkbox next to it. Moreover, when the user expands or folds Treenote, select Treenote, or select or uncheck the Treenote with the check box, the corresponding event will cause the corresponding event. Event handlers can be created for these events to customize the corresponding operations thrown by these events.

summary

In this article, we briefly introduce the IE web control and how to get and install these controls, and discuss how to use the TreeView IE web control. The TreeView control is displayed similar to the standard Windows TreeView (can be experienced by operating in Windows Explorer). TreeView is used to display the layered data, which can be composed of any multiple Treenote, and each Treenote can also contain any multiple Treenote.

You can customize the appearance of Treenote in a variety of different ways. For example, different images can be specified for Treenote in which fold, unfolding, and selected states. When you click Treenote, Treenote can redirect the visitor to other URLs as a hyperlink. Treenote can also include checkboxes.

Use the Visual Studio .NET and can easily display static data in the TreeView with the TREENOTE editor. You can dynamically specify the contents of the TreeView control via an XML file or by programming Treenote. Although this article introduces only the fur of the TreeView control, it is also helpful for your initial understanding of using the TreeView control in the ASP.NET Web application.

Enjoy the fun of programming!

9cbs

New Post(0)