Using the TreeView Control and a DataList to Create an Online Image GalleryBy Scott Mitchell
ASP.NET version 2.0 includes a wide array of Web controls not found in previous versions. One such control is the TreeView, which is ideal for displaying hierarchical data. The TreeView control can be bound to a hierarchical data source such as the XmlDataSource or SiteMapDataSource, or can be constructed programmatically. (For an example of using the TreeView to display a site map using the SiteMapDataSource, check out the Examining ASP.NET 2.0's Site Navigation article series.)
One common source of hierarchical data is the web server's file system. In many scenarios, there may be a folder that contains
subfolders and files that the user needs to be able to browse. Using the classes in the
we can programmatically populate the TreeView with the directory structure of our website. Then, when the user clicks a folder,
the selected folder's files can be displayed.
In this article we will examine how to create a simple image gallery web page that's a breeze to maintain. The image gallery lacks the bells and whistles found in more complex and feature-rich image galleries, but this one is a cinch to deploy and maintain. We'll be using two Web controls: a TreeView to list the folders and subfolders in which the images reside; and a DataList control that lists each image in the selected folder. Read on to learn more!
Displaying the TreeView
The application we are creating here has two components:
- A TreeView control that lists the folders rooted at some specified folder, and
- A data Web control to list the files in the selected folder. For this article we'll use a DataList, but in other scenarios a GridView, DetailsView, FormView, or Repeater might make more sense.
The .NET Framework contains a plethora of classes for working with the file system; these classes are found in the
(There are a bevy of FAQs on this namespace at ASPFAQs.com.)
One such class is
which has methods for returning a given directory's subdirectories (
as well as a method for returning all of the files in the directory
The following code shows how to populate the TreeView
PictureTree with the folder hierarchy rooted at the
folder specified by the
VirtualImageRoot constant. The
AddNodeAndDescendents method is the workhorse
here, recursing through the folder structure. (For more information on recursion, check out an old article of mine -
Recursion, Why It's Cool.)
Each node in the tree has an associated display value and hidden value. The display value is what is shown in the tree;
the hidden value is persisted across postbacks and used to associate some extra bit of information with each node. These
two values are specified in the
TreeNode constructor -
Dim node As New TreeNode(text, value).
The folder's name is used as the text while the virtual path is used as the value. The virtual path
is the path by which a client would request the image -
/Images/Public/Picture1.jpg, for example - as compared
to the physical path, which would be the actual file path on the web server's file system (such as
C:\MySites\ImageGallery\Images\Public\Picture1.jpg. See Using
Server.MapPath() for more information on the differences between virtual and physical paths and how
Server.MapPath() can be used to translate from a virtual path to a physical one.
Displaying the Files in the Selected Folder
With the file system structure displayed in the TreeView, all that remains is to display the files in the selected folder. To accomplish this, we can add a data Web control to the page and bind its data to the list of files in the currently selected folder. But how can we tell what folder is selected, and how do we know when the user wants to view the files in a different folder?
The TreeView has a
that returns the value of the currently selected node. Recall that we've assigned the folder's virtual path to its corresponding
node's value. Given the path to the selected folder, we can get the list of files in that folder by creating a
DirectoryInfo object and using its
GetFiles() method. This returns an array of
FileInfo objects that can be
bound to the data Web control (a DataList, for our image gallery).
When a TreeView node is clicked, a postback ensues and the TreeView's
fires. When this event fires, we want to rebind the data to the data Web control, using the newly selected folder.
These two tasks are accomplished using the following code. The
gets the files in the specified folder and binds them to DataList
event handler simply calls
DisplayPicturesInFolder(virtualFolderPath), passing in the value of the selected node.
Note: The first line of code in the
DisplayPicturesInFolder(virtualFolderPath) method does a quick security check
to make sure that the path being requested is within the folder hierarchy specified by the
PicturesInFolder DataList contains a single
ItemTemplate that displays the name of the image (without
the extension) and includes an Image Web control for displaying the picture:
The end result is a simple image gallery application. The TreeView lists the folders in the file system rooted from a specified starting folder. Clicking on a particular folder in the TreeView displays its images on the right. This image gallery application is a breeze to deploy (as it's just a single ASP.NET page) and to update. To add, edit, or remove images, simply upload, edit, or delete the image files from the web server. The image gallery will immediately reflect the changes!