Skip to main content
Email Password   helpLost your password?

Introduction

In a previous article from our team, Bryon Baker provides a JavaScript solution to present a TreeView in any web page. You can find that article here. This article is intended to build on that solution by providing a server side equivalent control, and to give a gentle introduction to AJAX.

While the code presented here is developed in a type-safe manner using Generics from .NET Framework 2.0, it can be easily ported back to 1.1 by using an ArrayList instead of List<> in Tree.cs. The code for .NET 1.1 has also been included.

AJAX

AJAX is a technique for progressively building web content, most notably used for:

In this example, a tree is built progressively by downloading children of a node when they are required, i.e., the user has expanded that portion of the tree.

Build the Tree

Fundamentally, we need to track the contents of the tree, and that contents need to exist within the session, and be available when a new portion of the tree is requested. To do this, we build a hierarchy in memory of tree nodes. Rather than reproducing the tree code here I have shown a simple recursive method that progressively builds up a big tree.

protected void BuildTree(int depth, TreeNode node)
{
    if (depth > 4)
        return;

    for (int i=0; i<10; i++)
    {
        node.Children.Add(new TreeNode("Node " + depth + i, "",
            "img/folder_open.gif", "img/folder_closed.gif"));
    }

    foreach (TreeNode child in node.Children)
        BuildTree(depth + 1, child);
}

This will build a tree of 11110 nodes, a tree 4 levels deep, with 10 nodes below each other node.

For your interest, downloading a tree of this size results in HTML that is around 9 MB in size, not something you would ask your user to download!

Each node

Each node in the tree has a similar structure as follows, making use of tables:

plus/minus image open icon closed icon text/link/etc.

div (empty initially) to hold child nodes

Some things to note:

The Div below each node will begin its life empty, to be filled at some point when the user expands the node. This is filled in by making an HTTP Request to the server to retrieve the child nodes. For this reason, the plus/minus and open/closed icons all link to the following JavaScript.

This code performs the following actions:

///

/// Perform an AJAX style request for the contents 

/// of a node and put the contents

/// into the empty div.

///

function DelayLoadNode(treeid, item)
{
    var div=document.getElementById("D" + item);
    var xmlhttp = GetXMLHttp();

    // Make sure the node is empty really, and if so fill it

    if (div.innerHTML == "")
    {
        xmlhttp.open("GET", 
            "TreeFill.aspx?tree="+treeid+"&id="+item, true);
        xmlhttp.onreadystatechange=function() 
        {
            if (xmlhttp.readyState==4)
            {
                // DEBUG: alert(xmlhttp.responseText);

                div.innerHTML = xmlhttp.responseText;
                Toggle(item);
            }
        }
        xmlhttp.send(null)
    }
    else // The node is already populated

    {
        Toggle(item);
    }
}

Filling out the Tree

When the AJAX call comes in, the TreeFill.aspx page answers the call by finding the node being expanded, and returning the HTML for its children. There is no magic here, just trawl through the tree structure on the server until we find the right node, and render its children in the response.

In order to do this, we need the tree itself on the server side. This is located by pulling the tree structure out of the session based on the ID of the tree that we are expanding. The Tree structure was placed into the Session using the treeID when the tree was first rendered.

/// <summary>

/// Render the nodes attached to a node at a 

/// specific level in the tree

/// </summary>

protected override void Render(HtmlTextWriter writer)
{
    string treeID = Request["tree"];
    // ..snip..

    Tree tree = (Tree)Session["tree" + treeID];
    // ..snip..

    string nodeID = Request["id"];
    // ..snip..

     
    // Locate and output the requested node

    bool found = false;
    OutputTreeNode(nodeID, treeID, writer, 
        tree.Root, ref found);
}

Currently, OutputTreeNode() does a brute force search, but a more elegant search algorithm could easily be applied.

Conclusion

The basic steps for proper operation of the tree are:

Initial setup

User expands a node in the tree

So, the whole tree is not downloaded at once, it is downloaded progressively; this allows even very large navigation trees to be very responsive. AJAX is used to do the progressive download, and the page is updated using DHTML. And finally, this control can be hosted without frames (as was not the case with the JavaScript version).

Thanks again to D. D. de Kerf for the original inspiration!

Note: This code is supplied "as is" without any form of warranty. Rewritten software shall not be liable for any loss or damage to person or property as a result of using this code. Use this code at your own risk! You are licensed to use this code free of charge for commercial or non-commercial use providing you do not remove the copyright notice or disclaimer from the comment section in the code.

Enjoy!

(Source is included for both .NET 1.1 and 2.0).

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralSession Problem Pin
MattsterP		14:45 26 Nov '07  
QuestionBIG tree? Pin
Dacman		0:35 10 Aug '07  
QuestionCreating Tree Problem-Question Pin
dhmason		16:33 24 Feb '07  
AnswerRe: Creating Tree Problem-Question Pin
julianhollingsworth		19:00 24 Sep '07  
GeneralRe: Creating Tree Problem-Question Pin
dhmason		8:31 26 Sep '07  
Generalinserting nodes into tree Pin
dhmason		16:11 24 Feb '07  
QuestionCompiling This? Pin
quakeguy		7:10 4 Apr '06  
GeneralCan I use this Tree for java ? Pin
el_nio		15:31 13 Feb '06  
GeneralDHTML TreeView vs ASP.NET 2.0 TreeView Pin
mykone		13:38 22 Dec '05  
AnswerRe: DHTML TreeView vs ASP.NET 2.0 TreeView Pin
Member 2632826		23:29 30 Sep '08  
GeneralNice treeview control - have question Pin
larmister		14:54 15 Dec '05  
GeneralRe: Nice treeview control - have question Pin
Adrian Holland		21:32 15 Dec '05  
GeneralAmazon Catalogue Tree Pin
veerendrashivhare		0:48 11 Nov '05  
GeneralUsing XML in this example Pin
JulzAU		15:36 1 Nov '05  
GeneralHow to expanded all the node. Pin
umashankariv		8:55 13 Oct '05  
GeneralError when loading Pin
spook		9:14 12 Oct '05  
GeneralComfortASP.NET Pin
dazei		7:37 22 Sep '05  
GeneralWIHT A XML FILE NOT BuildTree Pin
windlan		8:33 1 Sep '05  
AnswerRe: WIHT A XML FILE NOT BuildTree Pin
Adrian Holland		16:59 1 Sep '05  
General.net v1.1 Pin
amiSett		2:17 26 Aug '05  
AnswerRe: .net v1.1 Pin
Adrian Holland		5:09 26 Aug '05  
GeneralRe: .net v1.1 Pin
amiSett		5:26 26 Aug '05  
Last Visit: 21:58 21 Nov '09     Last Update: 21:58 21 Nov '09 1


Last Updated 25 Aug 2005 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009