How to call Server Side Method from jQuery/javascript using Ajax & JSON Parsing

With this post I would show how to call server side method from client side. Here I use jQuery to utilize the Ajax Capabilities which will help us to get/post data to/from server Asynchronously. There are many methods available to perform an async callback to the server. Here I will show a simple example as in how to call a code behind Webmethod.

For simplicity I would be calling the code behind method on a Button Click. Here is the code:

<asp:Button ID="Button1" runat="server" Text="Click" />
<br /><br />
<div id="myDiv"></div>

JQuery/JavaScript Code to call Server Side Method:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
      <script type ="text/javascript">
          $(document).ready(function () {
              $('#<%=Button1.ClientID %>').click(function () {
                  $.ajax({
                      type: "POST",
                      url: "WebForm1.aspx/ServerSideMethod",
                      data: "{}",
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                     async: true,
                     cache: false,
                     success: function (msg) {
                         $('#myDiv').text(msg.d); 
                     }
                 })
                 return false;
             });
         });
     </script>

Server Side Method (C# Code): (you must have to define your web method as public static)

[WebMethod]
public static string ServerSideMethod()
{
     return "Message from server.";
}

In the above code, the aspx markup contains a button on click of which we would call the server side method named ServerSideMethod(). The div would show the message returned from the server. When you run the code above and click the button, it would the div would show the message "Message from server".

If you want to send parameters to your server side method / code behind method, you would replace the below line in the above jQuery code as:

data: "{'param1': 1}"    (Static Value)
data: "{'param1':"+ variableValue +"}"  (If you want to pass Variable value

With the above line I would be sending a parameter with value as 1 to the server side method.

The server side method would change as:

[WebMethod]
public static string ServerSideMethod(string param1)
{
       return "Message from server with parameter:"+param1;
}

You can also call your web service method from here URL attribute.

If you want to call your Web Method on confirmation box of Jquery then you can go with below code:

function MyConfirmMethod() {
            if (confirm('Are your sure?')) {
                $.ajax({
                    type: "POST",
                    url: "WebForm1.aspx/ServerSideMethod",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                       $('#myDiv').text(msg.d);
                   }
               });
               return false;
           }
           else {
               return false;
           }
       }

Server Side C# Method:

protected void Page_Load(object sender, EventArgs e)
{
       Button1.Attributes.Add("onclick", "return MyConfirmMethod();");
}
[WebMethod]
public static string ServerSideMethod()
{
    return "Message from server!";
}

Above you can see I am calling JavaScript confirm on the button click. On pressing yes, jQuery calls code behind method ServerSideMethod and returns back the message. You could perform any server side logic/database operations here based on the user response. Note I use return false as it prevents post-back to the server.

Thanks..:)