Display and Manage Images in ASP.NET (Continued)

Use Recursive Looping
The LoadTreeView method moves on to build the treeview by looping recursively through the folder structure and loading the folders and files one at a time. The BuildTree method handles most of this functionality, accepting an argument telling the treeview where to start looking for the JPGs, and a second argument referencing an instance of the treeview's Nodes collection. Create a configuration setting in the Web.config file manually to store the starting point for where the images are stored. Use the Web.config file so you can change the location from one Web app to another without having to rebuild the project. Grab the starting point value by importing the System.Configuration namespace into the codebehind, then retrieve the setting:

string sGlobalImageFolder = 
   ConfigurationSettings.AppSettings.Get
   ("ImageFolder");

The BuildTree method iterates through the current folder (passed in as the sPath argument), searching for all folders and any JPGs. Use the System.IO namespace to access the .NET Framework's Directory class, which handles the functionality of retrieving and looping through the folder structure. Pass a path to GetDirectories (a Directory class method), and it returns an array of the folders and files contained within the given path. BuildTree grabs the folders into an array, then loops through each subfolder in the array. Invoke the CreateFolderNode method for each subfolder. This creates the folder node and adds it to the treeview's Nodes collection (see Listing 1).

BuildTree goes after the files once the folders immediately within the main path have been added to the treeview's Nodes collection. The Directory class has a GetFiles method, which accepts two arguments: one for the path to search, and the other for the filename pattern to match. GetFiles returns an array of the JPGs in the current path's folder. BuildTree traverses this array of files one by one, adding the file node to the treeview's Nodes collection.

So far, BuildTree has retrieved only one level at a time, but it can grab folders and files several levels deep. Now you can use it to iterate through the treeview's nodes, looking for the subfolders within the current folder. It invokes the BuildTree method recursively when it finds one, passing the method to the folder one level deeper. This process continues for all the folder levels, building a recursive call stack. It unwinds itself eventually when there are no more folders in the branch. Recursion is a great technique, but make sure you include an out clause when implementing recursive algorithms. The out clause in this algorithm calls itself only for as many levels of subfolders as there are.

Create Your File Nodes
The CreateFileNode and CreateFolderNode methods show how easily you can create a folder or a file node (see Listing 2). Start by creating a TreeNode object. Set its type to be a file (one of the types you established in the LoadTreeView method), then set the text for the node and the NavigateUrl property. NavigateUrl tells TreeView what URL to navigate to when this node is selected. In this case, set the NavigateUrl to link to the JPG the node represents. You use the iframe created in the ASPX page to control where the image appears. The file node's Target property is set to the iframe control, telling the JPG image to render in the iframe to the right of the treeview.

This sample application performs well in small-scale situations, but you should consider more scalable solutions if you need to load hundreds of folders and files in the image path. For example, you could load the treeview with folders and its subfolders, but not with the image files. The treeview then would create only nodes for the folders—usually much more manageable in number.

However, this technique would mandate using another approach to display your JPGs. You couldn't link the file nodes to render JPGs in an iframe, because you wouldn't have file nodes in this solution. Instead, you'd set the folder nodes to load all the images within that folder in the iframe. This in turn would require you to tackle the issue of large image file sizes. Loading several of them in an iframe would likely overrun your network's bandwidth as well as screen real-estate limits. You can solve both problems by creating image thumbnails and displaying them using an ASP.NET DataList (see Figure 3). I've included the information you need to build this solution in the sidebar, "Conserve Bandwidth With Thumbnails." It lets users see a large number of image thumbnails at once and load the ones they choose quickly.

Some server controls have a large footprint and can degrade performance, but if you use them judiciously, you can combine feature-rich server controls—such as TreeView and DataList—to yield robust applications.

About the Author
John Papa is a New York-based software architect, trainer, and consultant. John has authored and coauthored books on SQL Server, ADO, and XML, and he creates custom courseware. He also writes the Data Points column in MSDN Magazine and speaks regularly at industry events such as VSLive!. Reach him at vspj@lancelotweb.com.