Using the ASP.NET TreeView control to display directories and files

It wasn’t until recently that I had the need for a web-application that could make use of the ASP.NET TreeView control in order to present a folder and file structure similar to Windows Explorer. To my delight, it was quite simple and painless.  The only possible annoyance – and likely most time consuming part about implementing this control - is understanding all the properties and settings to fully customize it’s appearance.

This ASP.NET Quickstart Tutorial was incredibly helpful in pointing out all the details of the TreeView control.

Here’s a quick demo of how you’d use this to programmatically bind a directory (optionally with files) structure to the tree view:

<asp:TreeView ID="TreeView1" runat="server"></asp:TreeView>

All we really need is two simple methods to fully bind the TreeView control with the folder structure of our choosing.  The first one will set the root directory, add a node to the tree, and then call the second function – which is recursive – that will take care of the rest.

private void BuildTree()
{
    //get root directory
    DirectoryInfo rootDir = new DirectoryInfo(Server.MapPath("~\\App_Data\\MyTree"));

    //create and add the root node to the tree view
    TreeNode rootNode = new TreeNode(rootDir.Name, rootDir.FullName);
    TreeView1.Nodes.Add(rootNode);

    //begin recursively traversing the directory structure
    TraverseTree(rootDir, rootNode);
}

The recursive method looks something like this:

private void TraverseTree(DirectoryInfo currentDir, TreeNode currentNode)
{
    //loop through each sub-directory in the current one
    foreach (DirectoryInfo dir in currentDir.GetDirectories())
    {
        //create node and add to the tree view
        TreeNode node = new TreeNode(dir.Name, dir.FullName);
        currentNode.ChildNodes.Add(node);

        //recursively call same method to go down the next level of the tree
        TraverseTree(dir, node);
    }
}

Note: if you wanted to display all of the files too, you’d include a similar foreach loop – except calling currentDir.GetFiles() – either before or after the loop through GetDirectories() (after line 2 or 12).

That’s really all you need!  Call the BuildTree() method on page load or during an event of your choosing and that’s it.  The TreeView and the TreeNode classes have a number of properties you can set to format the display as you like.  In my complete example, I have a few extra lines of code which are setting an image icon to each node and disabling the files from being clickable. Here’s what it looks like: