Create a New Folder with Name msdropdown , click on Download and Paste the files with jquery files to this folder.
Image Folder Name : Images
Sql Scripts :
create table ActorVotings (ID int identity(1,1) Primary Key,ActorName varchar(50),ActorImage varchar(50))
Webform1.aspx
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="BindDropDownWithImages.WebForm1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Dropdownlist with Images</title>
<link href="msdropdown/dd.css" rel="stylesheet" type="text/css"></link>
<script src="msdropdown/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<!-- Script is used to call the JQuery for dropdown -->
<script language="javascript" type="text/javascript">
$(document).ready(function (e) {
try {
$("#ddlCountry").msDropDown();
} catch (e) {
alert(e.message);
}
});
</script>
<style type="text/css">
.style1
{
height: 26px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:panel id="Panelp" runat="server" style="height: 100%; width: 100%;">
<div id="div1" runat="server" style="height: 870px; width: 100%;">
<table>
<tr>
<td align="right" class="style1" colspan="2">
<b>Select Your Favorite Actor: </b> </td>
<td class="style1" colspan="2">
<asp:dropdownlist autopostback="true" height="189px" id="ddlCountry" onselectedindexchanged="ddlCountry_SelectedIndexChanged" runat="server" width="147px"></asp:dropdownlist>
</td>
</tr>
<tr>
<td colspan="2">
<strong>You have Selected</strong></td>
<td colspan="2">
<asp:label id="lbltext" runat="server"></asp:label>
</td>
</tr>
<tr>
<td colspan="2">
<strong>Your IP Address is </strong>
</td>
<td colspan="2">
<asp:label id="Label1" runat="server"></asp:label>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<asp:button height="26px" id="Button1" onclick="Button1_Click" runat="server" style="font-weight: 700;" text="Vote" width="97px">
</asp:button></td>
</tr>
</table>
<asp:panel height="112px" id="Panel1" runat="server">
<asp:label font-bold="True" font-italic="True" font-size="XX-Large" forecolor="#993300" id="Label2" runat="server" text="Thanks For Casting Your Vote...."></asp:label>
</asp:panel>
<br />
</div>
</asp:panel>
</form>
</body>
</html>--%>
Webform1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace BindDropDownWithImages
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel1.Visible = false;
BindDropDownList();
BindTitles();
lbltext.Text = ddlCountry.Items[0].Text;
}
}
private void BindTitles()
{
if (ddlCountry != null)
{
foreach (ListItem li in ddlCountry.Items)
{
li.Attributes["title"] = "Images/" + li.Value; // setting text value of item as tooltip
}
}
}
private void BindDropDownList()
{
//DataTable objdt = new DataTable();
//objdt = GetDataForChart();
//ddlCountry.DataSource = objdt;
//ddlCountry.DataTextField = "Actor";
//ddlCountry.DataValueField = "Id";
//ddlCountry.DataBind();
SqlConnection con = new SqlConnection("Data Source=GOKUL-PC\\GOKUL;Initial Catalog=Test;Integrated Security=true");
con.Open();
SqlCommand cmd = new SqlCommand("select * from ActorVotings", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
ddlCountry.DataTextField = "ActorName";
ddlCountry.DataValueField = "ActorImage";
ddlCountry.DataSource = ds;
ddlCountry.DataBind();
con.Close();
}
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
lbltext.Text = ddlCountry.SelectedItem.Text;
BindTitles();
if (lbltext.Text.Contains("rajini"))
{
Panelp.BackImageUrl = "~/Images/rajinifull.jpg";
}
else if(lbltext.Text.Contains("vijay"))
{
Panelp.BackImageUrl = "~/Images/vijayfull.jpg";
}
else if(lbltext.Text.Contains("kamal"))
{
Panelp.BackImageUrl = "~/Images/kamlfull.jpg";
}
else if(lbltext.Text.Contains("ajith"))
{
Panelp.BackImageUrl = "~/Images/ajithfull.png";
}
else if (lbltext.Text.Contains("vikram"))
{
Panelp.BackImageUrl = "~/Images/vikramfull.jpg";
}
}
public DataTable GetDataForChart()
{
DataTable dt = new DataTable();
dt.Columns.Add("Actor", typeof(string));
dt.Columns.Add("Id", typeof(string));
dt.Columns.Add("LabelValue");
var _objrow = dt.NewRow();
_objrow["Actor"] = "rajini";
_objrow["Id"] = "rajini.jpg";
dt.Rows.Add(_objrow);
_objrow = dt.NewRow();
_objrow["Actor"] = "kamal";
_objrow["Id"] = "kamal.jpg";
dt.Rows.Add(_objrow);
_objrow = dt.NewRow();
_objrow["Actor"] = "vijay";
_objrow["Id"] = "vijay.jpg";
dt.Rows.Add(_objrow);
_objrow = dt.NewRow();
_objrow["Actor"] = "ajith";
_objrow["Id"] = "ajith.jpg";
dt.Rows.Add(_objrow);
_objrow = dt.NewRow();
_objrow["Actor"] = "vikram";
_objrow["Id"] = "vikram.jpg";
dt.Rows.Add(_objrow);
return dt;
}
protected void Button1_Click(object sender, EventArgs e)
{
Panel1.Visible = true;
}
}
}
No comments:
Post a Comment