Call Code Behind Method from JQuery/JavaScript in SharePoint Application page

Call Code Behind Method from JQuery/JavaScript in SharePoint Application page

Output: 

Add a Web.Services DLL reference int your Project

using System.Web.Services;

Code for ASPX page:

 <input type="button" value="Click to call Webmethod" onclick="CallMethod();" />  

 <asp:Button ID="Button1" runat="server" Text="Click" />

<br/><br/>

<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: "CallWebMethod.aspx/CodeBehindMethod",

                      data: "{}",

                      contentType: "application/json; charset=utf-8",

                      dataType: "json",

                      async: true,

                      cache: false,

                      success: function (MethodReturnValue) {

                          $('#myDiv').text(MethodReturnValue.d);

                      }

                  })

                  return false;

              });

          });

          // Pass static value

          function CallMethod1() { 

              $.ajax({

                  type: "POST",

                  url: "CallWebMethod.aspx/CodeBehindMethod",

                  data: "{'param1': 9870}",

                  contentType: "application/json; charset=utf-8",

                  dataType: "json",

                  async: true,

                  cache: false,

                  success: function (MethodReturnValue) {

                      $('#myDiv').text(MethodReturnValue.d);

                  }

              })

              return false;

          }

          // Pass variable value

          function CallMethod(variableValue) {

              // variableValue = "Hello Mr. Ravi Kumar Maloth";

              $.ajax({

                  type: "POST",

                  url: "CallWebMethod.aspx/CodeBehindMethod2",

                  data: "{'paramVal':'" + variableValue + "'}",

                  contentType: "application/json; charset=utf-8",

                  dataType: "json",

                  async: true,

                  cache: false,

                  success: function (returnValue) {

                      $('#myDiv').text(returnValue.d);

                  }

              })

              return false;

          } 

     </script>

Code for Code Behind(ASPX.cs) page:

            [WebMethod]

        public static string CodeBehindMethod()

        {

            return "Message from CodeBehindMethod.";

        }

        [WebMethod]

        public static string CodeBehindMethod2(string paramVal)

        { // Passing variable name is same as function param

            CallWebMethod mycallWeb = new CallWebMethod();

            mycallWeb.hideData();

            return "Message from CodeBehindMethod : " + paramVal;

        }

        public void hideData()

        {

            try

            {

                //Logic  here

            }

            catch (Exception ex) { }

        }