Images are often an integral part of an application. Many businessesuse image cataloguing as part of their everyday business process, fromInsurance companies to automotive sales. Images are also sometimestricky to handle within ASP.NET applications.

Although there are quite a few methods and controls for managing imagesand thumbnails the process can be a little obfuscated for developerswho are not quite sure where to start, or? which controls to employ toaccomplish the task. You really have to get creative sometimes andoften what will happen is a particular development strategy that willstart out with a good concept but, as it develops, it? becomes more andmore unorganized and you wind up with quite a mess in the end.

The purpose of this tutorial is to look at one particular approach fordisplaying a series of thumbnail images and provide a link to a popupwindow which will handle displaying the full original image. The goalof this sample application will be to accomplish this requirement inthe most simplistic way possible, using the least amount of code tokeep things organized and tidy.

The control we will use to implement this sample application will bethe Repeater control. For those who are familiar with classic ASP styleprogramming the Repeater control will be quite familiar. We will usethe basic principles behind the Repeater control to implement HTMLtemplate chunks which can handle the display of a series of thumbnailscontained within a folder.

We will also build a DataTable object that we can directly bind to theRepeater control, since the Repeater can only be used with a datasource. During the binding process we will manually manipulate theitems in the control so that we can popup a new window when a certainitem is clicked and display the original full image.
Preparing

First we need a sample ASP.NET project to work with. Being by startingup Visual Studio .NET and creating a new web project in either VB.NETnamed Repeater, or in C# named RepeaterCs. We will use the defaultWebForm1.aspx that is created with the project to implement ourRepeater control.

Before we can get started we will need some images to work with. Youcan either use the images provided in the sample source code for thistutorial or you can use your own. You will need 2 folders in theproject, one to hold the thumbnails and one to hold the full images.Once you've found the series of images to work with create the 2folders by right clicking on the project in the solution explorer andselecting Add->New Folder? Name the folders "thumbnails" and"images".

Ensure the thumbnails have the exact same names as the full images sothat they are displayed in the exact same alphabetical order in thefolder, otherwise the thumbnails will point to the wrong full images.
?

Read more