Calling ASP.NET WebService from jQuery

Thanigainathan.S

4.25/5 (5 votes)

Jan 18, 2013

CPOL

2 min read

42625

Calling ASP.NET WebService from jQuery

Today I was trying to call ASP.Net web service from JQuery. I thought it was easy first. But when tried implementing them I felt the difficulty. I don't had this problem while calling Ajax enabled WCF service from JQuery. Hence I did a small Bing and found out some useful tips to share. I referred links below.

The above links are very helpful. In addition to that you may need the following prerequisites.

Visual Studio 2008
Jquery 1.3.2
Jquery-1.3.2-vsdoc.js

I will list the steps I have followed. Create a New ASP.NET application and name as you want. In my case I named it AjaxDemo.

Once the project is created you can copy the Jquery 1.3.2 and Jquery-1.3.2-vsdoc file into the project folder. Add a new WebService named WebService1.asmx.

Now import two namespaces for enabling the WebService to be accessed from JavaScript.

using System.Web.Script.Serialization;
using System.Web.Script.Services;

The class Webservice1 has to be marked as ScriptService. This is very important.

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

Next the method needs to be marked as WebMethod as usual and ScriptMethod for enabling client access.

[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string HelloWorld()
{

Since I am using the JSON as the data type I am marking the Response format as JSON. The data that has to be sent from server has to be serialized as JSON. I have give a sample below.

JavaScriptSerializer js = new JavaScriptSerializer();// Use this when formatting the data as JSON
return js.Serialize("Hello World");

That's all needed on server side. Next we will look at JQUERY client invocation.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$.ajax({ type: "GET",
contenttype: "application/json; charset=utf-8",
data: "{null}",
url: "WebService1.asmx/HelloWorld",
dataTyp:"json",
success: function(res) {
$("#Text1").val(res.text); 
},
error: function(err) {
alert(err);
}
});                    
</script>
</head>
<body>
<form id="myForm"> 
<input id="Text1" type="text" />
</form>
</body>
</html>

As you can see from above $.ajax is used to call the WebService. The data send should be as "{null}". This is very important otherwise it wont work.

Here I have assigned the result to only a text box. The same scenario can be applied for complex situations. I will discuss about the complex things later.

Thanks.