Directory Tree Browser - Getting Started
(Page 2 of 3 )

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>


Next: The Recursion >>
 

More ASP.NET Code Articles
More By Andrew_Putnam

Comments On: Directory Tree Browser

>>> Be the FIRST to comment on this article!