Using the TreeView control and XML in asp.net

asp.net|treeview|xml| Control

In the past, if you wanted to use a tree control on a Web page, it would be a bit cumbersome, and sometimes even write your own code to achieve the goal of displaying the data in a tree-shaped list. In asp.net, we can easily use the Internet Exploer Web controls control provided by Microsoft to implement a tree list. In the set of Internet Exploere Web controls controls provided by Microsoft, there are Multipage,tabstrip,toolbar,treeview controls. In this article, we look at how the TreeView control and XML are used in asp.net to implement a tree list.

Microsoft's set of controls can be downloaded in the http://asp.net/IEWebControls/Download.aspx?tabindex=0&tabid=1, download and then run the setup installation. Now let's try a simple example with the TreeView control.

Create a new Web project in Vs.net, then in the Toolbox, right-click the menu, select Add New Item, and in the custom Toolbox, select the TreeView control (note that the namespace is selected for the Microsoft Internet Exploere Web control's namespace), you can appear in the toolbox when you are sure.

Next, drag the TreeView control onto the form and switch to HTML view, where you'll find the following code:

<%@ Register tagprefix= "ie"
Namespace= "Microsoft.Web.UI.WebControls"
Assembly= "Microsoft.Web.UI.WebControls"%>

Of course, you can change the tagprefix tag value, for example, to Foobar, then when referencing the TreeView control, refer to the following:

<foobar:treeview runat= "Server" .../>

Now we can add a variety of nodes to the tree by selecting the Nodes property in the TreeView control's property box, which is not covered in detail because it is relatively simple. Here is the code after the various nodes have been added:

<form runat= "Server"
<ie:treeview runat= "Server"
<ie:treenode text= "Isaac Gibson"　　　Expanded= "True"
<ie:treenode text= "Birth-1766"/>
<ie:treenode text= "Death-1827"/>
<ie:treenode text= "spouse"
<ie:treenode text= "Ritty Gibson"/>
<ie:treenode text= "married 1789 "/>
<ie:treenode text=" Children "
<ie:treenode text=" Phoebe Gibson "
<ie:treenode Tex t= "Birth-1790"/>
<ie:treenode text= "Death-1884"/>
<ie:treenode text= "spouse"
< Ie:treenode text= "James K. Mason"/>
<ie:treenode text= "married 1819"/>
</ie:treenode>
& Lt;/ie:treenode>
<ie:treenode text= "John Gibson"
<ie:treenode text= "Birth-1793"/>
< Ie:treenode text= "Death-1802"/>
...
</ie:treenode>
</ie:treeview>
</form>

We pay special attention to the expanded property in Expanded= "true", which, when set to True, expands all the tree controls when the page is loaded.

The above is a way to statically add data to a tree control at design time. And since XML essentially represents the structure of data in a tree structure, you can dynamically load data into a control by using the XML file binding to a tree control, which can be implemented in two ways:

1 Write another XML file that conforms to the TreeView format.

2 transforms the XML through XSL.

First look at the first method, build an XML file as an example, named Aspnetbooks.xml:

<?xml version= "1.0" encoding= "UTF-8"?>
<books>
<book price= "34.95" >
<title>teach yourself Active Server Pages 3.0 in days</title>
<authors>
<author>Mitchell</author>
<author>Atkinson</author>
</authors>
<year>1999</year>
</book>

<book price= "29.95" >
<title>designing Active Server pages</title>
<authors>
<author>Mitchell</author>
</authors>
<year>2000</year>
</book>

<book price= "34.95" >
<title>asp.net:tips, tutorials, and code</title>
<authors>
<author>Mitchell</author>
<author>Mack</author>
<author>Walther</author>
<author>Seven</author>
<author>Anders</author>
<author>Nathan</author>
<author>Wahlin</author>
</authors>
<year>2001</year>
</book>

<book price= "24.95" >
<title>asp unleashed</title>
<authors>
<author>Walther</author>
</authors>
<year>1998</year>
</book>
</books>

If we use the first method, the XML must be overridden, expressed in the following form, to be bound to a tree control:

<TREENODES>
<treenode text= "..." >
<treenode text= "..." >
</treenode>

<treenode text= "..."/>

...
</TREENODES>

That is, the root node must be TreeNodes (regardless of capitalization), each child node must be arranged in the form of <treenode>. As a result, we rewrote the original XML file into the following form:

<?xml version= "1.0" encoding= "UTF-8"?>
<TREENODES>
<treenode text= "Teach Yourself Active server_u80? Ages 3.0 in the 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>

Add the following code:

<form runat= "Server" >
<ie:treeview runat= "Server" >
<ie:treenode runat= "Server" text= "asp.net books" expanded= "True" treenodesrc= "Aspnetbooks.xml"/>
</ie:TreeView>
</form>

This binds the XML file to the tree control, and you can see the result when you run it:

asp.net books
Teach yourself Active Server Pages 3.0 in
Designing Active Server Pages
ASP.NET:Tips, tutorials, and Code
Programming asp.net

As you can see, using the first method is really tricky, and you can't filter the nodes of the XML or other actions. And if you use the XSL of the second method, it is convenient to control the original XML at any time as needed.

When using XSL, you can bind a tree control in the following ways:

<form runat= "Server" >
<ie:treeview runat= "Server" >
<ie:treenode runat= "Server" text= "asp.net books" expanded= "True"
Treenodesrc= "Aspnetbooks.xml"
treenodexsltsrc= "Aspbooks.xsl"/>
</ie:TreeView>
</form>

Where the XSL file to be converted is specified in the properties of TREENODEXSLTSRC, the XSL file we designed is as follows:

<xsl:stylesheet xmlns:xsl= "Http://www.w3.org/1999/XSL/Transform" version= ' 1.0 ' >
<xsl:template match= "/books" >
<TREENODES>
<xsl:for-each select= "book" >
<treenode>
<xsl:attribute name= "Text" >
<xsl:value-of select= "title"/>
</xsl:attribute>

<treenode>
<xsl:attribute name= "Text" >
Price-$<xsl:value-of select= "@price"/>
</xsl:attribute>
</treenode>

<treenode text= "Authors" >
<xsl:for-each select= "Authors/author" >
<treenode>
<xsl:attribute name= "Text" >
<xsl:value-of select= "text ()"/>
</xsl:attribute>
</treenode>
</xsl:for-each>
</treenode>

<treenode>
<xsl:attribute name= "Text" >
Year published-<xsl:value-of select=, "year"/>
</xsl:attribute>
</treenode>
</treenode>
</xsl:for-each>
</TREENODES>
</xsl:template>
</xsl:stylesheet>

In the XSL above, we pass the form:

<xsl:attribute name= "Text" >
<xsl:value-of select= "title"/>
</xsl:attribute>

property settings, extracts the value of each node in the XML file and assigns it to the TreeNode Text property. Of course, you can also set the nodes to be displayed in the XSL using XPath, and so on.

After running, the result is the same as the first method, the tree control is displayed correctly, and the flexibility is relatively high.