jQuery Ajax in ASP.Net

jQuery Ajax in ASP.NET

 

The following are 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

The answer is to use jQuery.

 

jQuery allows you to call server-side ASP.NET methods from the 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.

 

The figure below describes the syntax of the call.

$.ajax({
    type: "POST",
    url: "CS.aspx/MethodName",
    data: '{name: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function(response) {
        alert(response.d);
    }
});

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 can see in the preceding I have added a TextBox when the user enters 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>

The ShowCurrentTime method above makes an AJAX call to the server and executes the GetCurrentTime method that 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 preceding 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#) or Shared (VB.Net) and also it is declared as a Web Method since unless you do this you won't be able to call the methods.