Archive for October, 2016

Display Images in RadioButtonList Control in ASP.NET

October 20, 2016 Leave a comment

Hi all,

Try this example to Display Images in RadioButtonList Control in ASP.NET

You can also check my previous posts

Bind RadioButtonList with Image from Database

Bind RadioButtonList to Image

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, as shown in the following:

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

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 column.
The RepeatLayout property is used to specify the arrangement of RadioButtons inside the RadioButtonList control. By default or when it is set to “Table”, RadioButtons are rendered in a table but if it is set to “Flow”, it is rendered without a table.

Step 3: Write the 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.CellPadding = 5;
RadioButtonList1.CellSpacing = 5;

Hope this helps

Good Luck.


Categories: ASP.Net