Directory Tree Browser

From time to time as a developer you may be required the need to list the contents of a folder. While creating a list from a single folder isn't too complex, things can go south rather quickly when we are asked to create a listing that contains multiple sub-folders. Using a combination of ASP.NET and client-side Javascript we can create a simple directory listing that does not require any round trip visits to the server to display a collapsible tree. One item to point out is the client-side Javascript shown in this example only works with Internet Explorer. While this can be accomplished with cross-browser scripting, the Netscape/Mozilla compatible code I leave up to you to do. What we are hoping to have working after we are finished with this code sample is something similar to the image below. Additionally, you will be able to pass the URL path that is set in the value of the radio buttons along in a form. 

Getting Started

The tree.aspx page is our output page of the directory tree. This can be used in several ways, including as a popup page. In the example I have the tree as part of a form, however the form action is set to '#', so it does not redirect anywhere. The radio buttons that are created have a name of "np" that can be retreived using standard form processing. The values for the "np" radio buttons are set to the URL path to the folder that is selected. In the example, when you select one of the radio buttons, a Javascript message box will pop up showing you the value of the radio selected.

tree.aspx

 <%@ Page Inherits="DirTree" src="tree.vb" %>
<SCRIPT language=vb runat="server">
    sub page_load

        '-- Load the directory tree
        TreeList.Text = buildTree() 
    end sub
</SCRIPT>

<SCRIPT language=javascript>

<!--
    // preload images
    if (document.images) {
        plus_on = new Image ();
        plus_on.src = 'plus.gif';
        plus_off = new Image ();
        plus_off.src = 'minus.gif';
        fold_on = new Image ();
        fold_on.src = 'fld_close.gif';
        fold_off = new Image ();
        fold_off.src = 'fld_open.gif';
    }


    // shows or hides folder tree items
    function showHide(dID, iID, fID) {
        if (dID.style.display=='none') { 
            if (document.images) {
                document.images[iID].src = eval('plus_off.src');
                document.images[fID].src = eval('fold_off.src');
            }
            dID.style.display = '';
        } else { 
            if (document.images) {
                document.images[iID].src = eval('plus_on.src');
                document.images[fID].src = eval('fold_on.src');
            }
            dID.style.display = 'none';
        } 
    }

    // alert message on radio selection
    function unlockSubmit(fPath) {
        var aMsg='If this were an actual form the valuen';         aMsg+='passed for this selection would be :nn';
        aMsg+=fPath
        alert(aMsg);
    } 

//-->
</SCRIPT>

<STYLE>
<!--
.main
{
    color : #000000;
    background-color : #FFFFFF;
    font-family : Verdana, Tahoma, Arial, Helevetica, Sans-Serif;
    font-size : 8.5pt;
    cursor : default;
    font-weight : normal;
}
//-->
</STYLE>

<FORM name=doNothing action=# method=post>
<DIV class=main><?xml:namespace prefix = asp /><asp:Literal id=TreeList Runat="server"></asp:Literal></DIV></FORM>


The Recursion

The key to making this all work properly is the folder recursion. The primary issue is when creating unique ID names used in the <div></div> tags so that the Javascript showing and hiding of the sub-folders works properly. This is accomplished by using a simple increasing integer counter that will be used as part of the ID name.

In the example the starting folder for recursion is set in the constant "basePath". You can define this variable with any valid sub-folder under your web root. Do not use physical path names (e.g. c:\inetpub\www_root\images), because this routine uses Server.MapPath to grab the correct physical path from the virtual folder name (e.g. /images).

Lastly, since you typically would not want to show any of the folders automatically created by FrontPage server extensions (if they are installed on your server), I include a boolean variable "hideFrontPage" with a default of True. If you want to show all folders including the ones created by FrontPage, set this value to False.

tree.vb

 Imports Microsoft.VisualBasic Imports System Imports System.IO Imports System.Text Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.HtmlControls Public Class DirTree Inherits Page '-- define the base root path where the tree begins Private Const basePath As String = "/" '-- set to false if you want to show FrontPage '-- created folders Private Const hideFrontPage As Boolean = True '-- a folder counter used in creating path ID's Private divID As Integer = 0 '-- the base public tree builder Public Function buildTree() As String Dim tStr As New StringBuilder() tStr.Append("<INPUT onclick="" value=" + Chr(34))        tStr.Append(Server.HtmlEncode(basePath) + Chr(34))        tStr.Append(" name="" np?? tStr.Append(?this.value)?? unlockSubmit(?) radio?

 <IMG src="" 0?? tStr.Append(?border="" ?) fld_open.gif?

Root Folder " + basePath + "
") tStr.Append(recurseFolders(basePath, 1, 0)) Return tStr.ToString End Function '-- used to recurse folders Private Function recurseFolders(ByVal startPath As String, _ ByVal folderLevel As Integer, _ ByVal rootID As Integer) As String '-- use a StringBuilder because its much '-- faster than standard string concatenation Dim folderStr As New StringBuilder() Dim actualFolder As String = Server.MapPath(startPath) Dim tFol As String = "" Dim si As New DirectoryInfo(actualFolder) Dim nf As String = "" Dim rp As String = "" '-- if folder doesnt exist, exit If si.Exists = False Then Exit Function Else '-- begin recursion by geting a list of sub-folders in the directory Dim subFol() As String = Directory.GetDirectories(actualFolder) '-- get the folder count Dim folCount As Integer = UBound(subFol) Dim fLoop As Integer = 0 '-- sort the folders by name Array.Sort(subFol) '-- if sub-folders exist If folCount >0 Then For fLoop = LBound(subFol) To UBound(subFol) '-- our unique ID number for the div ID's divID += 1 If subFol(fLoop) Is Nothing Then '-- skip it Else '-- print folder and recurse Dim sri As New DirectoryInfo(subFol(fLoop)) tFol = "" If Right(actualFolder, 1) <>"\" Then actualFolder += "\" End If If Right(startPath, 1) <>"/" Then startPath += "/" End If nf = startPath + sri.Name rp = nf.ToString '-- print check based on if we are hiding '-- frontpage created folders Dim doPrint As Boolean = False If hideFrontPage = True Then If isFrontPage(nf) = False Then doPrint = True End If Else doPrint = True End If '-- print folders if passed above test If doPrint = True Then tFol += recurseFolders(nf, folderLevel + 1, rootID) If tFol <>"" Then folderStr.Append(printSpacers(folderLevel)) folderStr.Append("<A href="" folderStr.Append(??);?? folderStr.Append(divID.ToString) ?_?) + folderLevel.ToString folderStr.Append(?_? folderStr.Append(rootID.ToString) ?f?) folderStr.Append(??, folderStr.Append(?,?i?) folderStr.Append(?_?) folderLevel.ToString) folderStr.Append(?d?) javascript:showHide(?)>") folderStr.Append("<IMG alt="" src="" name="" 0?? ?) ?_?) + folderStr.Append(?_? folderStr.Append(?folder?? this Expand folderStr.Append(? Chr(34)) divID.ToString folderStr.Append(folderLevel.ToString) folderStr.Append(rootID.ToString i?) folderStr.Append(?border="" plus.gif

</A>") Else folderStr.Append(printSpacers(folderLevel)) folderStr.Append("<IMG height=1 src="" 0?? ?) folderStr.Append(?border="" 16?? folderStr.Append(?width="" 12?? transdot.gif?

") End If folderStr.Append("<INPUT value=")                            folderStr.Append(Chr(34))                            folderStr.Append(Server.HtmlEncode(rp) + Chr(34))                            folderStr.Append(" name="" np?? unlockSubmit(?) radio?? ?) folderStr.Append(?this.value)?? folderStr.Append(?onclick=""> <IMG src="" name="" ? 0?? ?) + folderStr.Append(?_? folderStr.Append(rootID.ToString) folderStr.Append(?_?) folderStr.Append(folderLevel.ToString) folderStr.Append(?border="" folderStr.Append(Chr(34) divID.ToString) f?) fld_close.gif?

"" Then folderStr.Append("
<DIV id="" ?_?) + folderLevel.ToString folderStr.Append(?_? folderStr.Append(rootID.ToString) folderStr.Append(? Chr(34)) folderStr.Append(Chr(34)) display:none;?) folderStr.Append(divID.ToString d?)>") folderStr.Append(tFol + "</DIV>") End If End If End If Next End If End If Return folderStr.ToString End Function '-- prints spacers for use with the folder recursion Private Function printSpacers(ByVal spaceCount As Integer) Dim sp As String = "" Dim i As Integer = 0 i = spaceCount * 25 If spaceCount >0 Then sp = "<IMG src="" width=" + Chr(34) + i.ToString + Chr(34) + " border=0 + transdot.gif?? ?12?? sp Chr(34) 0

" End If Return sp End Function '-- returns boolean if folder is one of the default FrontPage folder names Private Function isFrontPage(ByVal folderName As String) As Boolean Dim isFP As Boolean = False Select Case Right(folderName.ToLower.Trim, 8) Case "_private" isFP = True Case "_vti_cnf" isFP = True Case "_vti_log" isFP = True Case "_vti_pvt" isFP = True Case "i_script" isFP = True Case "_vti_txt" isFP = True Case Else isFP = False End Select Return isFP End Function End Class 

I Hope you found this helpful. Comments can be sent to Andrew@dotNetBB.com.

blog comments powered by Disqus