Tuesday 29 April 2008

Firefox refresh viewstate updatepanel bug hell!!!

Have you ever noticed that when you click the Refresh button in Firefox, any form values you have filled in on the screen are retained after the refresh? Firefox is automatically altering these values at the end of the request, presumably as a convenience to you, the user. Hence the DOM and the page source are out of sync immediately after the refresh. There is nothing you can do to disable this behaviour within Firefox.

For the average web app, this is a desirable feature. But when combined with the ASP.Net viewstate model, it is anything but desirable, as ASP.Net uses a hidden form field to store serialized viewstate information.

The specific bug I have encountered is when using ASP.Net in conjunction with the built-in validation controls and AJAX. When using validation controls, if viewstate does not match that which last left the server, an error is produced :
The state information is invalid for this page and might be corrupted.

Because Firefox attempts to fill in the current form with current values after a refresh, a new viewstate, representing a fresh page, can be overwritten by an old viewstate (the result of 1 or many AJAX postbacks changing control states since the last "fresh" page load.)

The easiest solution I have found to this problem thus far is to change the form ID with each (non postback) page load. This will fool Firefox into thinking the form is different, and as such all values (including viewstate) will get their values from the incoming HTML rather than the browser's previous state.


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    
If Not Me.IsPostBack Then

        Me.form1.ID = "form" & Date.Now.Ticks().ToString()            

    
End If

End Sub



The only potential problem you could encounter with this solution is where the form ID has been hardwired in your application, either in client side script or server side code. This can be mitigated by always using myForm.clientID when referencing the form's ID. This is good practice in any case.

Hopefully this will help others having the same problems I was.

NOTE!!!
This solution will not work when using a Master Page. Use the solution suggested here instead (change form ID in pageLoaded AJAX event).

For those interested, the offending code is here in System.Web.UI.HtmlControls.HtmlForm.UniqueID: (from Reflector)

Public Overrides ReadOnly Property UniqueID As String
   Get
      If (Me.NamingContainer Is Me.Page) Then
         Return MyBase.UniqueID
      End If
      Return "aspnetForm"
   End Get
End Property

8 comments:

michael sean said...

Lifesaver! Thanks.

Anonymous said...

There is an article explaining the form auto complete functionality here along with a way to switch it off per form:

http://developer.mozilla.org/en/docs/How_to_Turn_Off_Form_Autocompletion

Eddy said...

That's good code, work for me. My life depends on it. Thanks

Nikeeta Vanjara said...

yess, instead keep changing form id, just set autocompletion=off
in form tag which
prevents form data from being cached in session history

Unknown said...

Thanks Nikeeta,

autocompletion="off"
works great!

Timmy O'Tool said...

Saved my life, finally I used autocomple="off" but this post was my entry point. THANKS!

A Passerby said...

This may be old news, but the comments about "autocompletion=off" just saved me a ton of headache. I eventually stumbled here after searching "browser back button corrupts ajax page updatepanel". Thanks a bunch!

Anonymous said...

Everyone loves what you guys tend to be up too.
This sort of clever work and reporting! Keep up the very good works guys I've added you guys
to blogroll.

my web-site; microsoft points generator