Use the Treeview control series in ASP. NET

Source: Internet
Author: User
Tags xsl file

To be included Code To use the IE Web Control in the class, you must first right-click reference, and then select add reference
Microsoft. Web. UI. webcontrols. dll Program Centralized. Then, in the class containing the Code, if C # is used, add using Microsoft. Web. UI. webcontrols;
If Microsoft Visual Basic. NET is used, add Imports Microsoft. Web. UI. webcontrols.

If Visual Studio. NET is not used as the ASP. NET web application Editor, manually add the following @ register command at the top of the ASP. NET web page:

<% @ Register tagprefix = \ whatevernamespace = \ microsoft. Web. UI. webcontrolsassembly = \ microsoft. Web. UI. webcontrols \ %>

Then, add the IE web control to the web page. You can use the following syntax:

<Whatever: webcontrolname runat = \ Server \...>
...

</Whatever: webcontrolname>

For example, to add a Treeview control, you can add the following @ register command at the top of the page:

<% @ Register tagprefix = \ iewcnamespace = \ microsoft. Web. UI. webcontrolsassembly = \ microsoft. Web. UI. webcontrols \ %>

Then, add the following web control syntax to the position where you want to display the Treeview on the ASP. NET web page:

<Iewc: Treeview runat = \ Server \...>
...
</Iewc: Treeview>

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
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 genealogy. Because the information basically does not need to be modified, you may want to specify the Treeview structure statically. If you are using
Visual Studio. NET, it is as easy to specify the Treeview structure statically as entering several tables. First, drag the Treeview control from the toolbox to the designer
Add the Treeview control to the ASP. NET web page. Then, set the ID attribute of the Treeview control to tvfamilytree.

Now, you must specify the treenode to form the Treeview. Select the nodes (node) Attribute from the properties pane, and click the ellipsis on the right of the attribute.
. The treenodeeditor dialog box is displayed. Now you can add a new treenode to the Treeview.

After filling in the treenodeeditor dialog box, the following markup will be added to the. aspx section of the ASP. NET web page:

<Ie: Treeview id = \ tvfamilytree \ runat = \ Server \>

<Ie: treenode text = \ John Smith \>

<Ie: treenode text = \ Born: Jan. 3rd, 1885 \> </ie: treenode>

<Ie: treenode text = \ died: Feb. 13,191 9 \> </ie: treenode>

<Ie: treenode text = \ spouse \>

<Ie: treenode text = \ Marie Ellsworth \>

<Ie: treenode text = \ Born: Aug. 1, 1889 \> </ie: treenode>

<Ie: treenode text = \ died: Unknown \> </ie: treenode>

</Ie: treenode>

<Ie: treenode text = \ Children \>

<Ie: treenode text = \ John Smith, Jr. \>

<Ie: treenode text = \ Born: July 4, 1891 \> </ie: treenode>

<Ie: treenode text = \ died: sept. 22,189 3 \> </ie: treenode>

</Ie: treenode>

<Ie: treenode text = \ Mary Smith \>

<Ie: treenode text = \ Born: June 7, 1893 \> </ie: treenode>

<Ie: treenode text = \ died: Aug. 13,194 9 \> </ie: treenode>

Bytes -----------------------------------------------------------------------------------------
Use Treeview and XML in ASP. NET
In the past, if you wanted to use a tree control on a web page, it was often a little troublesome. Sometimes you even had to write your own code to display data in a tree list. In Asp.net, we can
You can easily use the Internet exploer Web controls control provided by Microsoft to implement a tree-like list. In the Internet exploere Web controls control set 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 I
Let's try to use the Treeview control for a simple example.
Create a new web project in vs.net. in the toolbox, right-click the menu that appears, select "Add new project", and select the Treeview control in the Custom toolbox.
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 describes how to add
Code after the node:
<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>
<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 bind the data to the tree by using the XML file.
To dynamically load data to the control. There are two ways 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 of <treenode>. Therefore, we changed the original XML file to the following format:
Formula:
<? 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 books
Teach Yourself Active Server Pages 3.0 in 21 days
Designing Active Server Pages
ASP. NET: tips, tutorials, and code
Programming 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
XML format control, 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>
The treenodeinclutsrc attribute 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>
<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 above XSL, we use the following format:
<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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.