Friday, February 12, 2010

Consuming webservice using JQuery Asp.Net application


 The Web Service methods that I will use revolve around client. Having set up a web site in Visual Studio 2008, I have added a new item of type "Web Service" to the project, calling it Common.asmx. The code-behind - Common.cs - is automatically generated within the App_Code folder . The full code for that class file is as follows:

 ClientDataContext db = new ClientDataContext();

    public Common()

    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public Client InsertClient(string BizName)
        Client objClient = new Client();
        objClient.BizName = BizName;
        return objClient;

    public void InsertData(Client objClient)
I have used LINQ for database operation Insert client and return Id. 

Create dbml file named with Client.

Include JQuery library:

Return result as Json format following attribute will be responsible
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]

and important do not forget to add attribute for webservice class

Html code is


Now javascript for achieve ajax with Jquery libarary:

adding refrence of JQuery library

Then a click event is registered with the button which will invoke the InsertClient () function

Document.Ready() It makes sure code is executed only when a page is fully loaded. We often place code blocks inside this Document.Ready() event.

$(document).ready(function() {

After that is the InsertClient() function that is fired when the button is clicked. It makes use of the $.ajax(options) function within jQuery, and accepts an object with a number of optional properties. type specifies the HTTP method, which in this case is POST. url specifies the URL of the Web Service, together with the web method that is being called. This is followed by the parameters, which are applied to the data property. In this case, BizName parameters are being passed, as we are calling the method that retrieves the entire collection of Client. The contentType and dataType MUST be specified. Following this are two further functions: success defines what should be done if the call is successful and get Id of client with msg['d']['Id'], and error handles exceptions that are returned.

You can see that an object with a property - d - is returned and we displaying Id of client.
    $('#status').html('Id: '+msg['d']['Id']);


With the marching forward of AJAX to the forefront of building rich interactive websites, jQuery as the lightweight yet powerful JavaScript library also gains ever more prominence.  Reflecting on the trend of harnessing the best of the web, this article paints in broad strokes some of the characteristics of jQuery and how we can integrate jQuery into ASP .NET.


Anonymous said...

Very True.. Article is Ok. not helped much

Chris Bond said...

Your rapidshare link to the source seems down can you reupload thx

Anonymous said...

aclarar el acne durante la noche tratamiento de acne de piel clara [url=] control de la natalidad acne[/url] lo que funciona mejor para el acne acne de Loestrin 24 fe ?Como reparar las cicatrices del acne
hoja y corredor tx coleccion acne 1 2 3 acne enquistado detras [url=] Isolaz laser de acne[/url] acne gratis terminator 10 revision Cupones gratis de acne imprimible tratamiento del acne adolescente

acne jabon negro acne no mas estafa [url=] eliminacion de cicatriz de acne natural[/url] acne manchas rojas mejor limpiador de piel para el acne sistema de la piel sensible del acne