Populate DropDownList by Calling Web Service from JavaScript

 

Now we will see how to call WeBService from your javascript and populate drop down.

Here we will see how to call a web service from your javascript.

Open Visual Studio 2005/2008 and create “New WebApplication”.

Add an aspx page and name it to WebService.aspx. Inside the page declare a static method called PopulateCountries.

This “PopulateCountries” method returns a Countries object which in turn a structure object with “countries”  as a member variable which is an array of countries.

public partial class WebService : System.Web.UI.Page
   {

      [WebMethod]
       public static Countries PopulateCountries()
       {
           Countries countries = new Countries();
           Country[] carray = new Country[5];
           Country c = new Country();
           c.countryName = “USA”;
           c.countryId = 1;
           carray[0] = c;

           c = new Country();

           c.countryName = “UK”;
           c.countryId = 2;
           carray[1] = c;

           c = new Country();

           c.countryName = “India”;
           c.countryId = 3;
           carray[2] = c;

           c = new Country();

           c.countryName = “Argentina”;
           c.countryId = 4;
           carray[3] = c;

           c = new Country();

           c.countryName = “Mexico”;
           c.countryId = 5;
           carray[4] = c;

           countries.countries = carray;

           return countries;
       }

       public struct Countries
       {
           public Country[] countries;
       }

       public struct Country
       {
           public string countryName;
           public int countryId;
       }

}

Now add one more page called Default.aspx.

On the top of this page, add script manager, which allows you to call web service using javascript. You can see that i have added drop down list and html button.

<form id=”form1″ runat=”server”>
    <asp:ScriptManager ID=”s1″ runat=”server”></asp:ScriptManager>
    <div> 
   Countries <asp:DropDownList ID=”ddCountries” runat=”server”/>    <br /> 
    <input type=”button” id=”b1″ onclick=”javascript : PopulateCountries();” value=”Click”/> 
       </div>
  </form>

Now we will write javascript that calls web service, returns a list of countries to populate the drop down list.

As You can see that i have added three javascript methods PopulateCountries, OnCountriesFound and OnFailed.

PopulateCountries has the code that actually makes a call to web service.

if we look deeper into the syntax, Sys.Net.WebServiceProxy.Invoke takes few parameters.

The first parameter is the path of the web service. “/WebService.aspx”

The second parameter is the name of web method to invoke: “Add”

next parameter is useHttpGet (Optional) false if the Web request HTTP verb is POST; otherwise, true. The default is false.

next Parameter is the Javscript dictionary that contains named properties (fields) that correspond to the parameters of the method to call, as in this example we are passing an empty braces:

{ }

note

The field names in the dictionary must match the names of Web service methods.

(Optional)next Parameter is the name of the Javascript  method that would be called back if web service is executed successfully

If no callback function is provided, no action is taken when the Web service method finishes successfully.

(Optional)next Parameter is the name of the Javascript  method that would be called back if web service is executed successfully

If no callback function is provided, no action is taken if an error occurs during the Web service method call. 

(Optional) Any user-specific information. userContext can be any JavaScript primitive type, array, or object.

next parameter is the contents of userContext are passed to the callback functions (if any). If userContext is not provided, null is passed to the callback function.

last parameter is (Optional) the time in milliseconds that the network executor must wait before timing out the Web request. timeout can be an integer or null. By defining a time-out interval, you can control the time that the application must wait for the callback to finish.

<script type=”text/javascript”>

   function PopulateCountries()

   {

       var ddCountries = document.getElementById(‘ddCountries’);

Sys.Net.WebServiceProxy.invoke(“/WebService.aspx”, “PopulateCountries”, false, { },OnCountriesFound, OnFailed,  ddCountries, 5000);

   }
function OnCountriesFound(retVal,ddCountries)

   {

       for(var i=0; i<retVal.countries.length; i++)

       {

           ddCountries.options[i] = new Option(retVal.countries[i].countryName, retVal.countries[i].countryId);

       }

   }

function OnFailed(error)

   {

       alert(“There was an error “+error.toString());

   }

</script>

Happy Coding 😉