ASP.NET: Bind Dropdownlist With Images

Introduction

This article explains how to bind images with text in a dropdownlist from your table.

Requirement

  • A table as in the following.

    Table design:

    DropDownList1.jpg

    Table data:

    DropDownList2.jpg

Code.aspx

I have used a DropdownList control to bind data from the table "ddl_image". Before doing the design you need the files "ddl.css", "jquery-1.6.1.min.js" and "jquery.dd.js". You can download them from here.

Add the following code in the 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="dropdown/ddl.css" />

<script type="text/javascript" src="dropdown/js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="dropdown/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 {

            $("#ddlprofile").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="ddlprofile" runat="server" Width="150px" onselectedindexchanged="ddlCountry_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>

</td>

</tr>

</table>

</form>

</body>

</html>

Code.cs

Here I tried to addd a dropdownlist first, then bind the titles and then call both functions on pageload as in the following.

1. Bind dropdownlist

protected void Bindddl()

    {

        SqlConnection con = new SqlConnection("Data Source=nehashama;Initial Catalog=rp;Integrated Security=true");

        con.Open();

        SqlCommand cmd = new SqlCommand("select * from ddl_image", con);

        SqlDataAdapter adp = new SqlDataAdapter(cmd);

        DataSet ds = new DataSet();

        adp.Fill(ds);

        ddlprofile.DataTextField = "Name";

        ddlprofile.DataValueField = "Profile_image";

        ddlprofile.DataSource = ds;

        ddlprofile.DataBind();

        con.Close();

    }

2. Bind Title

protected void BindTitle()

    {

        if (ddlprofile != null)

        {

            foreach (ListItem li in ddlprofile.Items)

            {

                li.Attributes["title"] = "ddl/" + li.Value; // it ll set the value of items in dropdownlist as tooltip

         

            }

        }

    }


3. Call on Page Load

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Bindddl();

            BindTitle();

           

        }

    }

Now save all and view the page in a browser, it will work fine and will look as in the following image:

DropDownList3.jpg
 

Next Recommended Readings