Call ASPNet Page Method using jQuery AJAX Example

In this article I will explain with an example, how to Call ASP.Net Page Method using jQuery AJAX Example.

Syntax

The following picture describes the syntax of the jQuery AJAX call.

Call ASP.Net Page Method using jQuery AJAX Example

HTML Markup

The following HTML Markup consists of:

TextBox – For user input.

Button – For show current time.

<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.

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.

[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