call code behind method from javascript, asp.net

ASP.NET, JavaScript, JQuery Leave a comment
Call code behind method from javascript, asp.net

There are two ways to access code behind method in asp.net using JavaScript:

  1. Using ScriptManager and WebMethod
  2. Using Jquery and  button click from JavaScript

Lets Discuss one by one.

1)  Using ScriptManager and WebMethod

  • First of all add script manager on your page and add property EnablePageMathod=”true”
  • Take a button and call JavaScript  function
  • Write code for which you want call code behind method from that JavaScript method
  • Add static method on code behind page and that should be WebMethod

Here is the code for aspx page as bellow:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageStaticMethod.aspx.cs"
    Inherits="PageMethodCall.PageStaticMethod" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function test() {
            var conf = confirm('Are you sure?');
            if (conf == true)
                PageMethods.MyMethod();

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="Scriptmanager1" runat="server" EnablePageMethods="true" />
            <asp:Button Text="ClickMe" ID="btnClickMe" runat="server" OnClientClick="test()" />
        </div>
    </form>
</body>
</html>

 

Code behind page code using c#

[System.Web.Services.WebMethod]
public static void MyMethod()
{
    //put your break point and check whether this method is called or not
    //your code goes here;
 
}

 

Cons: We cannot access server controls from webMethod.

2)  Using Jquery and  button click from JavaScript

  •  Add JQuery on your page
  • Take a button and call JavaScript  function
  • Add <div> tag and declare style=”display:none”. Then add button inside it. Define button click event and write code inside that event whatever you want.

Here is the code for .aspx page as bellow:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        function test() {
            var conf = confirm('Are you sure?');
            if (conf == true)
                $('#<%=btnCallMethod.ClientID%>').click();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="Scriptmanager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
            <asp:Button Text="ClickMe" ID="btnClickMe" runat="server" OnClientClick="test()" />
            <div style="display: none">
                <asp:Button Text="" ID="btnCallMethod" runat="server" OnClick="btnCallMethod_Click" />
            </div>
        </div>
    </form>
</body>
</html>

 

Code behind page code using c#

protected void btnCallMethod_Click(object sender, EventArgs e)
{
    //put your break point and check whether this method is called or not
    //your code goes here;
}

 

Full code download for call code behind method from javascript, asp.net : PageMethodCall

Leave a Reply