Understanding AutoPostBack in ASP.NET

In ASP.NET, AutoPostBack is the mechanism, by which the page will be posted back to the server automatically based on some events in the web controls. In some of the web controls, the property called auto post back, which if set to true, will send the request to the server when an event happens in the control. For example, Dropdown Box (Combo box) web control has the property autopostback. If we set the property to true, when ever user selects a different value in the combo box, and event will be fired in the server. i.e. a request will be send to the server.

Why we need to send a request to the server in this case?

Consider this scenario where the web page is used for entering the user information. The page contains two combo box controls State and Town. When user selects the state, the appropriate towns should be filled in the town combo box which is loaded from the database. For achieving this requirement, we can set the autopostback property of state combo box to true. If we do that we can handle the event in the server side and write code to populate the town combo box with the values from the database.

This is how we use the autopostback property. Here is another example for the autopostback usage with another control which will give much better understanding.

Consider a login page, which contains text fields User ID, User Name and Password fields. User name text box will not be editable. So the requirement will be like this, when user enters the user id and clicks tab, his name should be displayed in the User Name text field. For achieving this we have to make autopostback property of the user id textfield to true and handle the event in the server side, In the event handler, we have to write code to fetch the user name from the database for the user id ,which we will be getting from the user id text box.

How it is happening behind?

Whenever we set autopostback attribute to true in any of the controls, the .net framework will automatically insert few code in to the HTML generated to implement this functionality.

These are the additional items that the framework will inject to the HTML source for implementing autopostback event.

1. A Java script method with name __doPostBack (eventtarget, eventargument)
2. Two Hidden variables with name __EVENTTARGET and __EVENTARGUMENT
3. OnChange JavaScript event to the control

1. __EVENTTARGET and __EVENTARGUMENT

These two variables are added to the HTML source, when ever any autopostback attribute is set to true for any of the web control.

The __EVENTTARGET hidden variable will tell the server which control actually does the server side event firing so that the framework can fire the server side event for that control.

The __ EVENTARGUMENT variable is used to provide additional event information if needed by the application, which can be accessed in the server.

2. __doPostBack (eventtarget, eventargument)

Why the framework is inserting this method to the HTML source, and what it really does. This method is inserted to the HTML source to implement the autopostback functionality. This method will submit the form, when ever called. The two parameters in this method i.e. eventtarget and eventargument do the actual work of selecting the control to fire the event.

Eventtarget will contain the name of the control which initiates the post back event, and event arguments will contain the additional parameters needed for the event.

This method will set the value of the __EVENTTARGET hidden variable with the eventtarget parameter and __ EVENTARGUMENT value with the eventargument parameter.

The next activity is to submit the form, so that in the server side, the framework will check for the name of the control in the __EVENTTARGET hidden variable and will fire the appropriate event.

3. OnChange event.

This event is added by the framework to any of the control where autopostback is set to true, this method will fire the client side OnChange event and calls the __doPostBack event with the name of the control where the OnChange event is happened.

For e.g. If we set autopostback = true to a textfield with id myTextField, then the HTML for the textfield will look like this.


name="myTextField" OnChange="__doPostBack(' myTextField ','')" id=" myTextField

So whenever the OnChange event in client occurs, the doPostBack method will be called with the name of the Textfield as the first parameter.

This name will be set to the __EVENTARGUMENT hidden variable by the __doPostBack JavaScript method and the form will be submitted. In the server side the __EVENTARGUMENT hidden variable will be checked and will take the textfield name and the server side event for the same will be fired.