jump to navigation

Calling ASMX Web Services from Javascript using AJAX November 19, 2008

Posted by koolkatblog in ASP.NET.
Tags: ,
trackback

This is an example of how you can call a web service from your javascript using AJAX.

1. To begin, create a new AJAX enabled website.

2. Add a class to your project. Call it Pizza.cs and add the following code:

public Pizza(string name, string desc, double cost)
{
     this.m_name = name;
     this.m_desc = desc;
     this.m_cost = cost;
}

private string m_name;
private string m_desc;

private double m_cost; public string name { get { return this.m_name; }set { this.m_name = value; } }
public string desc { get { return this.m_desc; } set { this.m_desc = value; } }
public double cost { get { return this.m_cost; } set { this.m_cost = value; }

2. Add a web service to your project. Call it PizzaPlace.asmx and add the following 2 methods:

[WebMethod]
public int GetLocationCount(int zipCode)
{
     int locations = 0;

     switch (zipCode)
     {
     case 89128:
          locations = 5;
          break;
     case 89118:
          locations = 7;
          break;
     default:
          break;
     }

     return locations;
}

[WebMethod]
public List<Pizza> GetDeals()
{
     List<Pizza> pz = new List<Pizza>();
     Pizza p1 = new Pizza(“Pepperoni Special”, “Large Pepperoni”, 9.99);
     Pizza p2 = new Pizza(“Vegetarian”, “Large Mushroom, Onions, Peppers, Olives”, 10.99);
     pz.Add(p1);
     pz.Add(p2);

     return pz;
}

4. Add the following line to your web service so that it is callable from script:

[System.Web.Script.Services.ScriptService]

Your web service code should look like this:

[WebService(Namespace = “http://tempuri.org/“)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// add this line to enable web service to be called from javascript using AJAX //

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

5. Add the following code to your Default.aspx page.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head runat=”server”>
<title>Pizza</title>
</head>
<body>
     <form id=”form1″ runat=”server”>
          <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

          <Services >
             <asp:ServiceReference InlineScript=”true” Path=”~/PizzaPlace.asmx” />
          </Services>

          </asp:ScriptManager>

          <div style=”background-color:#CCCCCC “>

             test

          </div>

          <div>
             <span id=”lbl” >Enter Zipcode:</span><input id=”location” type=”text” />
             <input id=”getLocations” type=”button” value=”GO” onclick=”GetPizzaLocations();” />
          </div>

          <div>
             <span id=”rslt” ></span>
          </div>

          <div>
             <input id=”btnDeals” type=”button” value=”Get Deals” onclick=”GetPizzaDeals();” />
          </div>

          <div>
            <span id=”deals” ></span>
          </div>

      </form>
</body>
<script type=”text/javascript” >
<!–
function GetPizzaLocations() {
     var zip = $get(‘location’).value;PizzaPlace.GetLocationCount(zip,onSuccess,onFailed,”<%= DateTime.Now %>” );
}
function onSuccess(result,context,methodName) {
   $get(‘rslt’).innerHTML = result + ” locations found”;
}
function onFailed(error,context,methodName) {
   $get(‘rslt’).innerHTML = error.get_message() + ” locations found”;
}  
function GetPizzaDeals() {
   PizzaPlace.GetDeals(onDealsSuccess,onDealsFailed);
}
function onDealsSuccess(mydeals,context,methodName){
   var sb = new Sys.StringBuilder ;
   for (var i=0; i < mydeals.length;i++)
   {
   var bev = mydeals[i];
   sb.append(bev.name + ” – ” + bev.desc + ” – ” + bev.cost);
   sb.append(“<br />”);
   }
   $get(‘deals’).innerHTML = sb.toString() ;
}
function onDealsFailed(error,context,methodName) {
   $get(‘deals’).innerHTML = “Error getting Deals: ” + error.get_message() ;
}
//–>
</script>
</html>

 6. Run It!  Enter 89128 in the zipcode field. This is what you should see:

AJAX Example

Advertisements

Comments»

No comments yet — be the first.

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: