In this article I have explained, how to make a AJAX call to ASP.Net WebMethod using jQuery AJAX.
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 following picture describes the syntax of the jQuery AJAX call.
Calling ASP.Net WebMethod using jQuery AJAX
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net TextBox and an HTML Button.
<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time"
    onclick = "ShowCurrentTime()" />
</div>
 
 

Client Side Script
When the Button is clicked the ShowCurrentTime JavaScript function is executed which makes an AJAX call to the GetCurrentTime WebMethod. The value of the TextBox is passed as parameter to the WebMethod.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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>
 
 
The WebMethod
The following WebMethod 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 is decorated with WebMethod attribute, this is necessary otherwise the method will not be called from client side jQuery AJAX call.
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
 
 
Screenshot
Calling ASP.Net WebMethod using jQuery AJAX
 
 
Browser Compatibility

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.

 
 
Demo
View Demo
 
 
Downloads
CallingServerSideMethodsJQuery.zip