Post
Ask Question

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:

  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head id="Head1" runat="server">  
  3. <title>Dropdownlist with Images</title>  
  4. <link rel="stylesheet" type="text/css" href="dropdown/ddl.css" />  
  5. <script type="text/javascript" src="dropdown/js/jquery-1.6.1.min.js"></script>  
  6. <script type="text/javascript" src="dropdown/js/jquery.dd.js"></script>  
  7. <!-- Script is used to call the jQuery for dropdown -->  
  8. <script type="text/javascript" language="javascript">  
  9.     $(document).ready(function (e) {  
  10.         try {  
  11.             $("#ddlprofile").msDropDown();  
  12.         } catch (e) {  
  13.             alert(e.message);  
  14.         }  
  15.     });  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <form id="form1" runat="server">  
  20. <table>  
  21. <tr>  
  22. <td align="right">  
  23. <b>Profile:</b>  
  24. </td>  
  25. <td>  
  26. <asp:DropDownList ID="ddlprofile" runat="server" Width="150px" onselectedindexchanged="ddlCountry_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>  
  27. </td>  
  28. </tr>  
  29. </table>  
  30. </form>  
  31. </body>  
  32. </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

  1. protected void Bindddl()  
  2. {  
  3.     SqlConnection con = new SqlConnection("Data Source=nehashama;Initial Catalog=rp;Integrated Security=true");  
  4.     con.Open();  
  5.     SqlCommand cmd = new SqlCommand("select * from ddl_image", con);  
  6.     SqlDataAdapter adp = new SqlDataAdapter(cmd);  
  7.     DataSet ds = new DataSet();  
  8.     adp.Fill(ds);  
  9.     ddlprofile.DataTextField = "Name";  
  10.     ddlprofile.DataValueField = "Profile_image";  
  11.     ddlprofile.DataSource = ds;  
  12.     ddlprofile.DataBind();  
  13.     con.Close();  
  14. } 

2. Bind Title

  1. protected void BindTitle()  
  2. {  
  3.     if (ddlprofile != null)  
  4.     {  
  5.         foreach (ListItem li in ddlprofile.Items)  
  6.         {  
  7.             li.Attributes["title"] = "ddl/" + li.Value; // it ll set the value of items in dropdownlist as tooltip  
  8.         }  
  9.     }  
  10. } 

3. Call on Page Load

  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     if (!IsPostBack)  
  4.     {  
  5.         Bindddl();  
  6.         BindTitle();  
  7.     }  
  8. } 

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

DropDownList3.jpg


Similar Articles