Breaking News
Loading...

Create dropdown list with text and images (ASP.net- C#)

Share on Google Plus

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.
Visit our website www.bel-technology.com


You Might Also Like

0 comments

Our Logo

Our Logo
Tech Hunters

Like us on Facebook