How to populate dropdown in Client side using web service and Ajax?

Here I m going to populate country list on page load using web service.
Step1: Create the Location Class like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


/// Summary description for Location

namespace Test
public class Location
public int CountryID
{ get; set; }

public string CountryName
{ get; set; }


Step2: write the webmethod in web service like this.
Note: donot forget to uncomment on this line “[System.Web.Script.Services.ScriptService]” for calling the web service from client side.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Test;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Services;


/// Summary description for WebService

[WebService(Namespace = “”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

public class WebService : System.Web.Services.WebService {

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public List FindAllCountries()
List locations = new List();
string connectionString =
“Data Source=.;Initial Catalog=Test;Integrated Security=True”;
using (SqlConnection connection = new SqlConnection(connectionString))
using (SqlCommand command = new SqlCommand())
command.Connection = connection;
command.CommandText = “SelectAllCountries”;
command.CommandType = CommandType.StoredProcedure;
using (SqlDataReader dataReader = command.ExecuteReader())
Location location;
if (dataReader != null)
while (dataReader.Read())
location = new Location();
location.CountryID = (int)dataReader[“CountryID”];
location.CountryName = Convert.ToString(dataReader[“CountryName”]);
return locations;


Step3: Compile the web service and test it.
Step4: Create a default page and call the web service using script manager like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default_Ajax.aspx.cs" Inherits="WebService_Test_Default_Ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&gt;

<html xmlns=""&gt;
<head runat="server">
<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
<asp:ServiceReference Path="~/WebService.asmx" />

<asp:DropDownList ID="ddl1" runat="server" Height="17px" Width="108px">


<script type="text/javascript">
Sys.Application.add_load(function() {

WebService.FindAllCountries(onSucess, null, null)

function onSucess(result)
var ddl = document.getElementById(‘<%=ddl1.ClientID %>’);
for (var i = 0; i < result.length; i++) {
ddl.options[i] = new Option(result[i].CountryName, result[i].CountryID);





One thought on “How to populate dropdown in Client side using web service and Ajax?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.