In Visual Studio .NET, Microsoft also releases additional Web control sets in addition to standard ASP.NET web controls (such as TextBox, DropdownList, DataGrid, Datalist, etc.) to give full play to the intrinsic features of Internet Explorer. These new web controls are called Internet Explorer web controls, as well as IE Web controls, including four controls, TreeView web controls, Multipage web controls, TabStrip web controls, Toolbar web controls. The TreeView web control is one of them.
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 the data in the tree that can be expandable and is similar to the drive and folders in the resource manager to display the file system.
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.
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.
Download address: 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 is C: / Program Files / IE Web Controls /, you can also configure this directory during the installation process). Find the build.bat file in the installation directory and open it with a notepad. Change "CSC.exe" to the absolute path "C: /Winnt/Microsoft.Net/framework/v1.1.4322/csc.exe" (here you change to your computer). After saving (remember to remove the "read-only" property).
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 use 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 complete this, right-click Toolbox and select Add / Transfer Options option. Select the ".NET Framework Components" tab and 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 a class containing code, you first need to right-click "Reference", then select Add Reference to the Microsoft.Web.ui.WebControls.dll program. Then, in the class containing the code, add USING Microsoft.Web.ui.WebControls.
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 a TreeView control used to display the province. 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. Simply select the NODES attribute in the Attributes pane, then click the omitial button on the right side of this property. The TreenodeEdETOR dialog is displayed at this time. This will be added!
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 tree can be expanded by the following method: set the TreeView's imageURL attribute to a URL of a closed folder image, set the TreeView's ExpandedImageURL attribute to point to a URL of an open folder image, thereby folding separately And the expanded Treenote is displayed as a closed folder and the open folder. (If you want to change an image for the selected Treenote, you only need to set the TreeView's SELECTEDIMAGEURL attribute to the corresponding URL.)
TreeView's other advanced features
Although the process of adding the static Treenote added to the TreeView using Visual Studio .NET, it is usually necessary to dynamically add content to the TreeView. For example, store the tree information into the database, or designed a resource manager style web application (in this application, the user can browse the web server file system), then the server's folder and The file is 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.text = "first tree node";
// Create a second TreenOdetreenode tvsecond = new treenode (); tvsecond.text = "second tree node";
// Add the second Treenote to the first Treenote's child node tvfirst.nodes.add (TVsecond);
// Add the first Treenote to the root node of TreeView. TVTree.Nodes.Add (TVFirst);
However, binding 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 layered data. Here, provide an example to explain how to bind the data in the database to TreeView.
Database Design
First, we build a table TBTree in SQL Server 2000, the structure is designed as follows: Column Name Data Type Description Leister Primary Key ID INT Node No. 4 is the ParentID Int Parent Node No. 4 Context Nvarchar to display Node content 50
Construction tables 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 in the table:
Set Identity_Insert TBTree OnInsert 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", 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 Values (11, 'Liaoning ", 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 Park ', 6) Insert Tbtree (ID, Context, Parentid) Values (15,' Shantou ', 5) Set Identity_Insert TBTree Off Code:
// Need to add namespace for use 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 (); // Define a DataSet
Private void page_load (object sender, system.eventargs e) {// Place the user code here to initialize the page
SqlConnection CN = New SQLCONNECTION ();
// Initializing the connection string cn.connectionstring = "This is a database connection string"; cn.open ();
// Add a command to obtain data SqlCommand sqlCmd = new SqlCommand () from the database; sqlCmd.Connection = CN; sqlCmd.CommandText = "select * from tbTree"; sqlCmd.CommandType = CommandType.Text; SqlDataAdapter adp = new SqlDataAdapter (sqlCmd Adp.fill (DS);
// Call the recursive function, complete the tree structure to generate addtree (0, ",} public void addtree (trentid, treenode pnode) {Treenode TN1 = New Treenode (); DataView Dvtree = New DataView (DS. Tables [0]);
// Filter ParentID to get all current child nodes DVTree.rowFilter = "[ParentID] =" ParentId; Foreach (DataRowView Row In Dvtree) {if (pnode == null) {// Add root node TN1.Text = ROW ["Context"]. TREEVIEW1.NODES.ADD (TN1); TN1.Expanded = true; addtree (INT32.PARS (ROW ["ID"]. Tostring ()), TN1); // Regeneration again } Else {// Add current node child node TREENODE TN2 = new Treenode (); tn2.text = row ["context"]. Tostring (); pnode.nodes.add (tn2); TN1.Expanded = true; addtree (INT32.PARS (Row ["ID"]. TOSTRING ()), TN2); // Regeneration again}}}}}}}
The code / / code generated by the web form designer is not changed, the code is slightly. }
We can also bind to the TreeView control to the XML data. Simply specify the TreenODesrc property to the associated XML file. You can also specify in the code.
Code:
TreeView1.treenodesrc = "tree.xml"; treeview1.database;
Note: At this time, the format of the XML file is limited, where Treenodes, Treenode, Text, etc. are specific to the element and attributes, and case cannot be changed. If the format is different, you need to convert with other techniques. Below is an XML example of this format.
summary
In this article, it briefly introduces the IE web control and how to get and install these controls, and discuss how to use the TreeView IE web control in detail. 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 is introduced is only a treeview control, it may be helpful for initial understanding of the TreeView control in the ASP.NET web application.
