In this article i will show you how to bind a DropDownList using JSON, JQuery to avoid page refresh via a Web Method .It is very useful and many time we require to use Jquery Ajax.
Code to Bind dropdownlist in asp.net
Add code in "Default.aspx" page
download jquery.js
and in "Default.aspx.cs"
Code to Bind dropdownlist in asp.net
Add code in "Default.aspx" page
download jquery.js
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$().ready(function () {
$.ajax({
type: "POST",
url: "Default2.aspx/GetGenders",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#ddlGender").get(0).options.length = 0;
$("#ddlGender").get(0).options[0] = new Option
("Select Gender", "-1");
$.each(msg.d, function (index, item) {
$("#ddlGender")
.get(0).options[$("#ddlGender").get(0).options.length] =
new Option(item.Display, item.Value);
});
$("#ddlGender").bind("change", function () {
GetNames($(this).val());
});
},
error: function () {
alert("Failed to load Genders");
}
});
});
function GetNames(genderID) {
if (genderID > 0) {
$("#ddlName").get(0).options.length = 0;
$("#ddlName").get(0).options[0] =
new Option("Loading names", "-1");
$.ajax({
type: "POST",
url: "Default2.aspx/GetNames",
data: "{genderID:" + genderID + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#ddlName").get(0).options.length = 0;
$("#ddlName").get(0).options[0] =
new Option("Select name", "-1");
$.each(msg.d, function (index, item) {
$("#ddlName")
.get(0).options[$("#ddlName").get(0).options.length] =
new Option(item.Display, item.Value);
});
},
error: function () {
$("#ddlName").get(0).options.length = 0;
alert("Failed to load names");
}
});
}
else {
$("#ddlName").get(0).options.length = 0;
}
}
</script>
<style type="text/css">
#ddlGender
{
width: 149px;
}
#ddlName
{
width: 146px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="border:1px solid gray; width:400px;">
<table border="0" cellpadding="0" cellspacing="0"
style="width: 353px; height: 149px">
<tr align="center">
<th>
Gender
</th>
<td>
<select id="ddlGender">
</select>
</td>
</tr>
<tr align="center">
<th>
Name
</th>
<td>
<select id="ddlName">
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
and in "Default.aspx.cs"
[WebMethod]
public static ArrayList GetGenders()
{
return new ArrayList()
{
new { Value = 1, Display = "Male" },
new { Value = 2, Display = "Female" }
};
}
[WebMethod]
public static ArrayList GetNames(int genderID)
{
if (genderID.Equals(1))
{
return new ArrayList()
{
new { Value = 1, Display = "John" },
new { Value = 1, Display = "Tom" },
new { Value = 1, Display = "Harry" },
new { Value = 1, Display = "Bob" }
};
}
else if (genderID.Equals(2))
{
return new ArrayList()
{
new { Value = 1, Display = "Gauri" },
new { Value = 1, Display = "Rihana" },
new { Value = 1, Display = "Kate" },
};
}
else
{
throw new ApplicationException("Invalid Gender ID");
}
}
The result is shown as










