Tuesday, April 4, 2017

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) { }
        }