Calling an ASP.NET EventHandler from JavaScript

Question

I have a traditional ASP.NET Web Form. We used to have a button defined as follows:

<asp:Button ID="myButton" Runat="server" OnClick="myButton_Click" />

In the .aspx.cs page, I have the following:

protected void myButton_Click(object sender, EventArgs e)
{
  // Do Stuff
}

However, now someone has decided to use a fancy JavaScript framework. Essentially, I just have:

  <input type="button" id="myButton" onclick="someJSFunction()" />
  <script type="text/javascript">
    function someJSFunction() {
      // Need to execute "myButton_Click" here.
    }
  </script>

How do I actually execute my original method on the server from here? I know this is a very bizarre question. I've simplified the code to try to and be a direct in communicating what I'm trying to accomplish. Can someone please tell me how to do this?

Thank you so much!

Answer 1

You could write in

__doPostBack('<%=myButton.ClientID%>','OnClick');

or a bit better and less error prone use the ASP.Net ClientScriptManager

<%= Page.ClientScript.GetPostBackEventReference(myButton, String.Empty) %>; 

The second actually writes __doSubmit under the covers but you are getting the ASP.Net framework to do it for you. Also th efirst one will post back the page but the second triggers the correct server side events as well. It integrates a lot better into the ASP.Net architecture. Either would work though.

This recent SO question explains it all far better than I can (or rather did at the time)

Answer 2

try this:

<input type="button" id="myButton" onclick="someJSFunction(); __doPostBack('myButton','OnClick');" />

Answer 3

First of all, whatever your button is doing, the actual code to do that function shouldn't be in the code behind the button; it should be in a method that is called by the code behind the button. The button's event handlers should never be used directly by any object other than the button. So your button handler should look like this:

protected void Button1_Click(object sender, EventArgs e)
{
   CallMyRealMethod();
}

Next, check out SignalR. (http://signalr.net) SignalR (in a nutshell) allows you to call C# methods from your javascript, and javascript methods from C#.

Using these two techniques can make your code much more readable and maintainable.