Home Asp.net Call Server-side Function Using JavaScript PageMethods

Call Server-side Function Using JavaScript PageMethods

56
0
Call server-side function or method from javascript in asp.net
Call server-side function or method from javascript in asp.net

In my previous tutorials, I’d explained how to show alert message from code-behind, how to call javascript function from code-behind, how to write code-behind code to your aspx page and other more cracking tutorials on Asp.net, JavaScript, jQuery here.

Now here in this tutorial, I’ll explain how to call server-side function using JavaScript PageMethods from .aspx page as well as how to call code-behind method in c# or vb.net with example code.

To call the code-behind function from javascript, we must need to make server method as static [WebMethod] as shown below:

[WebMethod]
public static string callFunction(string words) {
    return "Your string was '" + words + "'";
}

We also need the <asp:ScriptManager /> with EnablePageMethods=”True” as shown below:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" />
Note: Must place <asp:ScriptManager /> statement inside HTML form tag.

Now call the server-side function using following script:

<script type="text/javascript">
    function callServerFunction() {
        var txtWords = document.getElementById('txtWords').value;
        PageMethods.callFunction(txtWords, OnSuccess, OnFailure);
    }

    //prompt success message..
    function OnSuccess(result) {
        if (result) {
            alert(result);
        }
    }

    //prompt error message..
    function OnFailure(error) {
        if (error) {
            alert(error);
        }
    }
</script>

Call Server-side Function Using JavaScript PageMethods – [.aspx]

Following is the complete HTML Markup code for .aspx page that I created for this tutorial:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to call server-side function using JavaScript in Asp.net
</title>
    <script type="text/javascript">
        function callServerFunction() {
            var txtWords = document.getElementById('txtWords').value;
            PageMethods.callFunction(txtWords, OnSuccess, OnFailure);
        }

        //prompt success message..
        function OnSuccess(result) {
            if (result) {
                alert(result);
            }
        }

        //prompt error message..
        function OnFailure(error) {
            if (error) {
                alert(error);
            }
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" />
        <h4>Call server-side function using JavaScript in Asp.net</h4>
        <div>
            <asp:TextBox ID="txtWords" runat="server" ClientIDMode="Static"></asp:TextBox>
            <asp:Button ID="btnCall" OnClientClick="callServerFunction();return false;"
                Text="Submit" runat="server" />
        </div>
    </form>
</body>
</html>

Call Code-behind Function Using JavaScript PageMethods – [C#]

First add following namespace:

using System.Web.Services;

then add the following method to your aspx.cs page:

[WebMethod]
public static string callFunction(string words) {
    return "Your string was '" + words + "'";
}

Call Code-behind Function Using JavaScript PageMethods – [Vb.net]

First add following namespace:

Imports System.Web.Services

then add the following method to your aspx.vb page:

<WebMethod()>
Public Shared Function callFunction(ByVal words As String) As String
    Return "Your string was '" & words & "'"
End Function

Example Result

Call server-side function or method from javascript in asp.net
Call server-side function or method from javascript in asp.net
Previous articleWrite C# or Vb.net Code-behind Code In aspx Page Inline
Next articleCall Server-side Function Using jQuery Ajax Call
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

2 × 1 =