Adding ImagesTo demonstrate how to open files with the tree view control we will create a simple web site with some images in it. We will then use the tree view control to display links to open up these images that are included with our project. For this example I will be using two temporary image files that are included with the source of the project. To begin, create a new ASP.NET Empty Web Site and:
  1. Right click the project in your solution explorer.
  2. Select new folder.
  3. Name the folder ‘Images’.
  4. Right click the Images folder.
  5. Select add existing item…
  6. Select Image Files from the filter drop down list.
  7. Select the images you wish to add to the project.
  8. Click add.
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
Once we have some temporary images added to the project we are ready to configure our tree view control.
Creating the FormTo begin creating our web form:
  1. Right click the project in your solution explorer.
  2. Select add new item…
  3. Select a web form.
  4. Name it ‘Default.aspx’.
  5. Click add.
  6. Open Default.aspx up to source mode.
  7. Drag and drop a treeview onto the web form.
  8. Set the AutoGeneratedataBindings property to ‘False’.
  9. Add the following Node to the tree view:
    Code Block
    Ask a Question
    Download Source
    Default.aspx
    The nodes of our tree view.
    <Nodes>
    <asp:TreeNode Value="C:" Text="Images" SelectAction="Select" PopulateOnDemand="true"></asp:TreeNode>
</Nodes>
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
This has created a tree view with one node that we will configure to display the appropriate data. To do this, we will need to add some code to populate our tree view with the appropriate links. To begin, open Default.aspx.cs up for editing and add the following code to the Page_Load event method:
Code Block
Ask a Question
Download Source
Default.aspx.cs
The Page_Load event method.
//set the treeview's first node to our Images folder
TreeView1.Nodes[0].Value = Server.MapPath("Images");
This simply sets our node to the Images folder relative to our web site. Next, we need to add the code that will set our tree nodes to link to the correct image file when they are populated. To do this, open Default.aspx up to design mode and select the treeview. In the properties window click the eventsicon and double click the TreeNodePopulate event. Then, add the following code to that event method:
Code Block
Ask a Question
Download Source
Default.aspx.cs
The TreeView1_TreeNodePopulate event method.
if (IsCallback)
{
    if (e.Node.ChildNodes.Count == 0)
    {
        DirectoryInfo directory = null;
        directory = new DirectoryInfo(e.Node.Value);
 
        foreach (DirectoryInfo subtree in directory.GetDirectories())
        {
            TreeNode subNode = new TreeNode(subtree.Name);
            subNode.Value = subtree.FullName;
            try
            {
                if (subtree.GetDirectories().Length > 0 | subtree.GetFiles().Length > 0)
                {
                    subNode.SelectAction = TreeNodeSelectAction.SelectExpand;
                    subNode.PopulateOnDemand = true;
                    subNode.NavigateUrl = "#";
                }
            }
            catch
            {
 
            }
            e.Node.ChildNodes.Add(subNode);
        }
        foreach (FileInfo fi in directory.GetFiles())
        {
            TreeNode subNode = new TreeNode(fi.Name);
            e.Node.ChildNodes.Add(subNode);
            subNode.NavigateUrl = "Images/" + fi.Name.ToString();
        }
    }
}
This configures tree view to add nodes that link to our images inside of the Images folder.
We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting! 
Testing
To test this out load up the web site. Expand the Images folder in the tree view. Click one of the images and ensure that the image is loaded up in your browser. This demonstrates how easy it is to link the tree view control to files relative to your web site. 
Open Files TreeView asp4 cs