Calling ASMX Web Services from Javascript using AJAX November 19, 2008
Posted by koolkatblog in ASP.NET.Tags: AJAX, web service
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:
Comments»
No comments yet — be the first.