Displaying Images with the ASP.NET Repeater Control

Images are often an integral part of an application. Many businesses use image cataloguing as part of their everyday business process, from Insurance companies to automotive sales. Images are also sometimes tricky to handle within ASP.NET applications.

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

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

The control we will use to implement this sample application will be the Repeater control. For those who are familiar with classic ASP style programming the Repeater control will be quite familiar. We will use the basic principles behind the Repeater control to implement HTML template chunks which can handle the display of a series of thumbnails contained within a folder.

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