Sunday, March 29, 2015

Display Directory (Folder) structure using ASP.Net TreeView control in C#

Displaying Directory (Folder) structure using ASP.Net TreeView control
In this article I will explain how to display (show) Directory (Folder) structure like Windows Explorer using ASP.Net TreeView control in C# .

HTML Markup

    Vehicle Details</h3>
<hr />
<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" NodeIndent="15">
    <HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
    <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
        NodeSpacing="0px" VerticalPadding="2px"></NodeStyle>
    <ParentNodeStyle Font-Bold="False" />
    <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
        VerticalPadding="0px" />

using System.IO;
 Displaying Directory (Folder) structure using ASP.Net TreeView control
In the Page Load event of the Page, first the DirectoryInfo object of the Root directory (folder) is created and is passed to the PopulateTreeView method.
PopulateTreeView method is a recursive function which first loops through all the Subdirectories (Subfolder) of the Root directory (folder) adds each directory (folder) as a Node to the TreeView.
After adding the Node it gets all the files in the directory (folder) and then adds each file as a Node to the directory’s (folder’s) Node.
When the File node is created, the relative path of the File is calculated and set as the NavigateUrl of the Node so that when the Node is clicked the respective File will be opened (downloaded).
protected void Page_Load(object sender, EventArgs e)
    if (!this.IsPostBack)
        DirectoryInfo rootInfo = new DirectoryInfo(Server.MapPath("~/Vehicles/"));
        this.PopulateTreeView(rootInfo, null);
private void PopulateTreeView(DirectoryInfo dirInfo, TreeNode treeNode)
    foreach (DirectoryInfo directory in dirInfo.GetDirectories())
        TreeNode directoryNode = new TreeNode
            Text = directory.Name,
            Value = directory.FullName
        if (treeNode == null)
            //If Root Node, add to TreeView.
            //If Child Node, add to Parent Node.
        //Get all files in the Directory.
        foreach (FileInfo file in directory.GetFiles())
            //Add each file as Child Node.
            TreeNode fileNode = new TreeNode
                Text = file.Name,
                Value = file.FullName,
                Target = "_blank",
                NavigateUrl = (new Uri(Server.MapPath("~/"))).MakeRelativeUri(new Uri(file.FullName)).ToString()
        PopulateTreeView(directory, directoryNode);
Imports System.IO
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim rootInfo As New DirectoryInfo(Server.MapPath("~/Vehicles/"))
        Me.PopulateTreeView(rootInfo, Nothing)
    End If
End Sub
Private Sub PopulateTreeView(dirInfo As DirectoryInfo, treeNode As TreeNode)
    For Each directory As DirectoryInfo In dirInfo.GetDirectories()
        Dim directoryNode As New TreeNode() With { _
         .Text = directory.Name, _
         .Value = directory.FullName _
        If treeNode Is Nothing Then
            'If Root Node, add to TreeView.
            'If Child Node, add to Parent Node.
        End If
        'Get all files in the Directory.
        For Each file As FileInfo In directory.GetFiles()
            'Add each file as Child Node.
            Dim fileNode As New TreeNode() With { _
              .Text = file.Name, _
              .Value = file.FullName, _
              .Target = "_blank", _
              .NavigateUrl = (New Uri(Server.MapPath("~/"))).MakeRelativeUri(New Uri(file.FullName)).ToString() _
        PopulateTreeView(directory, directoryNode)
End Sub

No comments:

Post a Comment