Understanding the JavaScript __doPostBack Function

 Published:20 Jun 2006
Abstract
Inthis article we will look into the __doPostBack function of JavaScript.Read the article to find some insights about the function. by Mohammad Azam
Feedback
Average Rating: 
Views (Total / Last 10 Days):146084/2249

Article Contents:

• Introduction
• _doPostBack Function
• Finding the control that caused the postback
• What about Buttons and ImageButtons?
• Passing Arguments
• Downloads
• Conclusion

Introduction

[ Back To Top ]

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

_doPostBack Function

[ Back To Top ]

The best way to understand the working of the __doPostBackfunction is to dissect the function into small pieces and explore each piece oneat 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, eventTargetand eventArgument.  The eventTarget contains the ID of the control that causesthe postback and the eventArgument contains any additional data associated withthe control.  Note that the two hidden fields, “__EVENTTARGET” and“__EVENTARGUMENT,” are automatically declared.  The value of the eventTargetand eventArgument are stored in the hidden fields.  The two hidden variablescan be accessed from the code behind using the forms/params collection.  

Finding the control that caused the postback

[ Back To Top ]

Using the hidden variables you can also find the ID of thecontrol which causes the postback.  All you need to do is to retrieve the valueof the __EVENTTARGET from the form parameter collection.  Take a look at thecode 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 controlon the form except for Button and ImageButton control (I will tell you whylater in this article).  Let us add the DropDownList control and set theAutoPostBack property to true and populate the DropDownList with some dummydata.  Now, run the page and view the source of the page.

You will see the following line of code.

Listing 3 – DropDownList calling __doPostBackfunction

<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 passedto the _doPostBack function and stored in the _EVENTTARGET hidden field.  Inthe Page_Load I fetch the value of the _EVENTTARGET variable which in this caseis the ID of the DropDownList.   This way we can find out that which controlcaused the postback.

What about Buttons and ImageButtons?

[ Back To Top ]

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

Listing 4 – Code generated by the Button servercontrol

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

As demonstrated in the code above, the Button control doesnot call the __doPostBack function. Because of this, the _EVENTTARGET willalways be empty.  However, you can find out the ID of the Button by loopingthrough the form controls collection.  Take a look at the code below.

Listing 5 – Finding the Button control in the formcollection

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 thepage.  If the control is of type Button then the loop breaks and the control isreturned back to the user.

Passing Arguments

[ Back To Top ]

If you look closely at the __doPostBack function you willnotice that the second argument is called the eventArgument.  You can allowcontrols to pass arguments to the doPostBack function.  Check out the codebelow.

Listing 6 – Passing arguments to the __doPostBackfunction

<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 functionwhich in turn calls the __doPostBack.  The __doPostBack function contains twoarguments, eventTarget and eventArgument.  The eventTarget is “Button2” and theeventArgument is “My Argument.”  Later, in the C# code behind, I have accessedthe eventArgument using the Request.Params collection.  The passedArgumentvariable will contain the value “My Argument.”

Downloads

[ Back To Top ]

[DownloadSample]

Conclusion

[ Back To Top ]

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