ImagesInDropdownList

How to display flag images in dropdownlist in Asp.Net

Spread the love

Hello, today I will be discussing on how to display images in dropdownlist in asp.net from sql server database. Since we are going to display the data from the database, let’s first see our database table. To demonstrate this example, I have created Country table named COUNTRY_TBL.

Following is the structure of the Country table:

CountryTable_Structure

And following is some dummy data entered in the COUNTRY_TBL:

CountryTable_Data

As you can see in the above screenshot, flag images are being stored in a folder named “flags”. So next we will create a flags folder under Images folder and paste the flag images in that folder. Following is how the flags folder will look like now:

flagimages_solutionexplorer

Following is the code for the aspx page (Default.aspx):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%@ 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>
Selected Country:
</td>
    <td>
        <asp:Label ID="lbdropdown" runat="server"></asp:Label>
    </td>
</tr>
</table>
</form>
</body>
</html>

And Following is the code behind (Default.aspx.cs):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDropDownList();
            BindTitles();
            lbdropdown.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=SUNNY-PC\\SQLEXPRESS;Initial Catalog=AspSkills;Integrated Security=true");
        SqlCommand cmd = new SqlCommand("select * from COUNTRY_TBL", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        ddlCountry.DataTextField = "NAME";
        ddlCountry.DataValueField = "FLAGPIC";
        ddlCountry.DataSource = ds;
        ddlCountry.DataBind();
 
    }
    protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
    {
        lbdropdown.Text = ddlCountry.SelectedItem.Text;
        BindTitles();
    }
}

Following is how your dropdownlist with flag images will look like:
ImagesInDropdownList


Leave a Reply

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