Use of Treeview ie Web controls (intuitive)

In Visual Studio. net, except for the standard ASP. in addition to net Web controls (such as Textbox, dropdownlist, DataGrid, and datalist), Microsoft also released an additional web control set to give full play to the inherent functions of Internet Explorer. These new Web controls are called Internet Explorer Web controls, also referred to as IE Web controls. They include four controls, Treeview Web controls, multipage Web controls, tabstrip Web controls, and toolbar Web controls. Treeview Web controls are one of them.

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 the data in the clickable and expandable tree, which is similar to displaying the drive and folder in the file system using the tree in resource manager.

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.

Install the IE Web Control

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

: Http://asp.net/IEWebControls/Download.aspx? Tabindex = 0 & Tabid = 1

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 build. BAT file in the installation directory and open it in notepad. Change "“csc.exe" to the absolute path "C: \ winnt \ Microsoft. NET \ framework \ v1.1.4322 \ csc.exe" (change this path to the path on your computer ). Save and execute (remember to remove the "read-only" attribute ).

After running the build. BAT file, the build subdirectory contains the Assembly file Microsoft. Web. UI. webcontrols. dll and the subdirectory runtime. In ASP. to use the IE Web Control in A. NET web application, you must copy the content in the build \ Runtime subdirectory to the/webctrl_client/runtime 0 subdirectory of the Web application, and copy the Assembly file (Microsoft. web. UI. webcontrols. DLL) to the/bin subdirectory of the Web application. (The readme.txt file of the IE Web Control provides examples and command line instructions for executing these tasks .)

Getting started with IE Web controls

If Visual Studio. NET is used to develop ASP. NET web applications, it is easy to add the IE web control to ASP. NET web pages. First, include the IE Web Control in the toolbox. To complete this operation, right-click the toolbox and select the Add/Remove items option. Select the ". NET Framework components" tab and click the "Browse" button. Find the Microsoft. Web. UI. webcontrols. dll Assembly file, and 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 reference" to add the reference to Microsoft. web. UI. webcontrols. DLL assembly. Then, add using Microsoft. Web. UI. webcontrols to the class containing the Code.

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 provinces. 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. You only need to select the nodes (node) attribute in the "properties" pane, and then click the ellipsis on the right of this attribute. The treenodeeditor dialog box is displayed. This completes the addition!

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 expand the tree: Set the imageurl attribute of the Treeview to the URL of a closed folder image, set the expandedimageurl attribute of Treeview to the URL of an opened folder image to display the collapsed and expanded treenote as closed folders and opened folders respectively. (If you want to change an image for the selected treenote, you only need to set the selectedimageurl attribute of the Treeview to the corresponding URL .)

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, you can store the tree information in a database or design a resource manager-style Web application (in this application, you can browse the file system of the Web server ), in this case, you 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 treenote
Treenode tvfirst = new treenode ();
Tvfirst. Text = "First tree node ";

// Create the second treenote
Treenode tvsecond = new treenode ();
Tvsecond. Text = "second tree node ";

// Add the second treenote as the child node of the first treenote
Tvfirst. nodes. Add (tvsecond );

// Add the first treenote to the root node of the Treeview.
Tvtree. nodes. Add (tvfirst );

However, binding database data to Treeview is not as easy as binding data to a standard ASP. NET web control. Because Treeview itself is used to display layered data. Here, we provide an example to illustrate how to bind data in the database to the Treeview.

Database Design

First, we create a table tbtree in SQL Server 2000. The table structure is designed as follows:
Column name data type description Length Primary Key
Id int node number 4 is
Parentid int parent node No. 4
Context nvarchar: content of the node to be displayed 50

Script for creating a table in SQL Server 2000:

Create Table [DBO]. [tbtree] (
[ID] [int] identity (1, 1) not null,
[Context] [nvarchar] (50) Collate chinese_prc_ci_as null,
[Parentid] [int] Null
) On [primary]

Add the following records to the table:

Set identity_insert tbtree on
Insert tbtree (ID, context, parentid) values (1, 'China', 0)
Insert tbtree (ID, context, parentid) values (2, 'beijing', 11)
Insert tbtree (ID, context, parentid) values (3, 'tianjin ', 11)
Insert tbtree (ID, context, parentid) values (4, 'hebei province ', 1)
Insert tbtree (ID, context, parentid) values (5, 'guangdong province, 1)
Insert tbtree (ID, context, parentid) values (6, 'guangzhou ', 5)
Insert tbtree (ID, context, parentid) values (7, 'sichuan, 1)
Insert tbtree (ID, context, parentid) values (8, 'chengdu ', 7)
Insert tbtree (ID, context, parentid) values (9, 'shenzhen', 5)
Insert tbtree (ID, context, parentid) values (10, 'shijiazhuang ', 4)
Insert tbtree (ID, context, parentid) values (11, 'liaoning province ', 1)
Insert tbtree (ID, context, parentid) values (12, 'dalian ', 11)
Insert tbtree (ID, context, parentid) values (13, 'shanghai', 1)
Insert tbtree (ID, context, parentid) values (14, 'tianhe software key', 6)
Insert tbtree (ID, context, parentid) values (15, 'shantou ', 5)
Set identity_insert tbtree off

Code:

// Namespace to be added
Using system. Data. sqlclient;
Using Microsoft. Web. UI. webcontrols;

Public class webform1: system. Web. UI. Page
{
Protected Microsoft. Web. UI. webcontrols. Treeview treeview1;
Dataset DS = new dataset (); // defines a dataset

Private void page_load (Object sender, system. eventargs E)
{
// Place user code here to initialize the page

Sqlconnection Cn = new sqlconnection ();

// Initialize the connection string
CN. connectionstring = "database connection string ";
CN. open ();

// Add command to get data from the database
Sqlcommand sqlcmd = new sqlcommand ();
Sqlcmd. Connection = cn;
Sqlcmd. commandtext = "select * From tbtree ";
Sqlcmd. commandtype = commandtype. text;
Sqldataadapter ADP = new sqldataadapter (sqlcmd );
ADP. Fill (DS );

// Call a recursive function to generate a Tree Structure
Addtree (0, (treenode) null );
}

Public void addtree (INT parentid, treenode pnode)
{
Treenode TN1 = new treenode ();
Dataview dvtree = new dataview (Ds. Tables [0]);

// Filter the parentid to obtain all the current subnodes.
Dvtree. rowfilter = "[parentid] =" + parentid;
Foreach (datarowview row in dvtree)
{
If (pnode = NULL)
{// Add a root node

Tn1.text = row ["context"]. tostring ();
Treeview1.nodes. Add (TN1 );
Tn1.expanded = true;
Addtree (int32.parse (row ["ID"]. tostring (), TN1); // recursive again
}
Else
{// Add the subnode of the current node
Treenode TN2 = new treenode ();
Tn2.text = row ["context"]. tostring ();
Pnode. nodes. Add (TN2 );
Tn1.expanded = true;
Addtree (int32.parse (row ["ID"]. tostring (), TN2); // recursive again
}
}
}

The code generated by the web form designer is not changed. The code is omitted.
}

We can also bind XML data to the Treeview control. You only need to specify the treenodesrc attribute to the relevant XML file. You can also specify it in the code.

Code:

Treeview1.treenodesrc = "tree. xml ";
Treeview1.databind ();

Note: At this time, the XML file format is limited. The treenodes, treenode, and text are specific elements and attributes, and the case cannot be changed. If the format is different, you need to use other technologies for conversion. The following is an XML example of this format.

<? XML version = "1.0" encoding = "UTF-8"?>
<Treenodes>

<Treenode text = "Teach Yourself Active Server Pages 3.0 in 21 days">
<Treenode text = "price-$34.95"/>
<Treenode text = "Authors">
<Treenode text = "Mitchell"/>
<Treenode text = "Atkinson"/>
</Treenode>
<Treenode text = "year published-2000"/>
</Treenode>

<Treenode text = "Designing Active Server Pages">
<Treenode text = "price-$29.95"/>
<Treenode text = "Authors">
<Treenode text = "Mitchell"/>
</Treenode>
<Treenode text = "year published-2000"/>
</Treenode>

</Treenodes>

Summary

This article briefly introduces the IE web control and how to obtain and install these controls, and discusses 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 may be helpful for you to know how to use the Treeview control in ASP. NET web applications.

From: http://www.jzblog.com/user1/8051/archives/2006/83829.html