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();
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.
