In this article I’ll explain how to populate ASP.Net DropDownList using JavaScript and AJAX. To achieve my goal I’ll make use of ASP.Net AJAX ScriptManager and PageMethods
HTML Markup
To start with I have placed a simple DropDownList in the ASP.Net Web Page
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
</asp:ScriptManager>
<asp:DropDownList ID="ddlCountries" runat="server">
</asp:DropDownList>
</form>
Server Side Logic
Next you will need to create a WebMethod on the page that will handle the PageMethod calls server side.
C#
[System.Web.Services.WebMethod]
public static List<Country> GetCountries()
{
List<Country> countries = new List<Country>();
Country country = new Country();
country.Name = "India";
country.Id = "1";
countries.Add(country);
country = new Country();
country.Name = "USA";
country.Id = "2";
countries.Add(country);
country = new Country();
country.Name = "Canada";
country.Id = "3";
countries.Add(country);
return countries;
}
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCountries() As List(Of Country)
Dim countries As List(Of Country) = New List(Of Country)
Dim country As New Country
country.Name = "India"
country.Id = "1"
countries.Add(country)
country = New Country
country.Name = "USA"
country.Id = "2"
countries.Add(country)
country = New Country
country.Name = "Canada"
country.Id = "3"
countries.Add(country)
Return countries
End Function
End Class
The above PageMethod simply creates a list of Country object and returns the populated List back. The country business class is shown below
C#
public class Country
{
private string _name;
public string Name
{
get { return _name; }
set { _name = value; }
}
private string _id;
public string Id
{
get { return _id; }
set { _id = value; }
}
}
VB.Net
Public Class Country
Private _name As String
Public Property Name As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property
Private _id As String
Public Property Id As String
Get
Return _id
End Get
Set(ByVal value As String)
_id = value
End Set
End Property
End Class
That’s all you need to do server side. Now let’s move to the client side part
Client Side Logic
Below is the client side. I’ll explain each JavaScript method one by one
<script type = "text/javascript">
var ddlCountries;
function GetCountries() {
ddlCountries = document.getElementById("<%=ddlCountries.ClientID %>");
ddlCountries.options.length == 0;
AddOption("Loading", "0");
PageMethods.GetCountries(OnSuccess);
}
window.onload = GetCountries;
function OnSuccess(response) {
ddlCountries.options.length = 0;
AddOption("Please select", "0");
for (var i in response) {
AddOption(response[i].Name, response[i].value);
}
}
function AddOption(text, value) {
var option = document.createElement('<option value="' + value + '">');
ddlCountries.options.add(option);
option.innerText = text;
}
</script>
Method GetCountries()
This method is called as soon as the page is loaded in client’s browser. It clears the DropDownList and adds a Loading option to it to notify the users that the data is being loaded. Then it makes an AJAX call to the GetCountries WebMethod server side using ASP.Net AJAX PageMethods.
Method OnSuccess()
This method handles the response of the ASP.Net AJAX PageMethod after the server side WebMethod returns the data. It simply clears the ASP.Net DropDownList and then adds a “Please Select” option to it and then loops through the Countries List and adds the options to the DropDownList.
Method AddOption()
Finally this method as the name suggests adds options to the ASP.Net DropDownList.
Downloads
With this we come to the end of this article. You can download the complete source code in C# and VB.Net using the download link below.
PopulateDropDownListJavaScript.zip