Button click/page submit from JavaScript

Question

I'd like to understand how the asp.net framework knows when a button has been clicked and therefore once it receives the request fires its click event on the server.

I need to understand how it works as I would like to trigger the button's server click event from javascript.

I am able to perform a submit of the page from JavaScript:

 document.forms[0].submit();

But how could do the same so that asp.net thinks that a button click has happened, so on the server its click event fires once the request is received.

Thanks

UPDATE 1

Thanks everybody for the replies. Doing a few tests if I add one asp.net button and by looking at the source code, I cant seem to find a generated JavaScript "__doPostBack" function.

This is the test I've tried.

I have one normal HTML button (button1) and an asp.net button.(button2)

From the HTML button's click event (button1), I've added a client call to the javascript __doPostback method passing in the asp.net button2 id.

So I am trying to fire the server side button2 click event by calling the html button (button1.)

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <input id="Button1" type="button" 
         value="Raise Button2 server side click event"
         onclick="javascript:__doPostBack('Button2', '')" /> 

        <asp:Button ID="Button2" runat="server" 
        Text="asp.net_Button2" 
        OnClick="button2Click" />  
    </div>  
    </form>  
</body>  
</html>

And the generated HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
</head>
<body>
    <form name="form1" method="post" action="Default6.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
value="/wEPDwUKMjA0OTM4MTAwNGRke29WUkB+FLhQArxd1ehT98cWw1Y=" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" 
value="/wEWAgKLs+3sDgK7q7GGCBs2MBvLk9CJNnA02t08R1LKdiJU" />
</div>
    <div>
        <input id="Button1" type="button" value="Raise Button2 server side click event" 
onclick="javascript:__doPostBack('Button2', '')" />
        <input type="submit" name="Button2" value="asp.net_Button2" id="Button2" />
    </div>
    </form>
</body>
</html>

UPDATE 2

If I set the buttons "UseSubmitBehavior" attribute to false, then it does generated the __doPostBack method and by calling it from the client it does raise the event on the server.

So what would be the difference between submit and a postback? (I'll start a new thread for this).
Thanks for the help!

score 2 · Answer 1 · answered May 01 '11 at 14:02

2

You can perfectly imitate button click with client side code:

document.getElementById("<%=Button1.ClientID%>").click();

Button1 is the ID of the "server side" button.

answered May 01 '11 at 14:02

Shadow The GPT Wizard

66,030
26
140
208

thanks, I guess once the client side click occurs, the page is submitted back to the server, but how does the server know that it was submitted due to that button's click, so, on the server it goes and fires its server side click event. – Rauland May 01 '11 at 14:09
@rauland - by clicking the button with `click()` the `onclick` code is triggered, SLaks explained it really good. – Shadow The GPT Wizard May 01 '11 at 14:13

Akram Shahda · Accepted Answer · 2011-05-01T16:39:48.987

The javascript __doPostBack function is called whenever the page is needed to be posted back.

To learn about __doPostBack, read this article.

EDIT

Use the UseSubmitBehavior property to specify whether a Button control uses the client browser's submit mechanism or the ASP.NET postback mechanism. By default the value of this property is true, causing the Button control to use the browser's submit mechanism. If you specify false, the ASP.NET page framework adds client-side script to the page to post the form to the server.

When the UseSubmitBehavior property is false, control developers can use the GetPostBackEventReference method to return the client postback event for the Button. The string returned by the GetPostBackEventReference method contains the text of the client-side function call and can be inserted into a client-side event handler.

Refer to:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.usesubmitbehavior.aspx

http://www.w3schools.com/ASPNET/prop_webcontrol_button_usesubmitbehavior.asp

thanks for the reply, I've updated my question as I cant seem to see a __doPostBack javascript method. — Rauland, May 01 '11 at 14:55

score 1 · Answer 3 · answered May 01 '11 at 13:59

1

ASP.Net adds a client-side onclick handler to the button that calls the client-side __doPostback method with the button name as a parameter.
This method inserts the button name in a hidden field and submits the form.
(You can see all of this in the page source)

On the server, ASP.Net looks up the control and event names from the hidden field and raises the appropriate server-side name.

answered May 01 '11 at 13:59

SLaks

868,454
176
1,908
1,964

One personal question and sorry to ask here; I have just checked your profile that's great, but I have seen your age, you are just 20. Is it true ? – Muhammad Akhtar May 01 '11 at 14:25
thanks for the reply, I've updated my question as I cant see the __doPostback method. – Rauland May 01 '11 at 14:56

score 1 · Answer 4 · edited May 23 '17 at 10:24

1

This may help: Call ASP.NET function from JavaScript?

edited May 23 '17 at 10:24

Community

1
1

answered May 01 '11 at 14:03

Oleg Grishko

4,132
2
38
52

score 1 · Answer 5 · answered May 01 '11 at 14:22

Here is the code responsible for executing the proper server side method:

private void RaisePostBackEvent(NameValueCollection postData)
{
    if (this._registeredControlThatRequireRaiseEvent != null)
    {
        this.RaisePostBackEvent(this._registeredControlThatRequireRaiseEvent, null);
    }
    else
    {
        string str = postData["__EVENTTARGET"];
        bool flag = !string.IsNullOrEmpty(str);
        if (flag || (this.AutoPostBackControl != null))
        {
            Control control = null;
            if (flag)
            {
                control = this.FindControl(str);
            }
            if ((control != null) && (control.PostBackEventHandler != null))
            {
                string eventArgument = postData["__EVENTARGUMENT"];
                this.RaisePostBackEvent(control.PostBackEventHandler, eventArgument);
            }
        }
        else
        {
            this.Validate();
        }
    }
}

This is taken from the Page class source code, .NET 4.0

As you see and as SLaks already explained the code is looking for control with ID equal to the ID passed as hidden form field called __EVENTTARGET and then invoke the handler PostBackEventHandler if exists.

Button click/page submit from JavaScript

5 Answers5

Linked