Blue Theme Orange Theme Green Theme Red Theme
 
Home | Forums | Videos | Advertise | Certifications | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Jump to
Skip Navigation Links
Search :       Advanced Search �
Home

Author Rank :
Page Views :
Downloads : 0
Rating :
 Rate it
Level :
Become a Sponsor
Tags


Here, we will learn how to bind images with a DropDownList in ASP.NET. To do that we create an image folder in the application and insert some images in the folder. After that we create a database table in SQL Server and insert an image name in the database with image name.

Creating Table in SQL Server Database

Now create a table named CountryImage with the columns Countryid, CountryName and CountryImage. The table looks as below.

ddl1.gif

Insert an image name in the table which is defined in the application's image folder.

ddl2.gif

Now create a new web application project in Visual Studio 2010. Drag and Drop a DropDownList to the form. For a sample design your aspx page might be like this:

aspx page

<%@ 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="dropdown/dd.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 {

    $("#ddlCountryImage").msDropDown();

} catch (e) {

alert(e.message);

}

});

</script>

</head>

<body>

<form id="form1" runat="server">

<table>

<tr>

<td align="right" class="style1">

<b>Country:</b>

</td>

<td>

<asp:DropDownList ID="ddlCountryImage" runat="server" Width="150px"  AutoPostBack="true"></asp:DropDownList>

</td>

</tr>

</table>

</form>

</body>

</html>

In order to demonstrate the process of executing an application from C#, create a new web application project in Visual Studio 2010. Add using statements above the namespace declaration to enable the use of non-fully qualified references to other namespace types.

Now add the following namespace.

using System.Data.SqlClient;

using System.Data;

 

Now write the connection string to connect to the database.

 

string strConnection = "Data Source=.; uid=sa; pwd=wintellect;database=Rohatash;";

 

In Codebehind write the following code like this. 

Codebehind

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();

        Imagetitlebind();  

    }

}

 

protected void Imagetitlebind()

{

    if (ddlCountryImage != null)

    {

        foreach (ListItem li in ddlCountryImage.Items)

        {

            li.Attributes["title"] = "Images/" + li.Value; // Define the folder of image which is defined in the application.

        }

    }

}

 

protected void BindDropDownList()

{

    SqlConnection con = new SqlConnection("Data Source=.; uid=sa; pwd=wintellect;database=Rohatash;");

    con.Open();

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

    SqlDataAdapter da = new SqlDataAdapter(cmd);

    DataSet ds = new DataSet();

    da.Fill(ds);

    ddlCountryImage.DataTextField = "CountryName";

    ddlCountryImage.DataValueField = "CountryImage";

    ddlCountryImage.DataSource = ds;

    ddlCountryImage.DataBind();

    con.Close();

}

}

 

Now run the application and test how your DropDownList will be:


ddl3.gif

 

Now click on the DropDownList.


ddl4.gif

Some Helpful Resources

How to Bind Country, State, City using Ajax Update Panel

Bind Countries to a DropDownList in ASP.NET

CheckBox, CheckBoxList and DropDownList Controls in Asp.Net

DropDownList with country, state and city in ASP. NET

 [Top] Rate this article
 
 About the author
 
Author
 Post a Feedback, Comment, or Question about this article
Subject:
Comment:
 Comments

 � 2020  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.