Step 1 - Create new Project -> Select ASP .NET Web Application -Give a Name (as your wish ) as DropDownWithImages
Step 2- Create New WebForm name it as DropExample.aspx.
Step 3- Create a table With Following Columns
Step 4 - Insert Records in the Table
Step 5 - Add a new Folder name it as images and add images to the folder what You inserted in Table and create another Folder name it as Scripts and add js files download js files from this link.
Step 6- in Source page (i.e DropExample.aspx) write following Code
DropExample.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropExample.aspx.cs" Inherits="DropDownWithImages.DropExample" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dropdownlist with Images</title>
<link href="Scripts/dd.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.6.1.min.js"></script>
<script src="Scripts/jquery.dd.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function (e) {
try {
$("#ddlImagedropdown").msDropDown();
} catch (e) {
alert(e.message);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td align="right">
<b>Profile:</b>
</td>
<td>
<asp:DropDownList ID="ddlImagedropdown" runat="server" Width="150px" OnSelectedIndexChanged="ddlImagedropdown_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
</td>
</tr>
</table>
</form>
</body>
</html>
Step 7- Add Connection String in Web.config file.
In Web.Config:
<configuration>
<appSettings>
<add key="DbConn" value="Data Source=kiran-pc;Initial Catalog=RNDDatabase;User ID=sa;Password=123"/>
</appSettings>
</configuration>
Step 8 - Write below code in code behind (i.e DropExample.aspx.cs)
DropExample.aspx.cs:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
namespace DropDownWithImages
{
public partial class DropExample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bindddl();
BindTitle();
}
}
protected void Bindddl()
{
string str= ConfigurationManager.AppSettings["DbConn"].ToString();
SqlConnection con = new SqlConnection(str);
con.Open();
SqlCommand cmd = new SqlCommand("select * from DropDownImages", con);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adp.Fill(ds);
ddlImagedropdown.DataTextField = "Name";
ddlImagedropdown.DataValueField = "Image";
ddlImagedropdown.DataSource = ds;
ddlImagedropdown.DataBind();
con.Close();
}
protected void BindTitle()
{
if (ddlImagedropdown != null)
{
foreach (ListItem li in ddlImagedropdown.Items)
{
li.Attributes["title"] = "images/" + li.Value;
}
}
}
protected void ddlImagedropdown_SelectedIndexChanged(object sender, EventArgs e)
{
BindTitle();
}
}
}
Step 9 - build Run the apllication we get output like this.
Posts
