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.