Client Browser’s Submit Mechanism And The Postback Mechanism in ASP.NET and How the server knows which button clicked

While reading about “UseSubmitBehavior in an asp.net button”, I came to know that 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. (causes the button to use the ASP.NET postback mechanism, also to identify at server side which button was clicked in the browser.).

If you view the source code for the rendered page using your browser’s View Source command, you will see that client-side script has been added by the ASP.NET page framework to post the form to the server.

If you set use submit behavior to false, ASP.NET will generate script to handle submit by calling “__doPostBack” method like the following code. The method will add value to event target for telling server which element fire current event.

script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl00'];
if (!theForm) {
    theForm = document.ctl00;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

<input type="button" name="Button1" value="Submit" onclick="javascript:__doPostBack('Button1','')" id="Button1">    

Notice _EVENTTARGET and _EVENTARGUMENT fields. These fields are set so ASP .Net will know which button was clicked on client.

<input type="button" 
      name="rptMain$ctl02$DeleteButton" 
      value="Delete" onclick="__doPostBack('rptMain$ctl02$DeleteButton','')"         
      id="rptMain_ctl02_DeleteButton" />

Notice the arguments passed to the __doPostBack function. The name of the input is passed and set to EVENTTARGET. The value of EVENTTARGET will be read by ASP .Net and based on this will fire Click event of the <asp:Button /> control

EVENTARGUMENT is used by ItemCommand events, usually placed in the DataBound controls and contains specific data about that action, going to be used later when handling the event. This data can be for example an ID of row in a database table.

In the other hand, if you set use submit behavior to true, ASP.NET will generate button as input type submit instead of type button. When use click this button, the form will be normally submited.

<input type="submit" name="Button1" value="Submit" id="Button1">

Both ways are not difference at the server-side. But if you set use submit behavior to true, it will generate a bit cleaner XHTML.

How the server button click event?

If it is about <asp:Button />, this control renders by default an input of type=”submit”, which submits the form, using the browser’s default mechanism. ASP .Net identifies which button was clicked, by checking the posted values. When a browser submits a form it writes in the POST request the name and value of the clicked button among with the names and values of the other inputs, excluding the other submit inputs. So the name of one single submit input is sent to the server and in this way ASP .Net checks which button was clicked.

This server control has also the property UseSubmitBehavior and if this is set to false it will generate an input of type button. Since buttons don’t submit the forms, ASP .Net generates some javascript which will do the job.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s