Saturday, May 3, 2014

Bind Drop Down List With Countries Flag in ASP.Net

13 comments
In development sometime asp.net developer face the situation in which they have to bind the list of countries in the drop down list along with related flag of that country. In this tutorial I am explaining with example the code of binding country flag along with its name in the asp.net drop down list as shown in the screen shot below:



Step 1: Create table in database containing field CountryName and CountryFlag where CountryName will contain name of the country and CountryFlag column will have the path of countries images as shown in snapshot below:

country name with flag

Step 2: In visual studio create a new web form and add the following HTML Code : 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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 type="text/javascript" >
    $(document).ready(function (e) {
  try {
      $("#ddlcountrylist").msDropDown();
  } catch (e) {
      alert(e.message);
  }
    });
</script>
 <title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" width="40%">
<tr>
<td width="30%"> <asp:DropDownList runat="server" ID="ddlcountrylist"
            onselectedindexchanged="ddlcountrylist_SelectedIndexChanged" AutoPostBack="true" ></asp:DropDownList>
</td><td>Selected Country: <asp:Label ID="lblcountryname" runat="server" ></asp:Label></td>
</tr>
</table>
</div>
</form>
</body>
</html>

Step 3: In code behind add the following code:
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindDropdown();
            BindTitles();
        }
    }

    public void BindDropdown()
    {
SqlConnection con=new SqlConnection(ConfigurationManager.ConnectionStrings["cn"].ToString());   
        string sql = "Select * from CountryFlagList";
      
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }
        DataSet ds = new DataSet();
        SqlDataAdapter adp = new SqlDataAdapter(sql, con);
        adp.Fill(ds);
        ddlcountrylist.DataTextField = "CountryName";
        ddlcountrylist.DataValueField = "CountryFlag";
        ddlcountrylist.DataSource = ds;
        ddlcountrylist.DataBind();     
        con.Close();       
    }

    protected void BindTitles()
    {
        if (ddlcountrylist != null)
        {
            foreach (ListItem li in ddlcountrylist.Items)
            {
                li.Attributes["title"] ="../" +  li.Value;
            }
        }
    }

    protected void ddlcountrylist_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblcountryname.Text = ddlcountrylist.SelectedItem.Text;
        BindTitles();
    }

If you want the whole country Images along with their name stored in database then please send your email id through comments and I will send the script of database and country images. 

13 comments:

  1. jayakumarchandrasekaran@india.com

    ReplyDelete
  2. zaheer_cs10@hotmail.com

    ReplyDelete
  3. Very Nice Work.. Please Share the Code and Images on taqi.official@gmail.com

    ReplyDelete
  4. witth using master page code not working

    ReplyDelete
  5. shital.jadhav@locuscomputers.com

    ReplyDelete
  6. techsupport@esolutionscurry.com

    ReplyDelete
  7. gooood
    bannanirachad@yahoo.fr

    ReplyDelete
  8. Very good. Pls send me the whole script
    ssmersin@hotmail.com.tr

    ReplyDelete
  9. Good post. Please send database script to zaheerbbs74@gmail.com.

    ReplyDelete

  10. its really useful to me
    Please Share the Code and Images on brijesh98277@gmail.com

    ReplyDelete
  11. Good post. Please send database script and country flags to faisalsalehzada@gmail.com.

    ReplyDelete
  12. hi good post. please send huseyinozsuzer@gmail.com

    ReplyDelete