CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Skip Navigation LinksHome » Article » jQuery Article » Calling a WebService using jQuery in ASP.Net   You are not logged in.
Search
 

Technologies
 

Sponsors
 

CodeDigest Navigation
 

Technology News
 

Community News
No News Feeds available at this time.
 
Calling a WebService using jQuery in ASP.Net

By Bala Murugan
Posted On Jan 13,2010
Article Rating: (Login)
Be first to rate
this article.
No of Comments: 3
Print this article.
Category: jQuery

Subscribe to our feed!

Calling a WebService using jQuery in ASP.Net

 

jQuery library has become one of the most widely used javascript library that heavily simplified the client side scripting. Apart from DOM parsing and other advantages, jQuery library excelled so much in AJAX communications. jQuery offers lots of advantages over the ASP.Net Ajax framework by making communication very lighter and simpler. To do this, jQuery library is packed with some handful of useful Ajax methods. Refer here[http://docs.jquery.com/Ajax] to know more.

Moving forward, we will see how to use jQuery Ajax methods to call a WebService method in ASP.Net.

 

Integrating jQuery in ASP.Net

CodeDigest.Com has some useful FAQ’s to integrate jQuery in asp.net projects.

Download the latest jQuery library from jQuery.com and integrate into your project. Read the following FAQ's to integrate jQuery library to your project.

What is jQuery? How to use it in ASP.Net Pages?

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?

 

Creating Webservice

Now, to make our understanding simple we will include a simple webservice method that returns date and time of the server. We will then try consuming this webservice method using jQuery library. Include a webservice in your project by right clicking the project in Solution Explorer and click “Add New Item..” dialog box. Select Webservice from the dialog and name it as GetDate.asmx.

 

Include a method called GetDateTime() that returns a date time string .

In order to call the webservice method from javascript, you have to uncomment the attribute System.Web.Script.Services.ScriptService of webservice class. Refer the below code[bolded]

 

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]

public class GetDate : System.Web.Services.WebService {

 

public GetDate () {

 

//Uncomment the following line if using designed components

//InitializeComponent();

}

 

[WebMethod]

public string HelloWorld() {

return "Hello World";

}

 

[WebMethod]

public string GetDateTime()

{

return DateTime.Now.ToString();

}

}

 

Now, before consuming webservice method using jQuery it is necessary to know some restrictions on calling webservice methods from javascript.

1. Only POST method can be used to call a webservice method.

2. The HTTP Content-Type header should be set to the value “application/json”.

 

There is a built in validation layer in ASP.Net that checks for the above 2 things. The request will be rejected if both the constraints are not met. This is done for preventing some security vulnerabilities like cross site request forgery attacks. Read the links in Reference section to know more.

 

Consuming Webservice using jQuery

The below jQuery code can be used to call the webservice method.

 

<script src="_script/jquery-1[1].3.2.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() {

$("#btGetDate").click(function() {

$.ajax({

type: "POST",

url: "/AjaxSample/GetDate.asmx/GetDateTime",

data: "{}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(msg) {

$("#dvDate").html(msg.d);

}

});

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<div id="dvDate"></div><input id="btGetDate" type="button" value="Get Date" />

</div>

</form>

</body>

 



ASP.Net Hosting

Recent Articles

In the above code, I have included the project folder name “/AjaxSample/” in the url property of the $.ajax() method. Specify the folder name of your project here and update it accordingly when moving to production.

 

Reference

Webservice Security

Conclusion

With the introduction of jQuery library, the client side scripting was made simpler and it was actually taken to next level where developers now can do some complex operations and Ajax communication very easily. This article proved one of the advantages of jQuery where we can consume an asp.net webservice with very less effort.

Similar Articles
  • You can contribute to CodeDigest.Com:
    Article Feedback
    Title  
    Submitted By  
    Comment  
    Enter the verification number
     
    Comments
    Best article
    Its really a best article which help begging to know how to call web service methods through Jquery
    Nice article
    nice article, it is really helpfull for me
    Passing Parameters to WebService from JQuery
    If youwanted to send parameters to Web Service from the invoking JQuery? All you need to do is to add below statement instead of data: "{}"

    data: "{'Id1':'2','Id2':'4'}"