Click here to Skip to main content
14,429,010 members

Calling ASP.NET WebService from jQuery

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

Image 1

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.

Image 2

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.

public class WebService1 : System.Web.Services.WebService

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

[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="" >
<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",
success: function(res) {
error: function(err) {
<form id="myForm"> 
<input id="Text1" type="text" />

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.



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


About the Author

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

I have my personal blog at

Comments and Discussions

QuestionHow to handle the returned data Pin
Rockstar_30-Jul-13 1:50
professionalRockstar_30-Jul-13 1:50 
GeneralMy vote of 5 Pin
Rockstar_30-Jul-13 1:47
professionalRockstar_30-Jul-13 1:47 
Generalthank Pin
Latung30-Jun-13 23:13
MemberLatung30-Jun-13 23:13 
SuggestionIt's seems very simple however that too need few corrections Pin
n.jegan1824-Mar-13 21:33
Membern.jegan1824-Mar-13 21:33 
Question[My vote of 2] My vote is 2 Pin
VMAtm25-Jan-13 9:58
MemberVMAtm25-Jan-13 9:58 

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

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

Technical Blog
Posted 18 Jan 2013

Tagged as


14 bookmarked