Create dropdown list with text and images (ASP.net- C#)
We are providing you a simplest way to create dynamic dropdown
list box with text and images. We used a jquery plugin to make this possible.
Code explained here:-
To implement concept first design table in your database and enter
data as shown below
Enter data like shown below
Create a aspx page and paste the below code:
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dropdownlist with Images</title>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
<script type="text/javascript" src="msdropdown/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="msdropdown/js/jquery.dd.js"></script>
<!-- Script is used to call the
JQuery for dropdown -->
<script type="text/javascript" language="javascript">
$(document).ready(function(e)
{
try {
$("#ddlCountry").msDropDown();
} catch (e) {
alert(e.message);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td align="right">
<b>Country:</b>
</td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" Width="150px" onselectedindexchanged="ddlCountry_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
<b>Selected Country:</b>
</td>
<td>
<asp:Label ID="lbltext" runat="server"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
Paste the below code in its aspx.cs file.
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs
e)
{
if (!IsPostBack)
{
BindDropDownList();
BindTitles();
lbltext.Text = ddlCountry.Items[0].Text;
}
}
/// <summary>
/// This Method is used to bind titles to each
element of dropdown
/// </summary>
protected void BindTitles()
{
if (ddlCountry != null)
{
foreach (ListItem
li in ddlCountry.Items)
{
li.Attributes["title"] = "Images/" + li.Value; // setting text value of item as tooltip
}
}
}
/// <summary>
/// Bind Dropdownlist Data
/// </summary>
protected void
BindDropDownList()
{
SqlConnection con = new
SqlConnection("Data
Source=.\\SQLEXPRESS;Initial Catalog=MySampleDB;Integrated Security=true");
con.Open();
SqlCommand cmd = new
SqlCommand("select
* from Images", con);
SqlDataAdapter da = new
SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
ddlCountry.DataTextField = "Name";
ddlCountry.DataValueField = "Image";
ddlCountry.DataSource = ds;
ddlCountry.DataBind();
con.Close();
}
protected void
ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
lbltext.Text = ddlCountry.SelectedItem.Text;
BindTitles();
}
}
Above code is functional. If you find any problem in applying
this, please contact us.
