Call Asp.net server side function using Javascript and AJAX PageMethods without any PostBack

Introduction: In this article I am going to explain with simple example to call Asp.net C# or VB server side functions or page methods at client side from JavaScript with the help of AJAX PageMethods without reloading/refreshing page.
Call server side functions at client side from javascript and AJAX pagemethods

Description:  By default asp.net web page gets post back when we click on Asp.Net button. For example: Let's consider a very basic example for the sake of simplicity as shown in image above,  if we have two textbox controls to enter two numbers and on button click we want to calculate sum of these two numbers. The page will be posted back to server by default to process the request, thus causing slow and annoying page refresh.

But through AJAX pagemethods we can call the same server side functions i.e. the functions created in the code behind file (.aspx.cs or .aspx.vb) at client side without reloading the page to process the request.

Asp.Net AJAX ScriptManager allows us to call server-side Asp.Net web methods from client side without any postback using PageMethods. AJAX PageMethods is a way to expose server side page's method in JavaScript.

By setting the EnablePageMethods property of the ScriptManager Control to true, the methods/functions declared as WebMethod in Asp.Net code behind file can be called from client script.

Implementation: Let’s create an example to the concept in action

HTML Source Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Call asp.net server side functions from JavaScript using AJAX PageMethods</title>

    <script type="text/javascript">

        function MyFunction() {
            //Get values from textboxes that wiil be passed to function          
            var num1 = document.getElementById('<%=txtFirstNumber.ClientID %>').value;
            var num2 = document.getElementById('<%=txtSecondNumber.ClientID %>').value;
                       
            PageMethods.CalculateSum(num1, num2, onSucess, onError);

            function onSucess(result) {
                $get('dvMsg').innerHTML ="Sum of " + num1 + " and " + num2 + " = " +  result;
            }

            function onError(error) {
                alert("Error: " + error.get_message());               
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

            <table>
                <tr>
                    <td>Enter First Number:</td>
                    <td>
                        <asp:TextBox ID="txtFirstNumber" runat="server" /></td>
                </tr>
                <tr>
                    <td>Enter Second Number:</td>
                    <td>
                        <asp:TextBox ID="txtSecondNumber" runat="server" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnCalculate" runat="server" Text="Calculate" OnClientClick="MyFunction();return false;" />
                        <div id="dvMsg"></div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>

Asp.Net C# Code to call server side methods from javascript using Ajax PageMethods

In the .aspx.cs file first add following required namespace:

using System.Web.Services;

and then add the following method

       [WebMethod]
        public static string CalculateSum(Int32 Num1, Int32 Num2)
        {          
            Int32 Result = Num1 + Num2;
            return Result.ToString();
        }

Asp.Net VB Code to call server side methods from javascript using Ajax PageMethods

In the .aspx.vb file first add following required namespace:

Imports System.Web.Services

and then add the following method

  <WebMethod> _
    Public Shared Function CalculateSum(Num1 As Int32, Num2 As Int32) As String
        Dim Result As Int32 = Num1 + Num2
        Return Result.ToString()

    End Function

Now over to you:
" I hope you have got how to Call Asp.net Server side Method from javascript using AjaX pageMethods without any post back and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..