How to Call Server Side Function from Javascript Function using Ajax in Asp.Net C# VB.Net

In many cases we need to invoke server side method from client scripts. Here in this article I will explain “Calling Asp.Net server side function from JavaScript“. To do that we need to use AJAX ScriptManager. Because the AJAX ScriptManager allow us to call Server Side methods from client side without any PostBack using PageMethods. As per MSDN, You can add static page methods to an ASP.NET page and mark them as Web methods. You can then call these methods from script as if they were part of a Web service, but without creating a separate .asmx file. To create Web methods on a page, import the System.Web.Services namespace and add a WebMethodAttribute attribute to each static method that you want to expose. The methods must be marked public.

Related Article:
JQuery to Call Asp.Net Ajax Page Methods with Parameter from Client Side in C# VB.Net

Calling server side function from JavaScript in ASP.Net

Prepare the HTML like Below:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">

    Enter Firt Number:<br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    Enter Second Number:<br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />

    <asp:Button ID="Button1" runat="server" Text="Calling Asp.Net Server Side Function from Javascript" OnClientClick="return DisplayResponse();"/><br />
    <hr />
    <asp:Label ID="Label1" runat="server" Text="" Font-Bold="true"></asp:Label>

Note: Add AJAX ScriptManager first. Then set EnablePageMethods=”true”.

Asp.Net Server Side Function:
C# Code:

    public static int GetSum(int num1,int num2)
        return num1+num2;

VB.Net Code:

    <System.Web.Services.WebMethod()> _
    Public Shared Function GetSum(num1 As Integer, num2 As Integer) As Integer
        Return num1 + num2
    End Function

Call Asp.Net Server Side Function using Javascript and AJAX:

    <script type="text/javascript">
        function DisplayResponse() {
            PageMethods.GetSum(document.getElementById("<%=TextBox1.ClientID%>").value, document.getElementById("<%=TextBox2.ClientID%>").value, OnSuccess);
            return false;

        function OnSuccess(Server_Function_Return_value) {
            document.getElementById("<%=Label1.ClientID%>").innerText = "The SUM is: " + Server_Function_Return_value;

Note: The DisplayResponse javascript method makes an AJAX call to the server side function GetSum() using Asp.Net AJAX ScriptManager PageMethods and executes the GetSum() method to return the result. OnSuccess function is a javascript callback function which will be called after successful execution of Asp.Net server side method GetSum().

Now run the project. Hope you can call Asp.Net server side function from javascript successfully.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Ajax,, C#, Client, Javascript, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *