Proxy > Gmail Facebook Yahoo!

Make AJAX Call to ASP.Net Server Side Web service method using jQuery





This is asked many times on asp.net forums,
1. How to call Server Side methods or functions using JavaScript in ASP.Net
2. How to call Server Side methods Client Side in ASP.Net
Now the answer is using jQuery.
jQuery allows you to call Server Side ASP.net methods from client side without any PostBack. Actually it is an AJAX call to the server but it allows us to call the method or function defined server side.
 
Syntax
The figure below describes the syntax of the call.

Calling Server Side web methods in ASP.Net using JQuery JavaScript
 
HTML Markup
<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>

As you noticed above I have added a textbox when user can enter his name and a TML button that calls a JavaScript method to get the Current Time.
Client Side Methods
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowCurrentTime() {
    $.ajax({
        type: "POST",
        url: "CS.aspx/GetCurrentTime",
        data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>

Above the ShowCurrentTime method makes an AJAX call to the server and executes the GetCurrentTime method which accepts the username and returns a string value.
 
Server Side Methods
C#
[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCurrentTime(ByVal name As String) As String
   Return "Hello " & name & Environment.NewLine & "The Current Time is: " & _
            DateTime.Now.ToString()
End Function

The above method simply returns a greeting message to the user along with the current server time. An important thing to note is that the method is declared as static (C#) and Shared(VB.Net) and also it is declared as Web Method unless you do this you won’t be able to call the methods
 
The figure below displays the output displayed to the user when the button is clicked

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 
* All browser logos displayed above are property of their respective owners.

You can download the code in VB.Net and C# using the link below
CallingServerSideMethodsJQuery.zip


Responses

0 Respones to "Make AJAX Call to ASP.Net Server Side Web service method using jQuery"


Send mail to your Friends.  

Expert Feed

 
Return to top of page Copyright © 2011 | My Code Logic Designed by Suneel Kumar