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:

Building pages progressively (the technique used here).

Making server requests, for example, for real-time validation.

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.

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:

Both open and closed images are included but one is visible depending upon the expanded state.

The text in this example is a link, but you could generate any content.

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:

Find the DIV to place the children into, based on the ID passed in (item). This is a unique ID for the TreeNode that is being expanded.

Create an object to make an HTTP request with.

Submit the request to a specific URL, namely "TreeFill.aspx?tree=&id=".

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.

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

Build a tree in memory and pass it to the TreeView control.

Store the tree in memory so that TreeFill can find it.

Send the Root node to the browser, including smarts to download children.

User expands a node in the tree

Request the children by asking for a node from a specific tree.

Respond with the HTML from the child nodes.

Populate the DIV below the node with the content for the children.

Expand the node by showing the DIV.

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).

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Share

About the Author

The core of CubeBuild is a website and application platform that is pluggable into ASP.NET MVC. Any MVC application can have content authoring added to its pages with little effort, and new content types are created using IronPython.NET open source components.

We are currently deploying a Point of Service (Web based POS) built on CubeBuild which allows a single web channel for face-to-face sales, and sales through your online store. All from a single inventory base, and from any device.

Comments and Discussions

Great code - thanks for sharing it! I plan to see if I can use/modify it for my needs. Please read below and let me know if you have any advice or know of possible examples. Thanks again!

I need to call a web service from javascript (async), and use the return/results from the web service to generate my tree. The web service performs a search of a data source. However, due to the nature/volume of the data, this will only return the first level nodes. When the user expands a node, another call to the web service is performed, which returns children. So, I will need to 'insert' nodes into the tree.

Currently this tree is done via an asp treeview and it's events (when user expands a node). I am trying to create a version which is more client-based, where I use javascript to initiate the user's search as an async request. This is needed as there are multiple data sources being searched with each source's results displayed on the same screen. So, simultaneous async requests are triggered.