Search

Saturday, June 20, 2015
0 comments

Dropdownlist with image in asp.net c#

9:58 PMSaturday, June 20, 2015
If you want to make beautiful and attractive web application in asp.net then you think ahead. You can make each control attractive using some other technologies like JQuery, JavaScript etc. Today i am discussing with you on topic Dropdownlist. If you bind the list with simple text then your Dropdownlist not look beautiful but if you add some images with each item then your list becomes beautiful. Lets take a simple example of Dropdownlist with image.

So first of all design database table and imsert some data in it , I have a table , which is mentioned below.

Dropdownlist with image in asp.net c#



Source page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dropdownlistwithimage.aspx.cs" Inherits="Dropdownlistwithimage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bind DropDownlist With Image</title>
<link href="style/dd.css" rel="stylesheet" />
<script src="Scripts/jquery-1.6.1.min.js"></script>
<script src="Scripts/jquery.dd.js"></script>
<script>
$(document).ready(function(){

try {
$("#DropDownList1").msDropDown();

} catch (e) {
alert(e.message);

}
})
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Height="26px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="149px">

</asp:DropDownList>
    <br />
    </div>
    <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>
</body>
</html>
In the above mentioned code we have two ".js" file and one css file, both are used to make the dropdownlist beautiful also insert the image with text.

Code Behind file
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Dropdownlistwithimage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack)
        {
            Binddropdown();
            BindTitle();

        }

    }

    private void BindTitle()
    {
     
        if(DropDownList1!=null)
        {
            foreach (ListItem li in DropDownList1.Items)
            {
                li.Attributes["title"] = li.Value;
            }
        }
    }

    private void Binddropdown()
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
        con.Open();
        SqlCommand cmd = new SqlCommand();
        cmd.CommandText = "select * from [country]";
        cmd.Connection = con;
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        DropDownList1.DataTextField = "CountryName";
        DropDownList1.DataValueField = "Countryimage";
        DropDownList1.DataSource = ds;
        DropDownList1.DataBind();


    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        Label1.Text = DropDownList1.SelectedValue;
        BindTitle();
    }
}
After bind the Dropdownlist you have to access each item from the list by using DataBound event. Use foreach loop to access all item one by one from the list also apply tooltip on each item by the help of Attribute property. When you apply attribute in BindTitle( ) method on that time JQuery will apply on it so you see the image with text in Dropdownlist.

Download the code
Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top