Consuming an ASP.NET web service or page method using jQuery

The following is a dummy ASP .NET web service. Please note that this service is adorned with the `ScriptService` attribute that makes it available to JavaScript clients.

Listing 2: A Dummy web service

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class dummyWebservice : System.Web.Services.WebService
{
[WebMethod()]
public string HelloToYou(string name)
{
return "Hello " + name;
}
[WebMethod()]
public string sayHello()
{
return "hello ";
}
}

For example, we can call a specific web method in a web service as such.

Listing 4: JQuery .ajax command

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/WebMethodName",
data: "{}",
dataType: "json"
});

Two things are worth noting in the above JQuery AJAX call. First, we must specify the contentType’s value as application/json; charset=utf-8, and the dataType as json; second, to make a GET request, we leave the data value as empty.

So put it together, the following code demonstrates how we would use JQuery to call the web service we created above.

Listing 5: Calling a web service using jQuery

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET AJAX Web Services: Web Service Sample Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jQuery/1.2.6/jQuery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#sayHelloButton").click(function(event){
$.ajax({
type: "POST",
url: "dummyWebsevice.asmx/HelloToYou",
data: "{‘name’: ‘" + $(‘#name’).val() + "’}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
AjaxSucceeded(msg);
},
error: AjaxFailed
});
});
});
function AjaxSucceeded(result) {
alert(result.d);
}
function AjaxFailed(result) {
alert(result.status + ‘ ‘ + result.statusText);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1> Calling ASP.NET AJAX Web Services with jQuery </h1>
Enter your name:
<input id="name" />
<br />
<input id="sayHelloButton" value="Say Hello"
type="button" />
</form>
</body>
</html>

Calling an ASP .NET page method

Listing 6: A dummy hello world page method

[WebMethod()]
public static string sayHello()
{
return "hello ";
}

Please note that page methods must be declared as static, meaning a page method is completely self-contained, and no page controls are accessible through the page method. For example, if you have a textbox on the web form, there is no way the page method can get or set its value. Consequently any changes with regards to the controls have no affect on the page method. It is stateless and it does not carry any of the view-state data typically carries around by an asp .NET page.

We use the same jQuery command $.ajax to call a page method, as shown in the following example.

<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
url: "pagemethod.aspx/sayHello",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
});
function AjaxSucceeded(result) {
alert(result.d);
}
function AjaxFailed(result) {
alert(result.status + ‘ ‘ + result.statusText);
}
</script>

For more info please visit Xun Ding’s excellent article Using jQuery with ASP .NET

About these ads

February 10, 2009 - Posted by Vincent Leung | jQuery

13 Comments »

How does the JQuery.Ajax data option change when the web service requires more than one parameter?

Comment by Joel | July 22, 2009 | Reply
- Just change it to this {‘param’:'value’,'param1′:’value1′}
  
  Comment by Sifiso Shezi | April 7, 2011 | Reply
Thanks for this tutorial. I liked it very much.

Comment by rana | December 24, 2009 | Reply
Hi,Great to see such snippets.
Can you please forward any sample site for this.

Have you added refference of web service in existing site. how to specify url (can i specify full url) and how to pass more than one parameter for data{}.

my sample code
var passingArguments = {
Username:$(‘#name’).val(),
Password:$(‘#txtPassword’).val(),
LoginUserID:$(‘#txtLoginId’).val()
}
$.ajax({
type: “POST”,
url: “http://localhost/JQ/Service.asmx/GetValidate”,
data:JSON.stringify(passingArguments),
contentType: “application/json; charset=utf-8″,
dataType: “json”,

Now how i can get returned values. bcoz on returned values i have to made some navigation and error handling.

Please reply.

Comment by Kapil | January 15, 2010 | Reply
Hai Your code was very useful…………….

Comment by Pratap | February 26, 2010 | Reply
what if webservice is located on another subdomain? tried it and didn’t work

Comment by Alex | May 12, 2010 | Reply
I found that it works even if you don’t specific the json datatype, as long as the contentType attribute is set.

Comment by Jason | July 27, 2010 | Reply
For Some reason using your code this appears to always be going to ajax failed with status 200 and statustext ok confused :S

Comment by Craig | August 9, 2011 | Reply
how to call the static method in webservice.is this possible?

Comment by karthick | September 29, 2011 | Reply
i am not getting any result?

Comment by karthick | September 29, 2011 | Reply
This doesn’t work for me. Same issue as @Craig above. The web service is called successfully, but nothing is returned.

Comment by Ross | October 19, 2011 | Reply
it is not working it gives only error msg

Comment by sweetymathur | April 6, 2013 | Reply
Hmm is anyone else experiencing problems with the pictures on this blog loading?

I’m trying to determine if its a problem on my end or if it’s
the blog. Any suggestions would be greatly appreciated.

Comment by Phen375 Reality | May 10, 2013 | Reply

Vincent Leung .NET Tech Clips

The latest tech clips from the .NET community