Thursday, August 22, 2013

Call page method using javascirpt in asp.net



Call code behind method which have no parameter


Step 1: Put below script on your page


<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CallMethod() {
            GetTime();
        }
 
        function GetTime() {
           
           PageMethods.GetTime(GetTimeCallback, ErrorHandler, TimeOutHandler);
        }
        function TimeOutHandler(result) {
            alert("Timeout :" + result);
        }
        /// <summary>
        /// Callback function invoked on failure of the page method 
        /// </summary>
 
        function ErrorHandler(result) {
            var msg = result.get_exceptionType() + "\r\n";
            msg += result.get_message() + "\r\n";
            msg += result.get_stackTrace();
            alert(msg);
        }
        GetTimeCallback = function (result) {
            /// <summary>
            /// Is called when server sent result back
            /// </summary>
            /// <param name="result">
            /// Result of calling server method, 
            /// string - server time 
            /// </param>
            if (result) {
                $get("lblMessage").innerHTML = result;
            }
 
        }
    </script>



Step 2: Put below code in your aspx page


 <asp:ScriptManager EnablePageMethods="true" ID="MainSM" runat="server" ScriptMode="Release"
        LoadScriptsBeforeUI="true">
    </asp:ScriptManager>
    <asp:Label ID="lblMessage" runat="server" Text="" ClientIDMode="Static"></asp:Label><br/>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
           OnClientClick="GetTime(); return false;" />


Step 3: Put below code in your aspx.cs page



        [System.Web.Services.WebMethod]
        public static string GetTime()
        {
            return DateTime.Now.ToString();
        }



Call code behind method which have parameter

Step 1: Put below script on your page


<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CallMethod() {
            GetTime();
        }
 
        function GetTime() {
           
           PageMethods.GetTime("test""12", GetTimeCallback, ErrorHandler, TimeOutHandler);

        }
        function TimeOutHandler(result) {
            alert("Timeout :" + result);
        }
        /// <summary>
        /// Callback function invoked on failure of the page method 
        /// </summary>
 
        function ErrorHandler(result) {
            var msg = result.get_exceptionType() + "\r\n";
            msg += result.get_message() + "\r\n";
            msg += result.get_stackTrace();
            alert(msg);
        }
        GetTimeCallback = function (result) {
            /// <summary>
            /// Is called when server sent result back
            /// </summary>
            /// <param name="result">
            /// Result of calling server method, 
            /// string - server time 
            /// </param>
            if (result) {
                $get("lblMessage").innerHTML = result;
            }
 
        }
    </script>



Step 2: Put below code in your aspx page


 <asp:ScriptManager EnablePageMethods="true" ID="MainSM" runat="server" ScriptMode="Release"
        LoadScriptsBeforeUI="true">
    </asp:ScriptManager>
    <asp:Label ID="lblMessage" runat="server" Text="" ClientIDMode="Static"></asp:Label><br/>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
           OnClientClick="GetTime(); return false;" />


Step 3: Put below code in your aspx.cs page


[System.Web.Services.WebMethod]
        public static string GetTime(string abc, int i)
        {
            return i + "|" + abc + "|" + DateTime.Now.ToString();
        }

1 comment:

  1. very nice article sir its really help me to work with javascript on code behind :)

    Thank you

    ReplyDelete