About TreeView WebControl

zhaozj2021-02-11 197

About TreeView WebControl currently does not support Microsoft® Internet Explorer WebControl. (This article contains some links to English sites.)

This article describes the use of the TreeView control, which can be used to help generate a user interface to display a hierarchical dataset, folder view, and other similar data structures. This control has a variety of powerful features, including supporting data binding and high-altitude browser enriched dynamic HTML (DHTML) behavior. In most cases, TreeView can be created by declaring; however, this control can be implemented in a variety of ways on the client or server. This article includes the following:

Introduction Prerequisite Terminology TreeView Object TreeView Element Writing Simple TreeView Format Setting Data Binding Programming Performance Tips Related Topics TreeView is an ASP.NET server control to generate a user interface for displaying hierarchical data. Like other Microsoft® Internet Explorer WebControl, the TreeView control will also send HTML according to the type of browser. In the lower browser, the page content sent by the TreeView ASP.NET server control is HTML 3.2 format, and in the Advanced Browser, the HTML page also uses DHTML behavior, and the DHTML behavior is a client component that defines a custom element. For WebControl, advanced browsers refer to Internet Explorer 5.5 or higher, the low-level browser refers to Internet Explorer 5.01 or lower, or other browsers other than Internet Explorer. This article describes how to create and use the TreeView control by actual example. TreeView is one of four WebControl; therefore, you want to create a web page containing these controls, which are similar to each other. For general information about WebControl, including Download and Installations, see Internet Explorer WebControls and Authoring Web Forms with the WebControls. WebControl is an ASP.NET server control with a set of DHTML behaviors that provide a wealth of user experience in the advanced browser. For each WebControl, a DHTML behavior corresponds to a client object model, which corresponds to the server-side object model implemented by the ASP.NET server control. Internet Explorer 5.5 has a significant difference in the component architecture in ASP.NET, so the object model corresponding to the client object and the server-side object is slightly different. At the same time, using client components and server-side components means that you can create a web page using TreeView in two modes. In ASP.NET, you can use the behavior in the Advanced browser to write a web form to send content based on the browser performance. These pages can take advantage of server-side scripts written in a library language in a public language. For Internet Explorer 5.5 or higher, you can write a web page that contains DHTML behavior using the client script. Prerequisites To understand this article, you need to be familiar with the basic type of the ASP.NET control and learn how to create a simple web form page. In addition, there are some knowledge about the writing of browser scripts and DHTML behavior, as WebControl uses these behaviors in the advanced browser. The code example in this article is written with Microsoft C # and Microsoft Visual Basic® .net. These examples are easily understood even if the web developers understand the ASP.NET and the public language runtime. For more information on creating a Web page with ASP.NET and WebControl, see Internet Explorer WebControl. the term

The term description web form ASP.NET Web Form Frame is an extensible public language runtime programming model that can be used to dynamically generate a web page. The web form is .aspx file, analyzed and processed by ASP.NET. WebControl is a custom ASP.NET control that creates a page in a web form environment. TreeView Object This section provides a basic different point implementation of the client and server-side TreeView implementation. You can access the reference documentation for the client and server-side objects involved in the TreeView component via the TreeView Reference page. You can also use the TreeView Editor (TreeView Editor) in Visual Studio .NET to intuitively create the TreeView control. This article mainly introduces the method of manually created content using TreeView. For more information on intuitive editing TreeView, see Using The TreeView Designer In Visual Studio .NET. You can create TreeView by declaring, or write scripts on the client or server to create this control. The examples in this article use a declaration method and use the ASP.NET TreeView server control in the Web Forms page, and TreeView behavior is used in the HTML page. Because the programming language supported by ASP.NET and Internet Explorer, the reference documentation for client components and server-side components are provided separately. ASP .NET Server Control ASP.NET Server Control provides the most complete TreeView programming model. If the web page needs to be run in a variety of browsers, it is recommended to use the ASP.NET server control. Because WebControl detects the type of browser and sends HTML 3.2 to the low browser. For more information, see ASP .NET Server Controls Reference. Client Behavior If you want to optimize client performance in Internet Explorer 5.5 or later, there is also a TreeView Behavior available. The TreeView Behavior is automatically downloaded to the Advanced Browser using WebControl's ASP.NET Web Forms. Thus, when writing the HTML page for the client only, TreeView behavior can be used independently of ASP.NET. TreeView in many Microsoft Windows® applications typically has a wealth of features, for example, you can use mice or keyboard input to expand or fold nodes in TreeView. TreeView behavior supports all of these features and can implement data binding in a client or server-based web page. TreeView elements You can create TreeView using one or more of the following elements supported by the client and server-side TreeView components.

Element Name Description TreeView defines a TreeView. TREENODETYPE defines a node type for one or a set of nodes in TreeView. Treenode creates a node in TreeView. We offer a reference documentation for use TreeView ASP.NET Server Controls and TreeView Behaviors. For more information, see the TreeView Reference page. The TreeView element is the container of Treenode and Treenodetype elements. These elements jointly define the structure, layout and appearance of the tree view. TreeView cannot contain any other HTML content other than these three elements. The TreeView element can contain any number of TREENODETYPE elements, as long as the client and the host have sufficient resources. The TreenodeType element is used to define the style, images, and other behaviors of the Treenode element. You can group TREENODE elements through elementality to set and modify their formats using the TREENODETYPE element. The TreenOdetype element must be a child element of the TreeView element, and must appear before the first Treenode element. The Treenode element can only contain other TREENODE elements. However, by specifying the HTML content to the TEXT property of the Treenode element, the content can be embedded in TreeView. The TEXT content of the Treenode element will be displayed as HTML instead of plain text. Write simple TreeView This section describes the steps to create a simple TreeView. You can use any text editor to perform all steps. To complete the following procedure, you need to install WebControl. For more information, see Internet Explorer WebControls Overview. Create a web application. This Web should be named WebControls because all examples in this article use it. To make WebControl function properly, you must configure the new Web as a web application. Create a blank web form page. Add a new file to the Web and save it as Tree1.aspx. Add import instructions. Write the import instruction code of WebControl in the first line of the web form, as shown below: <% @ import namespace = "Microsoft.Web.ui.WebControls"%>

Add @ register command. Write WebControl's @ register instruction code in the second line of the web form. <% @ Register tagprefix = "mytree"

Namespace = "Microsoft.Web.ui.WebControls"

AskMBLY = "Microsoft.Web.ui.WebControls, Version = 1.0.2.226, Culture = neutral, publickeyToken = 31BF3856AD364E35"%>

Add a document structure. Add the following below the @register command to provide a basic document structure.

Add an FORM element. All WebControl elements must be established in an Form element; therefore, the following tags are added to the Document Body.

Please note that the RUNAT property is specified for Form, indicating that ASP.NET will process the results of any user input. Now, the web form already contains all processing instructions, elements, and content required to create creations using the WebControl element. The content of the Tree1.aspx file should now similarly similar to: <% @ Import namespace = "Microsoft.Web.ui.WebControls"%>

<% @ Register tagprefix = "mytree"

Namespace = "Microsoft.Web.ui.WebControls"

AskMBLY = "Microsoft.Web.ui.WebControls, Version = 1.0.2.226, Culture = neutral, publickeyToken = 31BF3856AD364E35"%>

Save the page and view it in your browser. If everything is normal, you should only display a blank page. This page has been compiled before viewing and will report any syntax errors. If there is an error, please correct the error. If the sample code given above cannot be run, it may be because WebControl is not installed correctly.

Tip: The readers who like to explore can try to give the value of the wrong namespace or program set attribute in the statement, and then save and view the page again. This is a useful attempt, because you can see how the public language runtime reports web form errors.

Add a TreeView element. Add a TreeView element as a child element of the Form and set its RUNAT attribute to Server.

Now, the TreeView element does not contain any nodes, so no content is displayed in the web page.

Note: Please pay attention

TreeView element's tag prefix, all WebControl elements in the page use values

Mytree, because this value is already

@ Register directive predefined.

Add a TREENODE to TreeView. Next, add a TREENODE as a child element of the TreeView element.

The following figure shows the original appearance of TreeView. Because there is only one node, it is the root node and has a focus. The background colors use the default style that can be changed by setting the corresponding attribute. Click the node to select the node. Add a second TREENODE. Add another Treenode as a child element of the first Treenode element.

Save and display the page. The figure below shows the initial state of TreeView. Now, TreeView shows root node. The root node has a graphic, indicating that it can be expanded. Click the node to expand or fold it.

Note: This example shows

The default status of the node in the TreeView is folded. You can set it

The expanded property controls the initial state of the node.

At this point, the basic TreeView example has been created. The following example will further reveal other properties and functions of TreeView. Format Settings This section discusses some useful techniques for customize the TreeView user interface (UI). You can set up the format of the TREENODE element one by one, or you can modify the node with the same TYPE by group. Typically, we hope that each layer of TreeView displays a unique graphic. Sometimes you need to customize the appearance of a single node without considering the depth of the tree and its parent elements in the tree. The property provided by TreeView meets all these possible requirements. Define the sample below the TREENODETYPE shows TreeView, which contains a collection of small cities and states. To customize the appearance of the node, first define a Folder node Type using the TREENODETYPE element. <% @ import

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

<% @ Register tagprefix = "mytree"

Namespace = "Microsoft.Web.ui.WebControls"

AskMBLY = "Microsoft.Web.ui.WebControls, Version = 1.0.2.226, Culture = neutral, publickeyToken = 31BF3856AD364E35"%>

ExpandedImageurl = "./ images / folderopen.gif"

ImageURL = "./ images / folder.gif" />

This feature requires installation of Microsoft® Internet Explorer 3.0 or higher. Please click the icon below to install the latest version. Then reload this page and view the example.

This example shows the use of the TreenOdetyPE element, which can be used to set the layout and structure of the TreeView and the format and structure of the appearance. The ChildType property of the TreeView element is specified as Folder. Since ChildType is specified on TreeView, TreeView is the container element of the entire tree, so all TREENODE elements of Type will become Folder. Obviously, this method is more efficient than the Type property of each node. After the ChildType declares in TreeView as Folder, you need to define this type using the TreenOdetyPE element. Therefore, the TYPE attribute of the TREENODETYPE element will also have the same value Folder. ExpandedImageURL and ImageURL properties can replace the default TreeView image for display expand nodes and normal nodes, respectively. A small amount of content will be added to the previous code based on the example of the depth custom tree node, which generates a custom folder icon for each layer of TreeView. The following example uses two TREENODE elements. Among them, nodes representing the city are nested in the representative of the node.

ExpandedImageURL = "folderopen.gif" imageurl = "folder.gif" />

This feature requires installation of Microsoft® Internet Explorer 3.0 or higher. Please click the icon below to install the latest version. Then reload this page and view the example. Note that the ChildType property is used on TreeView and the first TreenodType element. TreeView defines its sub-items with the folder type, the first TREENODETYPE element defines its sub-items with the city type. In this code, the second TREENODETYPE element does not have ChildType because the element is defined by the deepest TreenodetyPE in TreeView. Applying Style WebControl controls have a rich feature, they can support mouse and keyboard operations in advanced browsers. This means that the element of the TreeView UI can have different states depending on the user's interaction. WebControl provides the following special properties to simplify the process of defining elemental appearance based on elements.

DEFAULTSTYLE HOVERSTYLE SELECTEDSTYLE Use each attribute described above to define one or more Class-style table (CSS) attribute / value pairs. The format used is the same as the usage of the standard CSS Style property. WebControl supports the most common style of font, color, and dimensions, but does not support all CSS styles.

DEFAULTSTYLE = "Background: #cccccc; border: solid 1px; color: black; font-size: 8pt"

Hoverstyle = "Color: Blue; font-name: arial"

SELECTEDSTYLE = "Color: Red; font-name: arial; font-weight: bold-italic"

Another way to set the text format is to apply HTML to the Text property directly.

Data Binding TreeView also supports

Data binding, thus generates dynamic content. The TreeView shown below is similar to the previous example, but does not use static content, but use the Scalable Markup Language (XML) file to provide the UI data source.

This example uses

Treenodesrc property is bound to

The State_city.xml file is populated with this file.

Expanded = "true" treenodesrc = "http://localhost/webcontrols/treeview/state_city.xml">

It can be seen from this code segment that the flag in the .aspx file is very simple.

The State_city.xml file contains the following:

This feature requires installation of Microsoft® Internet Explorer 3.0 or higher. Please click the icon below to install the latest version. Then reload this page and view the example.

The following example shows how to cooperate with the TreenOdetyPesrc property and XML. This example uses two XML files, a correspondence tree node, a corresponding node type. We have established the first data binding example by adding additional custom content to the UI. Only a TreeView element is used in the markup of the web page, as shown below:

Treenodetypesrc = "http://localhost/webcontrols/treeview/treenodetypes.xml"

Treenodesrc = "http://localhost/webcontrols/treeview/country_state_city.xml">

The contents of the TreenodetYpes.xml file are as follows.

This feature requires installation of Microsoft® Internet Explorer 3.0 or higher. Please click the icon below to install the latest version. Then reload this page and view the example.

Data binding with XML and XSL templates In some cases, you may need to use read-only XML data, or you may not be able to bind XML data directly to TreeView. TreeView also supports Scalable Style Watch Language (XSL) templates, which can convert XML files to the correct format and structure. XSL can be used to convert an XML file to data binding that contains Treenode and TreenodType elements. The following example shows how to use XML and XSL to populate a TreeView. Below is the tag of the TreeView element, which is bound to an XML file nodes.xml and an XSL file template.xsl.

Runat = "server"

Treenodesrc = "nodes.xml"

Treenodexsltsrc = "template.xsl"

The nodes.xml file contains the following:

The template.xsl file contains the following:

main

XSL converts the source file XML to the correct format TreeView.

Warning: To make

TreeView data binding can run normally, in the data binding source document

TREENODES and

The TreenOdetypes element must be capitalized.

Data Binding to multiple XML files If the TreeView's XML data comes from multiple files, data binding to multiple source files can also be implemented. For example, you can bind the Treenode element to each XML and XSL files. You can also specify TreenOdetyPesrc, TreenodesRC, and Treenodexltsrc properties in a data binding XML file. If the XML data contains properties to other XML files, you can convert it to the corresponding TreeView tag with XSL. When you create TreeView with multiple XML files, all data binding nodes of the tree will not load. If the TreenODesrc property is set for a Treenode element, only the contents of the node are expanded to be truly bound to the XML source file. When you bind the TreeView element to a data source, it extracts XML source data for all of your root nodes. If these root nodes also have Treenodesrc properties, these properties will be ignored until the user expands a root node. The expanded root node will be bound to its data source while downloading and displaying its child node. Therefore, if the XML is generated by the parent node for its sub-elements, and the XML contains sub-elements to perform data binding TreenODesRC, one node can be dynamically bind to an XML source file. The Treenodesrc attribute of the node is ignored until the node is expanded. You can dynamically modify the Treenodesrc property before expanding the node. When the node is first expanded, the node will bind to the XML data directed to the current TreenODesrc. Data binding with XML and SQL Server

WebControls elements can also use other XML data providers as follows:

Treenodesrc = "http: // localhost / mysqlxml? SQL = Execute sp_genmyXML @ PID = 1" />

This example uses a more advanced technology. The Treenodesrc property is set to a URL, the latter performs a stored procedure on the Microsoft SQL Server (TM) database to dynamically generate XML data island. It can be seen from these examples that data binding to TreeView is very simple. Namespace in the data binding inherits When the WebControls element data is bound to XML data island, the XML content used to fill the control cannot use the namespace prefix. Because the namespace is indicated by an element as a data user. For details, see TreenodtypeSRC and Treenodesrc. The example given before programming indicates that in most cases, a complete UI element is written without any programming. This section briefly introduces some simple scripting techniques available for TreeView. The TreeView event is set to the event-oriented server that interacts the user interacts by setting the AutoPostBack property to True. Server-side scripts should be used when handling advanced browsers and low browser events, because there is no rich DHTML behavior in Internet Explorer 5.5 or later in low-level page content. For web pages containing TreeView, the user's main interaction is the node in which it is expanded and folded to browse content. The following sample code shows how to use C # to handle OnexPand, ONCOLLLAPSE, and OnsectedIndexchange events in a web form.