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



Hi
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
{
[Serializable]
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 = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

[WebMethod]
[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;
connection.Open();
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”]);
locations.Add(location);
}
}
}
}
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

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

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

</asp:DropDownList>

</div>
<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);

}
}

});
</script>

</form>
</body>
</html>

Advertisements

One Response to “How to populate dropdown in Client side using web service and Ajax?”

  1. How to populate dropdown on client side using Web service and Jquery ? « Chandradev's Blog Says:

    […] as compare to server side method. This is the few steps to do this task It is very much similar to this post. Here we have to do the few changes in web service 1. Add this namespace in web service using […]


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: