The really useful feature of ASP.NET is its extensibility. Developers around the world can create their own custom controls that can be easily defined in your own process. Among them, Internet Explorer Web Controls is such a collection created by Microsoft outside of the standard ASP.NET controls.
The drives in Windows Explorer and the files and folders under them are arranged according to a hierarchical structure. In this control set, there is a treeview control that provides us with a way to display information in a hierarchical structure. The treeview control contains a list of items called nodes. Each node can have its own node collection, providing a deeper data definition. Each node can be collapsed, allowing the visitor to search within a treeview control and see only the level of data that interests him. Just like Windows Explorer.
The first thing to make clear is the testing environment. As long as the environment is correct, the next work will be very easy:
to test this control, you must have a file called IE WebControls. The specific file can be downloaded by clicking here or going to Microsoft's website. .
Install according to the method he provided. If you are not sure, please read his readme document carefully.
Skip the download method here and go directly to the environment configuration:
IE Web Controls
1. Double-click to complete the installation. Default: system disk:program filesIE Web Controls directory.
2. Run "Program - Microsoft Visual Studio.NET 2003 - Visual Studio.NET Tools - Microsoft Visual Studio.NET 2003 Command Prompt" and enter the IE Web Control installation directory.
3. Run build.bat.
4. Run xcopy /s /i .buildRuntime (website root directory, default system disk):Inetpubwwwrootwebctrl_client1_0 /y.
Right-click on "Toolbox - Web Form", select "Add/Remove Items...", select the .net framwork component in the pop-up dialog box, click "Browse", and find the IE WebControl.dll file. Just add it.
This configures the operating environment. Next comes the practical stage.
1. Define the TreeView control
code copy box
'Import namespace <%@ import namespace="Microsoft.web.UI.webcontros"%>
'Register this namespace and give it a TagPrefix to facilitate the definition of controls in this control library <%@ register tagprefix = "iecontrols"
namespace="Microsoft.web.UI.webcontrols"
assembly="microsoft.web.UI.webcontrols"
%>
'After setting the instructions, you can define a treeview control like the following <iecontrols:treeview
id="tvbasic"
autoselect="false"
shoplus="true"
showlines="true"
expandlevel=2
runat="server"
＞
----------
＜/idcontrols:treeview＞
The following explains the corresponding code:
autoselect = "false"
When a visitor locates a node in the TreeView control, he or she can use the arrows on the keyboard to perform this positioning. When the autoselect attribute of the TreeView control When the value is set to TRUE, you can use the keys on the keyboard to scroll in the treeview control to select an item. If set to false, this is not allowed.
showplus="true"
when two items in a treeview control When the nodes are received together, you can display a plus sign (+) so that visitors will know that the node can be expanded. By setting the showplus attribute, you can control whether the plus sign is displayed at this position. If the value of this attribute is set to true, it will Use the plus sign; otherwise do not use.
showlines="true"
can display some lines between two nodes in a treeview control. By setting the showlines property, you can control whether to display such lines.
Expandlevel=2
This Treeview control The Expandlevel property is used to determine the number of levels to expand along the hierarchy of this treeview control by default.
<iecontrols:treeview>
----------
＜/iecontrols:treeview＞
Between the start and end tags defined in this treeview control, you can define some treenode controls.
2. Use treenode controls in treeview controls.
If you create a treeview control, you need to add some treenode controls to it. To display some information. The treenode control is displayed as an item in the hierarchy of the treeview control. The treenode control can contain the treeview control; or, the control itself can also exist independently. The following will show you how to define a treenode in a treeview control Control.
This example will display some of my favorite websites, each of which can be an independent website, or there may be other websites under it. This treeview control has the following definition:
Code copy box
<iecontrols:treeview
id="tvwebsite"
autoselect="false"
showplus="true"
showlines="true"
expandlevel=2
runat = "server"
＞
'Next, in the opening and closing tags of the treeview control, define the treenode control <iecontrols:treenode text="sites I often visit">
＜idcontrols:treenode text="Design site"＞
＜idcontrols:treenode text="Blue Ideal" /＞
＜idcontrols:treenode text="Windy Day" /＞
＜idcontrols:treenode text="Design Alliance" /＞
＜/iecontrols:treenode＞
＜iecontrols:treenode text="Programming site"＞
<iecontrols:treenode text="ASP programming">
＜iecontrols:treenode text="ASP COOL" /＞
＜iecontrols:treenode text=""/＞
＜/iecontrols:treenode＞
<iecontrols:treenode text="ASP.NET Programming">
＜iecontrols:treenode text="Dotnet Technology Network" /＞
＜iecontrols:treenode text="asp.net"/＞
＜/iecontrols:treenode＞
＜iecontrols:treenode text="Programmer Base Camp" /＞
＜/iecontrols:treenode＞
＜/iecontrols:treenode＞
Among them, a two-level node is defined. This tree view contains two large nodes: "Design Site" and "Programming Site", and there are two more nodes in "Programming Site". The sub-nodes "ASP Programming" and "asp.net Programming", each of which defines other nodes.
Pay attention to the difference between a treenode control that contains other nodes and an independent treenode control. When a treenode control also contains When there are other treenode controls, these child controls are defined between the start and end tags of their parent controls:
<iecontrols:treenode text="">
＜/iecontrols:treenode＞
But for an independent treenode control, its start and end tags are self-contained:
＜iecontrols:treenode text="" /＞
When the page is first loaded, this is the expansion of the entire view node .Since the expandlevel attribute value here is set to 2, nodes at all levels will be displayed. In addition, it should be noted that since the showlines attribute and showplus attribute are both true, in all displayed views, the connection between nodes The lines and connection boxes are displayed.
"Sites I often visit" is the currently selected node item. The visitor can hit Enter or click the mouse on this node. Then, the visitor can use the arrows on the keyboard to Navigate along the tree view hierarchy.