Introduction:
In this article I will explain how to bind images to dropdownlist in asp.net using JQuery.
To implement concept first design table in your database and enter data as shown below
If you observe above code I am binding title to dropdownlist elements by using BindTitles() method. Here our JQuery plugin will take the title of dropdownlist elements and display the images beside of the text.
In this article I will explain how to bind images to dropdownlist in asp.net using JQuery.
Description:
In previous articles I explained about how to implement cascading dropdownlist and Ajax Cascading dropdownlist. Now I will explain how to bind dropdownlist with images dynamically in asp.net using JQuery. In one of website I saw one dropdownlist that contains Country names along with country flags. I feel it’s better to write post to explain how to bind images to dropdownlist in asp.net. To implement this concept by using JQuery plugin we can achieve this easily.
In previous articles I explained about how to implement cascading dropdownlist and Ajax Cascading dropdownlist. Now I will explain how to bind dropdownlist with images dynamically in asp.net using JQuery. In one of website I saw one dropdownlist that contains Country names along with country flags. I feel it’s better to write post to explain how to bind images to dropdownlist in asp.net. To implement this concept by using JQuery plugin we can achieve this easily.
Column Name
|
Data Type
|
Allow Nulls
|
ID
|
int(set identity property=true)
|
No
|
CountryName
|
varchar(50)
|
Yes
|
CountryImage
|
varchar(50)
|
Yes
|
After completion of table creation enter data in table like as show in below.
 |
Here I am getting images data from already inserted data if you want to dynamically insert images in database check this post insert images in folder and images path in database.
Now open Visual Studio and create new website after that right click on your website and add new folder and give name as Images and
insert country flag image in that folder you should get it from
attached folder.After that write the following code in your aspx page
<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>Seelcted Country:</b>
</td>
<td>
<asp:Label ID="lbltext" runat="server"></asp:Label>
</td>
</tr>
</table>
</form>
</body>
</html>
|
If
you observe above code in header section I added some of script files
and css file by using those files we have a chance to add images in
dropdownlist. To get those files download attached sample code and use
it in your application.
After completion of aspx page design add following namespaces in code behind
C#.NET Code
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
|
After add namespace write the following code
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=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true");
con.Open();
SqlCommand cmd = new SqlCommand("select * from CountryImages", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
ddlCountry.DataTextField = "CountryName";
ddlCountry.DataValueField = "CountryImage";
ddlCountry.DataSource = ds;
ddlCountry.DataBind();
con.Close();
}
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
lbltext.Text = ddlCountry.SelectedItem.Text;
BindTitles();
}
|
VB.NET Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.UI.WebControls
Partial Class VbSample
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindDropDownList()
BindTitles()
lbltext.Text = ddlCountry.Items(0).Text
End If
End Sub
''' <summary>
''' This Method is used to bind titles to each element of dropdown
''' </summary>
Protected Sub BindTitles()
If ddlCountry IsNot Nothing Then
For Each li As ListItem In ddlCountry.Items
' setting text value of item as tooltip
li.Attributes("title") = "Images/" & li.Value
Next
End If
End Sub
''' <summary>
''' Bind Dropdownlist Data
''' </summary>
Protected Sub BindDropDownList()
Dim con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")
con.Open()
Dim cmd As New SqlCommand("select * from CountryImages", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
ddlCountry.DataTextField = "CountryName"
ddlCountry.DataValueField = "CountryImage"
ddlCountry.DataSource = ds
ddlCountry.DataBind()
con.Close()
End Sub
Protected Sub ddlCountry_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
lbltext.Text = ddlCountry.SelectedItem.Text
BindTitles()
End Sub
End Class
|
Now run your application and check how your dropdownlist will be
Demo
 |
Download sample code attached
No comments:
Post a Comment