Ajax Hacks

Synchronizing ViewState

One of the things that is integral to ASP.NET is the ViewState. The ViewState is encoded data that saves important data about a page in a special hidden form element called __ViewState. This data includes values that are bound to a grid, drop-down list, or other form element. This information is used to keep the data consistent between page postbacks as well as allow for change events to occur on this page. The problem with this is that with ASP.NET AJAX calls can be made to the server and controls can be updated without control changes being reflected in the ViewState. Thus, control elements can now get out of sync with the ViewState.

Look at the steps of how this can happen:

1. Create a page with a drop-down list box with an ID of ddlName, a client-side button that performs an ASP.NET AJAX callback to the server with an ID of btnGetName, value of "Get Name", an onclick value of GetName(), and a server-side button that will perform a server-side postback, with an ID of btnRoundTrip and text of Round Trip.

2. On the client-side button, create an onclick event that will fill the drop-down list box. An example is shown in Figure 4-9.

3. On the server-side button, create a postback method named btnRoundTrip_Click and perform a postback.

4. When the server-side button is clicked, the page goes back to its initial state. Figure 4-10 shows the initial state and the state after a round trip.

¿ ' View State Page - Microsoft Internet Explorer _

Eile Edit View Favorites lools Help

SI El ; Search Favoritas ©

Address [^j http://localhost:4774/Chapter4/ViewStatePri v] gj Go Lint "

Select Name
[ Get Name
	Frad Smith

.(A Done * j Local Intranet

Figure 4-9

■t;" View State Page - Microsoft Internet Explorer File Edit View Favorites Tools Help

Address http://localhost:4774/Chapter4/ViewStatePri v] ^J Go Lml "

Select Name "_

Done Local intranet

The question with this issue is why does the drop-down list box get reset to its initial state? The reason for this is the ViewState. When a postback occurs, the contents of the drop-down list box are reset to the values that are within the ViewState.

Now that you have seen the problem with the ViewState, the question becomes how to resolve this issue. The following are two possible approaches to resolve this problem:

□ You need to manage the state on your own. This state must be "serialized" on the client, stored in a hidden form element, and then "deserialized" and the data placed into the appropriate client controls. This presents additional problems when saving ViewState information to a location besides the default location on an ASP.NET web page.

□ After performing ASP.NET AJAX operations, a page can perform only ASP.NET AJAX operations. In this scenario, using ASP.NET AJAX becomes a one-way operation on a page level. This is a simple way to resolve the issue; however, it may or may not be workable given the complexity of a page and the functionality required by the user.

Much like the problem with the argument exception discussed previously, the problem with the ViewState is dependent on the control that is being used. When an ASP.NET AJAX operation updates a textbox, the control keeps its value during a postback. So, once again the ViewState issue is dependent on the controls that are used.

0 0