Question

I am looking for a control or a sample project to browse files and folders of a defined folder recursively with asp.net using treeview.

I dont know if there is such as a free control/sample project like this?

Thanks in advance.

Answer 1

See my article – Build a File tree explorer with asp.net and jquery. The original jquery file is no longer available at the source i specified in the article. However i have the jquery file and can make it available.

Edit: I will post code in a bit.

Code is below:

First you’ll need server code to access the file system. This is can go inside a code behind file or in the aspx page itself – just delete everything else.

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim dir As String
    If Request.Form("dir") Is Nothing Or Request.Form("dir").Length <= 0 Then
        dir = "/"
    Else
        dir = Request.Form("dir")
    End If
    Dim di As New System.IO.DirectoryInfo(Server.MapPath(dir))
    Dim sb As New StringBuilder
    sb.Append("<ul class=""jqueryFileTree"" style=""display: none;"">" & ControlChars.Lf)
    Dim di_child As System.IO.DirectoryInfo
    For Each di_child In di.GetDirectories()
        sb.Append((ControlChars.Tab & "<li class=""directory collapsed""><a href=""#"" rel=""" & dir & di_child.Name & "/"">" & di_child.Name & "</a></li>" & ControlChars.Lf))
    Next di_child
    Dim fi As System.IO.FileInfo
    For Each fi In di.GetFiles()
        Dim ext As String = ""
        If fi.Extension.Length > 1 Then
            ext = fi.Extension.Substring(1).ToLower()
        End If

        sb.Append((ControlChars.Tab & "<li class=""file ext_" & ext & """><a href=""#"" rel=""" & dir & fi.Name & """>" & fi.Name & "</a></li>" & ControlChars.Lf))
    Next fi
    sb.Append("</ul>")
    Response.Write(sb.ToString)
End Sub

Next you’ll need a page to show the file tree. This page needs to reference the jquery core file and the jquery file tree script. I happen to have a reference to the jquery core file in my master page.

<link href="../styles/jqueryFileTree.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jqueryFileTree.js" type="text/javascript"></script>

In the page that shows the file tree, stick this code. Root is the directory to browse, filetree.aspx has the serve code above. The div becomes the file tree. For the demo i use an iframe to act as the file viewer.

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function () {
        $j('#divFileTree').fileTree({
            root: '/demos/',
            script: 'filetree.aspx',
            expandSpeed: 1000,
            collapseSpeed: 1000,
            multiFolder: false
        }, function (file) {
            alert(file);
            $j('#demoviewer').attr('src', file);
        });
    });


</script>
<div id="divFileTree"></div>