Asp.net uses Treeview to implement tree-like list

If you want to use a tree control on a web page, it may be a little troublesome, sometimes you even have to write it yourself. Code To display data in a tree list. In ASP. NET, we can easily use the Internet exploer Web controls control provided by Microsoft to implement a tree list. This set of Internet exploere Web controls provided by Microsoft includes multipage, tabstrip, toolbar, and Treeview controls. In this article Article In Asp.net, we can see how to use the Treeview control and XML to implement a tree-like list.

Microsoft's control set can be in http://asp.net/IEWebControls/Download.aspx? Download tabindex = 0 & Tabid = 1, and run Setup to install it. Now let's try to use the Treeview control as a simple example.

Create a new web project in vs.net. in the toolbox, right-click the shortcut menu and select "Add new project". In the custom toolbox, select the Treeview control (note that the namespace is the Microsoft Internet exploere web control namespace). After you press OK, you can see the Treeview control in the toolbox.

Drag the Treeview control to the form and switch to the HTML view. The following code is displayed:

  
   
<% @ Register tagprefix = "ie" namespace = "Microsoft. Web. UI. webcontrols" assembly = "Microsoft. Web. UI. webcontrols" %>

  
 

Of course, you can change the tag value of tagprefix, for example, to foobar. In the future, when you reference the Treeview control, reference it as follows:

 
  
   
<Foobar: Treeview runat = "server".../>

  
 

Now, you can click the nodes attribute in the properties box of the Treeview control to add nodes to the tree. This is not detailed here because it is relatively simple. The following code adds nodes:

  
   
<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 text = "Birth-1790"/> <ie: treenode text = "death- 1884 "/> <ie: treenode text =" spouse "> <ie: treenode text =" James K. mason "/> <ie: treenode text =" Married 1819 "/> </ie: treenode> <ie: treenode text = "John Gibson"> <ie: treenode text = "Birth-1793"/> <ie: treenode text = "Death-1802"/> ...... </Ie: treenode> </ie: Treeview> </form>

  
 

Note the expanded attribute in expanded = "true". When this attribute is set to true, the tree control is expanded when the page is loaded.

The preceding method adds data to the tree control statically during design. Because XML also represents the data structure in a tree structure, you can dynamically load data to the control by binding an XML file to the tree control, there are two methods to achieve this:

1) write an XML file in Treeview format.

2) use XSL to convert XML.

First, let's look at the first method. Create an XML file as an example and name it aspnetbooks. xml:


 
  
   
    
<? XML version = "1.0" encoding = "UTF-8"?> <Books> <book price = "34.95"> <title> Teach Yourself Active Server Pages 3.0 in 21 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, we must rewrite the XML and use the following format to bind it to the tree control.
 

  
 


    
 

  
 
    
     
<Treenodes> <treenode text = "... "> <treenode text = "... "> </treenode> <treenode text = "... "/>... </treenodes>

    
 
  
 
 

  
That is to say, the root node must be treenodes (Case Insensitive), and each subnode must be arranged in the form. Therefore, we changed the original XML file to the following format:


   
    
      
       
<? XML version = "1.0" encoding = "UTF-8"?> <Treenodes> <treenode text = "Teach yourself active server_u80? Ages 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>

      
 
    
 
 

    
 
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>

      
 
    
 
 

    
 
In this way, the XML file is bound to the tree control, and the result is displayed after running:
 

    
 


      
 

    
 
      
       
ASP. NET booksteach yourself Active Server Pages 3.0 in 21 daysdesigning Active Server pagesasp. Net: tips, tutorials, and codeprogramming ASP. NET

      
 
    
 
 

    
 
As you can see, using the first method is indeed troublesome, and you cannot filter XML nodes or perform other operations. If you use the XSL of the second method, you can control the format of the original XML at any time as needed, which is very convenient.
 

    
 
When using XSL, You can bind the tree control using the following method:
 

    
 


      
 

    
     
      
<Form runat = "server"> <ie: Treeview runat = "server"> <ie: treenode runat = "server" text = "ASP. net books "expanded =" true "treenodesrc =" aspnetbooks. XML "treenodemo-tsrc =" aspbooks. XSL "/> </ie: Treeview> </form> where, the attribute of treenodemo-tsrc specifies the XSL file to be converted. 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> <XSL: attribute name = "text"> year published-<XSL: value-of select = "year"/> </XSL: attribute> </treenode> </XSL: For-each> </treenodes> </XSL: template> </XSL: stylesheet>
     
    
 

    
 
In the above XSL, we



      

       
        
         
<XSL: attribute name = "text"> <XSL: value-of select = "title"/> </XSL: attribute>

        

       


       
Extract the value of each node in the XML file and assign the value to the text attribute of treenode. Of course, you can also use XPath in XSL to set the nodes to be displayed.

       
After running, the results are the same as those in the first method. The tree control can be correctly displayed and the flexibility is relatively high.