EventValidation issues with asp.net ajax and FireFox caching causing issues...

Was having some wierd issues with asp.net ajax in firefox. If for example you put a textbox and a button in an updatepanel and put in a value and click the button. Then you hit F5, in IE the value will be gone, but in FireFox the value is still there. This is due to firefox caching input values. The only way to clear that textbox in FF is to do a ctrl + F5. I had an issue in a paged datagrid where if you paged to say page 5, hit F5 it would be at page 1, hit nextpage and it would be back at 5. This had me stumped until I realised that firefox is caching the values and most likely the __VIEWSTATE hidden field is being cached and this is causing the issues. So I added this to my page load:

Response.Cache.SetNoStore()


This made firefox work but this turns off client caching which might not be a good idea. A developer (Steve) at work had a form with a button and textbox which in FF would not remember the value, this was a real WTF moment. I got his code and double checked the differences between them. The only thing different was that in his form he had autocomplete="off" set on the form due to using an autocomplete extender. I added this to my form and presto it was working perfectly. This was ok but you might not want to turn autocomplete off for your whole form so what can we do:

Solution:


Thinking about this I thought of what fields could affect this. Looking at a page you have the following hidden fields:

__VIEWSTATE, __EVENTTARGET, __EVENTARGUMENT, __EVENTVALIDATION.


I decided to try and turn of autocomplete for only these fields using some script at the bottom of my page:

<script>
       function setAutoCompleteOff(id) {
            var elem = document.getElementById(id);
            if(elem) {
                elem.setAttribute('autocomplete', 'off');
            }           
        }
       
        setAutoCompleteOff('__VIEWSTATE');
        setAutoCompleteOff('__EVENTTARGET');
        setAutoCompleteOff('__EVENTARGUMENT');
        setAutoCompleteOff('__EVENTVALIDATION');
</script>


Then I turned autocomplete back on on the form, and gave it a go, and to my supprise it worked perfectly. Now FF was not using sending over the cached values on hitting F5 and was using the original values. This meant my page works fine. One more thing is you can now turn on EnableEventValidation on your page and it seems to work fine now.

To see for yourself setup a test page with some controls in an updatepanel and a link which will output the value of the ViewState for example. Check the value of the viewstate and do some async postbacks that change things. Check the viewstate again, it will be different. Hit F5 and check the viewstate you would expect it to be the same as the viewstate in step 1. But it is not. Add my code changes and do the same, now in step 2 you get the same viewstate as in step 1.



If anyone has any suggestions let me know.

Thanks

Stefan