jQuery Ajax in ASP.NET
The following are asked many times on ASP.NET forums.
- How to call server-side methods or functions using JavaScript in ASP.NET
- 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: JSON.stringify({ 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.