Geeks With Blogs

@RiaGuru
  • RiaGuru Attending windows azure spring camp @Chennai and its cool about 863 days ago
  • RiaGuru I hosted my blog http://t.co/G1ZHfZB Its related to asp.net mvc,nhibernate. The blog is build on top of funnelweblog.com framework. about 1203 days ago
  • RiaGuru I recently experienced the power of NHIbernate. A very powerful ORM ! about 1320 days ago

Thanigainathan Siranjeevi Sharing my learning

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 invokation.

<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.

 

 

Posted on Friday, October 30, 2009 8:37 AM | Back to top


Comments on this post: Calling asp.net webservice from JQuery

# re: Calling asp.net webservice from JQuery
Requesting Gravatar...
Thanks for the enlightening piece about how to call asp.net web service using client-side jquery!
Left by WebDesignExpert.Me on Nov 03, 2009 7:03 AM

# re: Calling asp.net webservice from JQuery
Requesting Gravatar...
You should rather use the js proxy for the webservice. I blogged about it at http://thorsteinsson.is/projects/jquery-webservices/
Left by Thorsteinsson on Nov 10, 2009 1:02 PM

# re: Calling asp.net webservice from JQuery
Requesting Gravatar...
Nice tutorial, thanks for saring. I have also written one, but covered only jquery client part, in details..
Left by ranacseruet on Jan 04, 2010 12:16 AM

# re: Calling asp.net webservice from JQuery
Requesting Gravatar...
please attach the js file also
Left by Archana on Jan 08, 2011 1:00 AM

# re: Calling asp.net webservice from JQuery
Requesting Gravatar...
Hi ,

Javascript is given in the tutorial itself.

Do you mean jquery.js files ?
That can be donwloaded from jquery.com website or microsoft cdn.

Thanks,
Thanigainathan.S
Left by Thanigainathan on Jan 08, 2011 7:32 AM

Your comment:
 (will show your gravatar)
 


Copyright © thanigai | Powered by: GeeksWithBlogs.net | Join free