This example shows how to populate the IPL teams into a Dropdownlist via Jquery Ajax.
Sample Code
1. Server Side Code
[WebMethod]
public static string GetIPLTeams(string dataTableName)
{
DataTable dtIPLTeams = new DataTable(dataTableName);
dtIPLTeams.Columns.Add("IPLID");
dtIPLTeams.Columns.Add("IPLTeam");
dtIPLTeams.Rows.Add("0", "---Select your Team---");
dtIPLTeams.Rows.Add("1", "Chennai Super Kings");
dtIPLTeams.Rows.Add("2", "Mumbai Indians");
dtIPLTeams.Rows.Add("3","Kolkata Knight Riders");
dtIPLTeams.Rows.Add("4","Delhi Dare Devils");
dtIPLTeams.Rows.Add("5","Kings XI Punjab");
dtIPLTeams.Rows.Add("6", "SunRisers Hydrebad");
dtIPLTeams.Rows.Add("7", "Royal Challengers Bangalore");
dtIPLTeams.Rows.Add("8", "Rajasthan Royals");
string result;
using (StringWriter sw = new StringWriter())
{
dtIPLTeams.WriteXml(sw);
result = sw.ToString();
}
return result;
}
2. Client Side Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Dropdown Populate</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnTeam').click(function () {
var ddlIPLtXML = $('#ddlIPLTeams');
var tableName = "IPL7";
$.ajax({
type: "POST",
url: "AjaxDropDown.aspx/GetIPLTeams",
data: JSON.stringify({ dataTableName: tableName }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
// Now find the Table from response and loop through each item (row).
$(response.d.toString()).find(tableName).each(function () {
debugger;
alert('hi');
// Get the OptionValue and OptionText Column values.
var OptionValue = $(this).find('IPLID').text();
var OptionText = $(this).find('IPLTeam').text();
alert('hi');
alert(OptionValue);
alert(OptionText);
// Create an Option for DropDownList.
var option = $("<option>" + OptionText + "</option>");
option.attr("value", OptionValue);
ddlIPLtXML.append(option);
});
},
failure: function (response) {
alert(response.d);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divDropDown">
<table>
<tr>
<td><asp:button id="btnTeam" runat="server" text="Get IPL Teams" /></td>
</tr>
<tr>
<td><asp:label runat="server" id="lblIPLTeam" text="Team :" /></td>
<td><asp:dropdownlist id="ddlIPLTeams" runat="server" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
The dropdownlist gets loaded with all the 8 IPL Teams via Jquery Ajax.