Consuming web service (WebMethod) from jQuery in ASP.NET

Introduction

jQuery has become an integral part of web application development now because of its ability to provide flexibility, extensibility, robustness and fast application development. In this article I have describe the way of calling a web service from jQuery. To do this I have designed a web page having a textbox and a button. I have a web service that returns the data entered into the textbox, its preety simple however you can use this to consume your own complicated web services using jQuery as well.

Note: If you are a web developer, you may find my 101+ jQuery How to's ebook useful.

My sample web page looks like below image. Lets proceed with consuming web service in jQuery in 3 simple steps.

Step 1 - Design a web page

Copy-paste below code in the .aspx page. The code between jQuery reference checks for the CDN version of jQuery file and if somehow it has not loaded then write code to load the local jQuery file. After that remaining html codes are to render a textbox, a button.

<!-- START - jQuery Reference -->
<script type="text/javascript" language="Javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<script type='text/javascript'>//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]>
</script>
<!-- END - jQuery Reference -->
 
 
<p style="color:Blue;">Go to ItFunda.Com for jQuery training.</p>
 
Website name: <asp:TextBox ID="txtBoxName" runat="server" ClientIDMode="Static" />
 
<button id="btnAjax">Call web service using $.Ajax</button>
<h3>Result from web service</h3>
<div id="divResult"></div>
 
<script language="javascript" type="text/javascript">
var webServiceUrl = "../MathService.asmx/GetFullName";
$("#btnAjax").click(function () {
var webServiceUrl = "../MathService.asmx/GetFullName";
var name = $("#txtBoxName").val();
$.ajax({
type: "POST",
url: webServiceUrl,
data: "{'name':'"+ name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: SuccessCallBack,
error: FailureCallBack
});
});
 
function SuccessCallBack(data) {
alert(data.d);
}
 
function FailureCallBack(data) {
alert(data.staus + " : " + data.statusText);
}
</script>

The code in the Script block first saves the web method url in the variable (The webmethod name is suffixed with the url of the web service). In my case I have a MathService.asmx webservice that has a web method named GetFullName (We shall see the web service code later in this article).

On click of the button, I have called the jQuery ajax method and passed the type, url, data, contentType, and  dataType parameters. The remaining parameters are callback methods that fires on success and if any error occurs in the web service request. On success of the web service request, SuccessCallBack function fires and on error FailureCallBack function fires. Both accepts an argument that is used to retrive the response from the server.

Notice the code inside the SuccessCallBack function, I have used data.d that is very important (.d gives you the actual data returned as response from the server).

Step 2 - Designing web service to be consumed by jQuery

Below is the code snippet of my web service used in this example, notice the bold line as attribute of the MathService class. System.Web.Script.Services.ScriptService attribute is mandatory for your web service to be consumed via client side script. This is applicable either you consume your web service using jQuery or ASP.NET AJAX.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Collections;
/// <summary>
/// Summary description for MathService
/// </summary>
[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 MathService : System.Web.Services.WebService {
public MathService () {
//Uncomment the following line if using designed components 
//InitializeComponent(); 
}
 
[WebMethod]
public string GetFullName(string name)
{
return "[Webservice response]\n\nYou have entered : " + name ;
} 
}

My WebMethod is preety simple, just receiving the name as parameter and concatenating some text and returning the string.

I have written hundreds of .NET How to's solution (ebook + source code + video) series based on real time project problems, click here to get it.

Step 3 - Run you .aspx page

If you have followed above two steps, you should be ready to run the .aspx page. After running, enter any name of the website and you will see the alert as shown in the picture below.

Conclusion

Hope this simple article on consuming web services using jQuery will be useful. Thanks for reading and keep reading and sharing your knowledge!

This solution is the part of my 101+ How to's jQuery e-book.