Consuming webservice using JQuery Asp.Net application

No.of Views1765
Bookmarked1 times
Downloads 
Votes0
By  malav.rajendra   On  28 Mar 2010 04:03:25
Tag : JQuery , AJAX
Access Web service methods using JQuery in ASP.NET.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

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:

 

public Common()
{
}

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

public void InsertData(Client objClient)
{
db.Clients.InsertOnSubmit(objClient);
db.SubmitChanges();
}

 I have used LINQ for database operation Insert client and return Id.  Create dbml file named with Client.

  

Image Loading

Include JQuery library:

  

Image Loading

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
[System.Web.Script.Services.ScriptService]

<br />
<div><input id="txtBizName" type="text" /><br />
 <input id="Save" type="button" value="Save" /><br />
 </div>
<div id="status"><br />

</div><br />

Now javascript for achieve ajax with Jquery libarary:

$(document).ready(function() {
$('#Save').click(InsertClient);
}
);
function InsertClient() {
var BizName = $('#txtBizName').val();
alert(BizName);
$.ajax({
url: "Common.asmx/InsertClient",
type: "POST",
dataType: "json",
data: "{BizName:'" + BizName + "'}",
contentType: "application/json; charset=utf-8",
success: function(msg) {
$('#status').html('Id: '+msg['d']['Id']);
},
error: function(e) {
$('#status').innerHTML = "Unavailable";
}

});
}

 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() {
$('#Save').click(InsertClient);
}
);

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']);

  

Image Loading

Summary

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.

 

 
Sign Up to vote for this article
 
About Author
 
malav.rajendra
Occupation-Not Provided
Company-Not Provided
Member Type-Fresh
Location-Not Provided
Joined date-01 Feb 2010
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
    In this article I will demonstration to how to validate whether to check at least one checkbox is checked in the Gridview in ASP.NET using JQuery. The JQuery is significant library to manipulate client html and css with less line of code.Before Jquery come up we have used the pure JavaScript to implement this features. I will give the JavaScript code as well in end of this article.
    Published Date : 30/Dec/2010
    Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
    Published Date : 29/Dec/2010
    In this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes.
    Published Date : 12/Jan/2011
    The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.
    Published Date : 11/Jan/2011
    Today I have introduced the new features for CodeGain article submit page to count characters for description textbox with JQuery on time. The character counter is support to users to display how many characters have entered and how many chars remaining in live.
    Published Date : 25/Dec/2010
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top
</