In this article I will explain how to display (show) Directory (Folder) structure like Windows Explorer using ASP.Net TreeView control in C# and VB.Net.
This article also explains how to view or download the files from Server’s Directory (Folder) by clicking the Nodes of the TreeView control.
HTML Markup
The HTML Markup consists of an ASP.Net TreeView.
<h3>
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" />
</asp:TreeView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
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).
Note: In order to open (download) files using the TreeView Node, the root folder and all the files must be present inside the Website’s Root folder.
C#
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.
TreeView1.Nodes.Add(directoryNode);
}
else
{
//If Child Node, add to Parent Node.
treeNode.ChildNodes.Add(directoryNode);
}
//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()
};
directoryNode.ChildNodes.Add(fileNode);
}
PopulateTreeView(directory, directoryNode);
}
}
VB.Net
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.
TreeView1.Nodes.Add(directoryNode)
Else
'If Child Node, add to Parent Node.
treeNode.ChildNodes.Add(directoryNode)
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() _
}
directoryNode.ChildNodes.Add(fileNode)
Next
PopulateTreeView(directory, directoryNode)
Next
End Sub
Screenshot
![Display Directory (Folder) structure using ASP.Net TreeView control in C# and VB.Net]()
Demo
Downloads
