ASP.Net Image Dropdownlist using Repeater

I was searching for ASP.Net Image Dropdownlist that can have a image thumbnail before the text in each item in the list. However, we do not have any option ASP.Net Image Dropdownlist that can contain image thumbnails. WPF does but not ASP.Net. Hence, I started planning to build one for my project. However, it is not a user control or server control. This can be made as server control with necessary changes but this article will be big. I would like to keep it simple and to explain how this can be achieved.

Constructing the Image Dropdownlist
I was interested in showing this as close as possible to the standard Dropdownlist. I planned to have three main components to construct. The following are the list and hierarchy of the controls used

• Dropdownlist as a HTML DIV
a. Image to show the selected item’s Image
b. Label to show the selected item’s text
c. Button to simulate the look of the Dropdownlist’s arrow
• List window that contains the list of Dropdownlist items to choose
a. Image
b. Linkbutton to raise a Postback event for selection

Down Arrow in ASP.Net Image Dropdownlist
The only issue in getting closer is due to the down arrow button. I had a look at the character map, found the down arrow, and used it as a text in the down arrow button. For those who does not know what is character map in windows go to start menu ? run ? type charmap and you can select any letters or symbols and copy the respective values. If you are bit worried about the display issues in other platforms because of the Character you have chosen to show the dropdown. You may chose to use a small GIF image.

CSS Classes for styling
I have used the CSS classes for styling this, so a little knowledge on the CSS is necessary. We used both ID and CSS Class to define the style for the elements. I used the IDs because of simplicity. However, if you are trying to create this as a control, I would suggest using a class name respectively. Reason behind is, if you are using the control inside another control, then the client id depends on it’s control hierarchy. Because of this, you will see that the class is not referenced properly.

Showing Images in the Dropdownlist using a ImageHandler
I wish data for this Dropdownlist to be completely driven from the database table. I have used Northwind Database’s category table. It contains image data for its picture column. And if your picture is in image datatype, we know that we need a Image handler to render the image to the browser. Please refer Asp.Net Image Handler for more information.

Read more here
ASP.Net Image Dropdownlist