In this article, we will take a closer look at how ASP.NET pages post back to themselves, and how to customize this feature in our web applications.

function __doPostBack(eventTarget, eventArgument)

One of the most important features of the ASP.NET environment is the ability to declare controls that run on the server, and post back to the same page. Remember the days of classic ASP? We would create a form which would accept the user’s input, and then we would most probably have to create another page that would accept all those inputs, either through HTTP GET or POST, and perform some kind of validation, display and action. Sometimes, even a third page was necessary to perform our actions. This wasted a lot of time and complicated things when you had to make a change. But of course, this is not necessary any more with ASP.NET. There is no need to create second pages that accept the inputs of the first, process them and so on. Form fields and other controls can be declared to run on the server, and the server simply posts the page back to itself and performs all the validation, display and actions. Our life as web developers has become a million times better. But how exactly is this done?

When a control is declared to run on the server, a VIEWSTATE is created which remembers the ID of that control, and the method to call when an action is performed. For example, let’s say we run the following code:

<script language="VB" runat="server">
Sub Test_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
	'enter your code to perform
End Sub
</script>
<html>
<body>
	<form runat="server" id="myForm">
		<asp:linkbutton id="Test" runat="server" text="Create Text file" onclick="Test_Click" />
	</form>
</body>
</html>

This is a very simple page. We declare only one web control, a linkbutton, to run on the server, with an ID of Test and we assign a method called Test_Click to run when the link is clicked on the page. The linkbutton has to be wrapped inside a form that runs on the server as well. We save the above as an ASPX page and then we browse to it. The HTML that gets created looks like this:

<html>
<body>
 <form name="myForm" method="post" action="test.aspx" id="myForm">
 <input type="hidden" name="__EVENTTARGET" value="" />
 <input type="hidden" name="__EVENTARGUMENT" value="" />
 <input type="hidden" name="__VIEWSTATE"
 value="dDwtMTAwOTA0ODU1NTs7PsllCK1DzvZsK0J6OQ2dxKqmEwVs" />

<script language="javascript">
<!--
function __doPostBack(eventTarget, eventArgument) {
 var theform = document.myForm;
 theform.__EVENTTARGET.value = eventTarget;
 theform.__EVENTARGUMENT.value = eventArgument;
 theform.submit();
}
// -->
</script>

<a id="Test" href="javascript:__doPostBack('Test','')">Create Text file</a>
</form>
</body>
</html>

Our link calls the javascript function __doPostBack when clicked (that’s 2 underscore characters in front). You do not write this function, instead it is generated by the ASP.NET engine and automatically included in our page. It submits the form to the same page, and accepts 2 arguments:

  1. eventTarget: the control doing the submission
  2. eventArgument: any additional information for the event

For example, our generated link button, is telling the javascript function that the control submitting the form is the one with ID=Test, and no further information is needed for the second argument. The javascript function is actually setting 2 hidden form fields with these 2 arguments: __EVENTTARGET and __EVENTARGUMENT. When the form is submitted back to the server, the server reads these 2 hidden form fields and decides what submitted the form and performs the necessary action. In this case, the server will determine that the linkbutton performed the action, and will execute the Test_Click method.

Lastly, I should point out that at least one control needs to be set to Visible, for the server to generate the __doPostBack function in our page. Even if we have numerous web controls declared to run on the server, but they are all set to Visible=false, then the javascript function will not be included and we will not be able to perform any actions. You can test this out, by changing the linkbutton source code to this and looking at the source code generated when it runs:

...
<asp:linkbutton id="Test" runat="server" text="Create Text file" onclick="Test_Click" visible="false" />
...

Calling __doPostBack in our own javascript

So now that we have seen how the postback process works, we can easily create web applications to use this feature. Let’s go through an example, and hopefully things will clear up more.

Let’s assume that we have a link on our page that creates a file on the server. When we click on the link, we might want to pop up a javascript input box where the user can type the filename. If the user types something in and then clicks OK, the page will post back to itself and perform the action. If the user clicks on CANCEL, then nothing will happen. Something like this:

Let’s see the HTML code needed to do this:

<script language="VB" runat="server">
Sub CreateFile_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Dim strFileName As String = funcParam.Value
 'custom code to create a text file
End Sub
</script>
<html>
<head>
<script language="JavaScript">
//ask for user input and then create file
function CreateFile() {
 //get filename from the user
 var fileName = prompt('Type the name of the file you want to create:','');
 //if the user clicks on OK and if they have entered something
 if ((fileName) && (fileName!="")) {
 //save the filename to the hidden form field 'funcParam'
 document.forms['myForm'].elements['funcParam'].value = fileName;
 //call the postback function with the right ID
 __doPostBack('CreateFile','');
 }
}
</script>
</head>

<body>
<form runat="server" id="myForm">
 <a href="javascript:CreateFile();">Create Text file</a>
 <asp:linkbutton id="CreateFile" runat="server" onclick="CreateFile_Click" />
 <input type="hidden" runat="server" id="funcParam">
</form>
</body>
</html>

Inside our form we have 3 controls:

  1. a link to call the javascript CreateFile function.
  2. a linkbutton that runs on the server, with ID CreateFile, and a CreateFile_Click method which runs when it is clicked.
  3. a hidden form field with ID funcParam, to store the filename that the user types in our javascript pop up.

Our custom javascript is very simple. First, it pops up an input box, where the user is asked to type a filename. If the user clicks on OK, and actually enters something, then we store this filename in our hidden form field, funcParam. Then we call the __doPostBack function, making sure we pass the ID of the linkbutton to make it think that it’s the linkbutton control that is submitting the form.

Since the linkbutton has an event called CreateFile_Click which runs on the server when it is clicked, then the page will submit to itself, and this method will run. The first thing we want to do in this method is get the name of the filename, and this is done by funcParam.Value. The remaining code to create the actual file on the server is not included, since the purpose of this article is not to show this. You can add it in, or create some other code here that performs a different action.

Keep in mind that for every javascript function that you create which calls the __doPostBack function, you will need to create a control that runs on the server – just like the shown above. We are not restricted to linkbuttons though – we can use any of the ASP.NET web controls.

We have seen how the postback function works with ASP.NET, and how to use it in our web applications. This article has concentrated on how to use this with a simple prompt box, but you can use a similar technique to combine the __doPostBack function with a showModalDialog function, or to return a value from another pop up window.

10 Responses to How postback works in ASP.NET

  • Nadarajan

    *I don’t think it is an appropriate sample code for __doPostback() scenario. Even if you comment out __doPostBack('CreateFile',''); it works unchanged!Thanks

    • Dan Sielicki

      Clean your browser cache!

  • youngpunjabi

    Very good explanation. Concept is clear now. Thanks a lot.

  • Andrew Deniel

    Hi,

    This is a very informative article. Thanks for sharing your knowledge. I have findout few other links that also descrebed in a good way about (PostBack,_doPostBack

    and AutoPostBack).

    http://mindstick.com/Articles/50855cbe-657e-41fa-a7b2-7835cfa1dba2/?PostBack%20in%20ASP%20Net

    http://www.c-sharpcorner.com/uploadfile/2f73dd/what-is-postback-in-Asp-Net/

    http://www.codeproject.com/Articles/68371/Detecting-Refresh-or-Postback-in-ASP-NET

  • Hunaid

    Thank you for this excellent explanation!!!!

  • walsh

    Is Postback is normally used on page _load event to detect if the web page is getting generated due to postback requested by a control on the page or if the page is getting loaded for the first time.

    http://net-informations.com/faq/asp/ispostback.htm asp.net ispostback()

    walsh

  • fipsiksi

    I don’t understand what exactly to call the javascript “CreateFile” function? It seems like it’s called anytime when we browse our page, without clicking “Create Text File” link button.

    • Evagoras Charalambous

      You might have already solved this, but make sure you copy the example code as is. Since the client and server side function names are similar in my example one can easily confuse the two.

  • Bob E.

    A valuable lesson I learned today. I visited your site. Thanks for posting this informative and easy to read guide to the postback.

  • Andreas Georgiou

    Greetings Evagoras,

    I am working on a “Web Shop Cart” using .NET VB (jquery, jscript)

    The shop items are generated at run time and With the selection

    an animated image to be inserted in cart.

    Having problem with the cart, can you give help.

    Thanks
    Andreas

Leave a Reply

Your email address will not be published. Required fields are marked *