Understanding the JavaScript __doPostBack Function

In this article we going to understand the the functionality of __doPostBack function of JavaScript.

_doPostBack Function
Let us take a look at the function.
Listing 1 - _The __doPostBack function


function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
Description
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");
}
Description
For this code to work you need to add any web server control on the form except for Button and ImageButton control (Discuss it later). 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
onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)"
id="DropDownList1">
One
Two

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.
What about Buttons and ImageButtons?
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

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;
}
}
Description
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.
Passing Arguments
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


string passedArgument = Request.Params.Get("__EVENTARGUMENT");
Description
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.”
Thanks to aspalliance.com