Videos | Podcasts
Skip Navigation Links
Home
About
Articles
Blog
Write for us
SHOP
Donate

 Subscribe

 Podcast RSS
Implementing ImageRadioButtonList Control in ASP.NET
AzamSharp
Published Date: 11/23/2009 9:56:12 AM
Views: 4623

Abstract:
ASP.NET webforms RadioButtonList control enables the developers to display mutually exclusive radio buttons. A common requirement for web applications is to display images along with the radio buttons. Unfortunately, the default implementation of the RadioButtonList does not have any support for the images. In this article we are going to implement a custom control which will add the functionality of images to the RadioButtonList control.
Why Not Use Repeater Control?

One easy solution would be to use the Repeater control to display the radio buttons with the images. This will be the preferred approach unless you want to reuse the radio button list with images on many different pages. For the sake of this article we will assume that you are interested in using the custom image radio button list control on multiple pages of your web application.

Understanding the RadioButtonList Control:

In order to implement a custom image radio button list control we must first understand how the RadioButtonList control is rendered. Below you can see the screenshot of the rendered HTML of the  RadioButtonList control.



As, you can see the RadioButtonList control is rendered as multiple controls. It consist of an HTML table, radio button and a label control. By looking at the generated HTML it is clear that we need to add an image control to the equation. In the next section we are going to start implementing the ImageRadioButtonList control.

Implementing ImageRadioButtonList Control:

The first step in implementing an ImageRadioButtonList control is to display the image tag alongside other controls of the RadioButtonList. Since, most of the functionality of the ImageRadioButtonList control will be identifical to the RadioButtonList control we will inherit from the RadioButtonList control and override and add few methods.

Before adding or overriding any methods we need to expose a new property which will hold the image URL information. We will call this property "DataImageUrl" and it will be a simple string property. Next, we will add an Image control to our ImageRadioButtonList. Take a look at the code below:



Inside the CreateChildControls method we are creating our Image control. The Image control is rendered inside the RenderItem method. Let's try to use this control on our page and see the result.

Before using the control we need to register the assembly on our page. Since, the control is created in the same assembly you can use the following code:



We also have populated the control with data using the following code:



The HTML generated by the above control is shown below:



The screenshot clearly shows that the image control was successfully rendered as part of the ImageRadioButtonList control. Now, all we need to do is to assign the property mentioned in the "DataImageUrl" to the "ImageUrl" property of the image control.



The PopulateImageUrlsUsingIEnumerableList method is responsible for populating the images inside the ImageRadioButtonList with the list. 



The _imageUrls is a simple List<String> which holds the URLs of the images. The PopulateImageUrlsUsingIEnumerableList is called from inside the CreateChildControls so that we don't have to populate the URLs again and again. 

Finally, the RenderItem method is where the image is rendered to the HtmlTextWriter. The repeatIndex value will fetch the correct image from the _imageUrls list and assign to the _image.ImageUrl property.



The ImageRadioButtonList is now ready for use. If you run the application again you will notice that the images are now displayed as shown below:



All seems good and dandy until you view the source of the page.



As, you can see that the last item "Cat" does not have any image but it still rendered the image tag. This is clearly waste of bytes and not acceptable. Let tweak our code so that we don't render the images where the imageUrl is not present.




With the above tweak the image control is only displayed if it is associated with an image.

What About DataSets?

The code above only works correctly if your collection is a generic list. If you are using DataSets or DataTable then it will fail. In order to fix this and support DataSets and DataTables we have added a new method "PopulateImageUrls" method as shown in the code below:



The implementation for the PopulateImageUrlsUsingDataTable is available in the download. 

Conclusion:

In this article we learned how to create an ImageRadioButtonList control. In normal scenarios you can get away by customizing a normal Repeater control but in certain conditions you can benefit from using this new control.

[Download Sample]
Similar Articles

Creating Rails Like Flash Feature in .NET The Flash Control

Attaching an ICON with the RequiredTextBox Control

Injecting Client Side Scripts for RequiredTextBox Control

Creating a RequiredTextBox Web Server Control in ASP.NET

Export Button Download it FREE

 
 
   
 
 

Comments/Feedbacks