Wednesday, March 19, 2008

UpdatePanel with IE back button

This is yet another Ajax problem I have encountered.

I have a data listing page contains a gridview which has a ButtonField column which has a CommandName="edit". In code behind where I handle the OnRowEditing GridViewEditEvent, I have a Response.Redirect in this OnRowEditing Sub to redirect to the detail page. So if you run the page, and view the source, the edit button will be wrapped with a __doPostBack js function.

Now I have the gridview inside the updatepanel, the gridview has paging enabled. When I clicked the page 4, and on page 4 of the gridview I clicked the edit button on any row, it redirect me to the detail page, that's fine. But when I click the IE7 back button, since the browser caches the page content, it will go back to where I was which is the page 4 of the gridview. But actually, it didn't. It went to page 1 of the gridview.

So I put a breakpoint in the page_load of the page, and when I click the back button, the page_load was hit which is not normally the case. Now if you click any edit button on page 1, if will throw you an exception saying "Invalid Callback Or Postback Argument". That's reasonable since the content posted back(page 1) is not the content it suppose to be (page 4).

Since the page that is dynamically created will not automatically register with the history engine of the browser, the back button will not work in this case.

There are fixes available for this problem:

Back Button Support for Atlas UpdatePanels

UpdateControls: UpdateHistory and AnimatedUpdatePanel

But I personally don't want to use it since it is not the Microsoft official solutions.

blog comments powered by Disqus