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: '{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.