It is quite amazing to note that only two of the ASP.NET web server controls cause a postback.  All the other controls use the JavaScript __doPostBack function to trigger the postback.  In this article you will learn about the __doPostBack function and how it works.

The best way to understand the working of the __doPostBack function is to dissect the function into small pieces and explore each piece one at a time.  Let us take a look at the function.

Listing 1 - _The __doPostBack function

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}

Analysis

The __doPostBack function takes two arguments, eventTarget and eventArgument.  The eventTarget contains the ID of the control that causes the postback and the eventArgument contains any additional data associated with the control.  Note that the two hidden fields, “__EVENTTARGET” and “__EVENTARGUMENT,” are automatically declared.  The value of the eventTarget and eventArgument are stored in the hidden fields.  The two hidden variables can be accessed from the code behind using the forms/params collection.  

Using the hidden variables you can also find the ID of the control which causes the postback.  All you need to do is to retrieve the value of the __EVENTTARGET from the form parameter collection.  Take a look at the code below.

Listing 2 – Getting the _EVENTTARGET hidden field

protected void Page_Load(object sender, EventArgs e)
{
  string controlName = Request.Params.Get("__EVENTTARGET");
}

Analysis

For this code to work you need to add any web server control on the form except for Button and ImageButton control (I will tell you why later in this article).  Let us add the DropDownList control and set the AutoPostBack property to true and populate the DropDownList with some dummy data.  Now, run the page and view the source of the page.

You will see the following line of code.

Listing 3 – DropDownList calling __doPostBack function

<select name="DropDownList1" 
onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)"
 id="DropDownList1">
<option selected="selected" value="One">One</option>
<option value="Two">Two</option>
</select>

The onchange event of the DropDownList calls the __doPostBack function.  The ID of the control, “DropDownList1,” is also passed to the _doPostBack function and stored in the _EVENTTARGET hidden field.  In the Page_Load I fetch the value of the _EVENTTARGET variable which in this case is the ID of the DropDownList.   This way we can find out that which control caused the postback.

You might be wondering about the POSTBACK triggered by the Buttons and the ImageButtons. Well, let us see the code generated by the Buttons.

Listing 4 – Code generated by the Button server control

<input type="submit" name="Button1" value="Do PostBack" id="Button1" />

As demonstrated in the code above, the Button control does not call the __doPostBack function. Because of this, the _EVENTTARGET will always be empty.  However, you can find out the ID of the Button by looping through the form controls collection.  Take a look at the code below.

Listing 5 – Finding the Button control in the form collection

foreach (string str in Request.Form)
{
  Control c = Page.FindControl(str);
  if (c is Button)
  {
    control = c;
    break;
  }
}

Analysis

In the code above I iterated through the controls on the page.  If the control is of type Button then the loop breaks and the control is returned back to the user.

If you look closely at the __doPostBack function you will notice that the second argument is called the eventArgument.  You can allow controls to pass arguments to the doPostBack function.  Check out the code below.

Listing 6 – Passing arguments to the __doPostBack function

<input type="button" id="Button2" value="Press me" onclick="DoPostBack()" />
<script language="javascript" type="text/javascript">
 
function DoPostBack() 
{
  __doPostBack('Button2','My Argument');     
}
 
</script>
string passedArgument = Request.Params.Get("__EVENTARGUMENT");

Analysis

The “Button2” when clicked fires the DoPostBack function which in turn calls the __doPostBack.  The __doPostBack function contains two arguments, eventTarget and eventArgument.  The eventTarget is “Button2” and the eventArgument is “My Argument.”  Later, in the C# code behind, I have accessed the eventArgument using the Request.Params collection.  The passedArgument variable will contain the value “My Argument.”

[Download Sample]

In this article I demonstrated how the ASP.NET PostBack architecture works with the ASP.NET server controls.