Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Calling ASP.NET WebService from jQuery

, 18 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

  1. Visual Studio 2008
  2. Jquery 1.3.2
  3. 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Thanigainathan.S
Software Developer (Senior) Cognizant technology Solutions
India India
I love open source development. I used to go through technical updates from dotnet, try new softwares from community and evaluate them. I like to develop new programs that helps in my daily routine works and would blog them for my future reference. I used to reply fro questions in forums like codeprject,satckoverflow and asp.net.
 
I have my personal blog at http://www.codetherasa.in/

Comments and Discussions

 
Question[My vote of 2] My vote is 2 PinmemberVMAtm25-Jan-13 8:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 18 Jan 2013
Article Copyright 2013 by Thanigainathan.S
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid