In this article I will explain with an example, how to populate DropDownList using
JavaScript and
AJAX using ASP.Net in C# and VB.Net.
HTML Markup
The following HTML Markup consists of:
ScriptManager – For enabling
AJAX functions.
DropDownList – For displaying data.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:DropDownList ID="ddlCountries" runat="server"></asp:DropDownList>
Populating (Bind) DropDownList using JavaScript
First the global variable is created which will use throughout the functions.
Inside the window.onload event, the GetCountries function is called.
GetCountries
Inside the
GetCountries JavaScript function, the ID of the DropDownList is referenced and the length of the DropDownList options is set to 0.
Then, AddOption function is called to add options to the DropDownList.
Finally, the
Getcountries Webmethod is called from which the Country details are returned and passed as parameter to the
OnSuccess function.
AddOption
Inside the
AddOption JavaScript function, an element is created as option using which the Text and Value of DropDownList option is set.
Finally, the option is added to the DropDownList.
OnSuccess
Inside the
OnSuccess function, a FOR loop is executed over the details fetched from the
GetCountries Webmethod and
AddOption method is called for each details i.e. Name and Id.
<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].Id);
}
}
function AddOption(text, value) {
var option = document.createElement('option');
option.value = value;
option.innerHTML = text;
ddlCountries.options.add(option);
}
</script>
Property Class
The Class consists of following properties.
C#
public class Country
{
public string Name { get; set; }
public string Id { get; set; }
}
VB.Net
Public Class Country
Public Property Name As String
Public Property Id As String
End Class
Namespaces
You will need to import the following namespaces.
C#
using System.Web.Services;
using System.Collections.Generic;
VB.Net
Imports System.Web.Services
Imports System.Collections.Generic
PageMethod (WebMethod)
Inside the WebMethod, a generic List collection and an object of Country class is created.
Then, Country details are set to the respective properties and added to generic List collection.
Finally, the generic List collection of Country class is returned.
C#
[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
<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
Screenshot
![Populate (Bind) DropDownList using JavaScript and ASP.Net AJAX]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
