How to show images in RadioButtonList control in ASP.NET

In this article I will explain how to show images in a RadioButtonList control in ASP.NET

Introduction:

A RadioButtonList control is a collection of RadioButtons. It is used to select one item from a group of items. Generally a text is displayed with RadioButtons in the RadioButtonList. But sometimes it is required to display an image in place of the text. RadioButtonList control allows us to display an image with the RadioButtons using ListItem. In this article we will see how we can display an image with RadioButtons in a RadioButtonList control

Step 1:

Create a new ASP.NET Web Application in Visual Studio. Add a folder in the root named Images. Right click on the project name and select

Add -> New Folder

Now add some images in this folder to show with RadioButtons in the RadioButtonList control. Right click on the Images folder and select

Add -> Existing Item

Step 2:

Add a RadioButtonList in HTML source view of Default.aspx

<div>
     <asp:RadioButtonList ID="RadioButtonList1"
          runat="server"
          BorderStyle="Groove"
          BorderWidth="1px"
          RepeatColumns="3"
          RepeatLayout="Table">
     </asp:RadioButtonList>
</div>

RepeatColumns of RadioButtonList is set to “3” to divide its items in three columns. For example if we have 18 items in the RadioButtonList, it will be displayed in 3 columns with 6 RadioButtons in each columns.

RepeatLayout property is used to specify the arrangement of RadioButtons controls inside the RadioButtonList control. By default or when it is set to “Table”, RadioButtons are rendered in table but if it is set to “Flow”, it is rendered without a table.

Step 3:

Write following code in the Page Load event of Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
     ListItem item;
     int i = 0;
     System.IO.FileInfo file;

     var Images =
          from n in System.IO.Directory.GetFiles(Server.MapPath("Images"))
          orderby n descending
          select n;

     foreach (var filename in Images)
     {
          file = new System.IO.FileInfo(filename);
          item = new ListItem("<img src='" + "Images/" + file.Name + "' alt='" + file.Name +
               "' title='"+file.Name+"'/>", i.ToString());
          RadioButtonList1.Items.Add(item);
          RadioButtonList1.CellPadding = 5;
          RadioButtonList1.CellSpacing = 5;
          i++;
     }
}

In the Page_Load event first all the images in the “Images” folder is stored in “Images” variable using a LINQ query. Directory.GetFiles() method returns all the files in the directory with its path. A foreach loop is used to iterate through all the files. Name property of the FileInfo class is used to extract file names from the file path.

Items in a RadioButtonList is added using its Item.Add() method. It takes ListItem as a parameter. Before that a ListItem is initialized using a two string parameters. First string is used as a label for the radio button which adds an <img> tag to display an image with the radio buttons and second string parameter is used as the value of the radio button. A “Title” attribute is used with the <img> tag to display a ToolTip with the images on hover.

Leave a Reply

Your email address will not be published. Required fields are marked *