email article printer friendly get the code more resources

Display and Manage Images in ASP.NET
Develop image-management apps that exploit the .NET Framework and ASP.NET with recursion, the TreeView control, and the System.Drawing.Images and System.IO namespaces.
by John Papa

Posted May 21, 2004

Technology Toolbox: C#, ASP.NET

Q:
Manipulate Images in a Web App
I'm designing a Web application to display and manipulate images. The application should iterate through a directory structure that stores images and let users navigate the folders using a treeview-like interface. Images could be any size, so users might need to reduce them for speed purposes—maybe to thumbnail size. I used to be able to do all this with the GDI API; can I use ASP.NET instead?

A:
ASP.NET streamlines your image-processing chores. Use ASP.NET in conjunction with the .NET Framework, which exposes image-processing tools that leave the GDI API in the dust. The System.Drawing and System.Drawing.Images namespaces let you manipulate images, perform image streaming, and resize/reformat images.

Image-viewer applications should let users navigate through the images. A TreeView control works well; it lets you display a complete directory structure, retrieve a series of images, shrink them down, and load them into an array. I'll show you how to build a treeview in a Web Form that enumerates through a multilevel folder structure. You'll use recursion and other techniques to let users easily find and pick images to view.

You'll team up the TreeView and DataList controls to manage data, and you'll use them to load directory structures (with the System.IO namespace) and thumbnail images. You'll stream their thumbnails to a Web page using the data-bound ASP.NET DataList control. And you must remember to balance image file size against network bandwidth constraints. Fortunately, I know some tricks and workarounds I'll tell you about along the way.

Start by downloading the TreeView control (see Figure 1). It's part of the Microsoft Internet Explorer WebControls (IEWC) download, which also includes Toolbar, TabControl, and MultiPage UI controls (see Additional Resources). You don't get these controls in Visual Studio .NET.

The download's readme file guides you through installation. You copy the webctrl_client folder and its contents to the root of your ASP.NET app. These files contain the controls' behaviors and images. Then you copy the IEWC's .NET assembly to your app's bin folder. The assembly file, Microsoft.Web.UI.WebControls.dll, should appear in the project's References list (see Figure 2). Be sure to reference the IEWC as well. Then build the solution and try out the samples included with the IEWC.

Any ASP.NET project referencing the IEWC can use TreeView on a Web Form. I've included a sample app that reads a directory structure, using the System.IO namespace to locate its folders and JPG files (download all the sample apps in a single Web project).