Here is our Default.aspx.cs Code (Just in .cs) there is no
coding in .aspx page:
using System;
using
System.Web.UI.WebControls;
using
System.Collections;
using
System.Web.Services;
using
System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
[WebMethod()]
public
static ArrayList
GetNameList()
{
ArrayList arrLstName = new ArrayList();
SqlConnection dbconn;
SqlCommand dbcomm;
SqlDataReader dreader;
string sqlQry;
string name = string.Empty;
dbconn = new SqlConnection("Data Source=localhost;Initial Catalog=myDB;Integrated
Security=True");
dbconn.Open();
sqlQry = "SELECT empName, EmpCode FROM empTable ";
dbcomm = new SqlCommand(sqlQry,
dbconn);
dreader =
dbcomm.ExecuteReader();
while (dreader.Read())
{
arrLstName.Add(new ListItem(dreader["Name"].ToString(), dreader["EmpCode"].ToString()));
}
dreader.Close();
dbconn.Close();
return arrLstName;
}
[WebMethod()]
public
static ArrayList
GetNameListByEmpCode(string empCode)
{
ArrayList arrLstName = new ArrayList();
arrLstName.Add(new ListItem("--Select--", "0"));
if (empCode != null)
{
SqlConnection dbconn;
SqlCommand dbcomm;
SqlDataReader dreader;
string sqlQry;
string
name = string.Empty;
dbconn = new SqlConnection("Data Source=localhost;Initial Catalog=myDB;Integrated
Security=True");
dbconn.Open();
sqlQry = " SELECT EmpCode, empDesignation FROM empTable WHERE EmpCode = '"
+ empCode + "' ";
dbcomm = new SqlCommand(sqlQry,
dbconn);
dreader =
dbcomm.ExecuteReader();
while (dreader.Read())
{
arrLstName.Add(new ListItem(dreader["empDesignation "].ToString(), dreader["EmpCode"].ToString()));
}
dreader.Close();
dbconn.Close();
return arrLstName;
}
else
{
return arrLstName;
}
}
}
2. Here is our .html (abc.html) page:
<!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>
<title>Example
DropDown List using jQuery in HTML Page</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetNameList",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#ddlName").empty().append($("").val("[-]").html("Please
Select"));
$.each(msg.d, function () {
$("#ddlName").append($("").val(this['Value']).html(this['Text']));
});
},
error: function () {
alert("An error has occurred during processing your
request.");
}
});
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function
() {
$("#ddlName").change(function () {
var _empCode = $("#ddlName").val();
$.ajax({
type:
"POST",
url: "Default.aspx/GetNameListByEmpCode",
data:
"{empCode:'" + _empCode + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (msg,data) {
$("#ddlDesignation").empty().append($("").val("[-]").html("Please
Select"));
$.each(msg.d, function () {
$("#ddlDesignation").append($("").val(this['Value']).html(this['Text']));
});
},
error: function () {
alert("An error has occurred during
processing your request.");
}
});
});
});
</script>
</head>
<body>
<div>
Select Name :
<select id="ddlName"></select>
Select Designation :
<select id="ddlDesignation"></select>
</div>
</body>
</html>
Now Deploy the Site and View html file and see the output.
I hope you enjoy it.
Cheers.
Comments