One of the new gifts from .NET is Internet Explorer WebControls Version 1.0 of the ASP.NET Server Controls. This is a suite of “rich” controls that lets you easy deal with structures like TreeView, ToolBar, TabControl and Multipage that previously needed a lot of work to be developed.
In this three-part article Oscar Peli will describe one of these rich controls: TreeView. In this first part he will introduce you to the basics of this rich control. You will see your first TreeView built in a declarative mode and some others more complex samples; you will see also how to build a TreeView programmatically.
The second and third parts of this article are focused on more advanced features of this control: handling events (http://www.asptoday.com/content.asp?id=1858) and data binding (http://www.asptoday.com/content.asp?id=1859).
Introduction
The TreeView is one of the most useful structures in web development. In this first part of my article I want to introduce to you a wonderful control that Microsoft released for the .NET Framework. Here you have a control with a rich Object Model that lets you program various aspects by simply defining the value of some properties, or by declaring some elements.
Download and Install WebControls
Before reading this article it will be useful if you have downloaded and installed Microsoft Internet Explorer WebControls Version 1.0 of the ASP.NET Server Controls
From the dropdown list "WebControls Version 1.0 Installation Options " choose "Automatic Install: WebControls Version 1.0 Client DHTML Behaviors and Server Controls ".
Wait until the browser prompts you to save or execute the file (iewebcontrols.msi), then save it on your hard disk and execute it.
At the end of installation, you can see in the Programs menu, which can be accessed from the Start button, the "Microsoft Internet Explorer WebControls " entry. There you can find a shortcut to the IE WebControls MSDN documentation and a readme file where you can read the step by step installer operations.
The Simplest TreeView
The first sample of a TreeView is a very simple program, the source code for it can be found in the FirstTree.aspx file in the support material of this article. I won't describe everything, but I will describe the lines that are directly concerned with the TreeView control.
The first line is an @Import directive for the WebControls. This explicitly imports a namespace into the page, making all classes and interfaces of the imported namespace available. (If you want to know more on the @Import directive point your browser to http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconimport.asp.)
<%@ import namespace="Microsoft.Web.UI.WebControls" %>
The second line is an @Register directive that associates an alias with the namespace and class name for concise notation. Including this directive in a page allows you to layout a TreeView server control using declarative TreeView syntax.
If you want to know more on the @Register directive point your browser to http://msdn.microsoft.com/library/en-us/cpgenref/html/cpconregister.asp.
<%@ Register TagPrefix="myfirsttree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
Note that all WebControls elements must be authored inside a Form element. The runat="server" attribute has also to be specified for the Form to indicate that ASP.NET will process the results of any user input. So the TreeView element is a child of the Form and has the runat="server" attribute too.
Note the use of the tag prefix myfirsttree; this will be used for all the WebControls elements in the page since it has been predefined in the @Register directive.
<HTML> <HEAD></HEAD> <BODY> <FORM runat="server"> <myfirsttree:treeview runat="server" SHOWTOOLTIP="false">
Inside the TreeView element you can insert TreeNode elements to build your structure. To produce a hierarchical structure of nodes, simply add a child TreeNode element inside his parent element.