How to Create Treeview from Folder in Asp.Net

Description:-

In this article we will see how to create treeview control from folder path. We can bind treeview control from server folder path in dot net. Here I have used vehicle folder to see some levels so you can see easy to understand and bind your own folder in treeview control.

Default.aspx:-

<div>
  <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>
</div>

Create Folder and Some levels of that Folder so we can create Treeview from that folder in your Web Application.

Now Go to Code behind file and Bind Folder using Dictionary Info through Folder and Create Treeview. Here you can see I have Called in page load event so when page call first time then Find Folder and Check All levels from that Folder.

Default.aspx.cs:-

protected void Page_Load(object sender, EventArgs e)
{
  if (!this.IsPostBack)
  {
    DirectoryInfo rootInfo = new DirectoryInfo(Server.MapPath("~/Vehicles/"));
    this.PopulateTreeView(rootInfo, null);
  }
}

Now PopulateTreeview from Getting Data and Read all Nodes from That Folder and Bind it in Treeview Control. Here I have Used How to Create Levels in Treeview Control.

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);
  }
}

now run your Application in Browser and there you can see treeview with your Specified Folder path. In my case look like below image.

Author : Umesh Patel

Related Posts