Call code behind method from javascript, asp.net
There are two ways to access code behind method in asp.net using JavaScript:
- Using ScriptManager and WebMethod
- 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