Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Nikhil recently posted a nice blog post that includes a new ASP.NET AJAX-enabled control called "HistoryControl".  When added to a page it allows developers to programmatically add logical views into a browser's history list.  This enables you to make AJAX enabled sites much more useful, and to follow the standard back/forward navigation paradigm that traditional web apps follow.

For example, the below code could be written by a developer in response to a selection change within a list to to add the previous list selection to the browser's history via Nikhil's "HistoryControl":

private void ContentList_SelectedIndexChanged(object sender, EventArgs e) {
   history.AddEntry(contentList.SelectedIndex.ToString()
;
}

Once you add entries into the history control, the back/forward button will be enabled in the browser.  Nikhil's history control then exposes a "Navigate" event which fires when you press the forward or back button in the browser, and this event then exposes the identifier entry provided before when the view was added into the browser history.  You can then use this to restore the page to whatever state it should be in to match the previous history item and update the page:

private void HistoryControl_Navigate(object sender, HistoryEventArgs e) {

    
int selectedIndex 0;

    if 
(String.IsNullOrEmpty(e.Identifier) == false) {
        selectedIndex 
Int32.Parse(e.Identifier);
    
}

    
// Update the content being displayed in the page
    
contentList.SelectedIndex selectedIndex;

    
// Mark the update panels as needing an update
    
mainUpdatePanel.Update();
}

And now your end-users get forward/back button history navigation working with AJAX.  You can download the code for Nikhil's history control and start using it here.

Hope this helps,

Scott

Published Thursday, September 14, 2006 12:25 PM by ScottGu

Comments

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Thursday, September 14, 2006 5:39 PM by deda
Where did you find that guy Nikhil? :)

# Section 508 Compliance ?????????????

Thursday, September 14, 2006 6:26 PM by Ravi
Is Atlas Section 508 compliance ?????????

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Thursday, September 14, 2006 7:41 PM by J. Michael Palermo IV
Thanks for another Tip/Trick. And not one reference to "Atlas" :-)

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Thursday, September 14, 2006 9:12 PM by Sunny Nagi
Hey Scott, Did you checked out http://pragmaticobjects.org/index.php?itemid=15

# Link Listing - September 14, 2006

Thursday, September 14, 2006 11:30 PM by Christopher Steen
Download Firebug and view your XMLHttpRequests [Via: ] Mainsoft Releases Grasshopper 2.0 Preview [Via:...

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Friday, September 15, 2006 1:36 AM by vikram
Good trick very useful

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Friday, September 15, 2006 11:35 AM by Granville Barnett
This is a very welcome piece of functionality :-)

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Friday, September 15, 2006 1:28 PM by Josh
Is this going to be included in the next release of ASP.NET Ajax?

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Saturday, September 16, 2006 11:54 AM by Mike Taylor
How can i get this to work with refreshes as well. Currently, when the user refreshes the page, the data is lost.

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Wednesday, September 20, 2006 1:54 PM by Pieter Siegers
Hi guys, why do you need a back/forward button? IMO a pure AJAX web app should work like a client-server app, so no need for it. In other words, if the web app just has one page and pure AJAX is being used to interact with user actions then there's no change in the location property - the back/forward buttons will never turn green.

# Back Button Support for Atlas UpdatePanels

Friday, September 22, 2006 5:13 AM by ナオキにASP.NET(仮)

nikhilk.net と Atlas and more と ScottGu's Blog からです。 Back Button Support for Atlas UpdatePanels ( nikhilk.net

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Thursday, September 28, 2006 9:38 AM by Kieran
Hi everyone, Does this only work with Atlas or will this work with any ajax application? Is this a replacement for something like the really simple history framework or are they not similar implementations? Thanks!

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Thursday, September 28, 2006 10:18 AM by ScottGu

Hi Kieran,

Nikhil's solution is focued on enabling forward/back support for Atlas.  But you could enable a similar technique with other AJAX implementations as well (he provides full source code for it).

Hope this helps,

Scott

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Friday, October 27, 2006 10:58 AM by Steve Roberts
I had Nikhil's history control working with my Atlas UpdatePanel's, but have since updated to the new Ajax ASP.NET and now the CS file fails to build. Do you know if this control is still required in the new UpdatePanel and if so, what I need to do to get it building again? Thanks, Steve P.S. specifically it fails on the scriptManager.RegisterScriptReference, which no longer seems to be supported.

# re: Tip/Trick: Enabling Back/Forward-Button Support for ASP.NET AJAX UpdatePanel

Saturday, October 28, 2006 12:08 PM by ScottGu

Hi Steve,

I'm not sure whether Nikhil has updated his sample yet.  Have you tried leaving a comment on his blog to see what he says?

Thanks,

Scott

# 技巧和诀窍:在ASP.NET AJAX UpdatePanel中实现对后退/前进按钮的支持

Friday, November 03, 2006 4:06 AM by scottgu

Nikhil最近写了一个好帖子,是关于一个叫做HistoryControl的支持AJAX的新ASP.NET 控件的。把它加到页面上后,允许开发人员用编程手段往浏览器的历史记录里添加逻辑视图(logical view)。这将使得支持AJAX的网站更加有用,而且遵循传统web应用所遵循的标准的前进/后退的导航惯例。

# Nikhil's WebDevHelper Utility and ASP.NET AJAX Support

Tuesday, November 14, 2006 1:24 AM by ScottGu's Blog

If you aren't subscribed yet to Nikhil's blog, you really should visit it and subscribe immediately.

# Nikhil's WebDevHelper Utility and ASP.NET AJAX Support

Tuesday, November 14, 2006 1:57 AM by Mirror blog entries from the industry

If you aren't subscribed yet to Nikhil's blog, you really should visit it and subscribe immediately .

# iframe o AJAX?

Monday, June 25, 2007 5:03 AM by SergioTarrillo's RichWeblog

Mientras algunos frikis se compraban un nuevo equipo , o no tan nuevos , participe en unas horas de consultoría

# iframe o AJAX? « Alexander Jim??nez

Friday, July 13, 2007 2:39 PM by iframe o AJAX? « Alexander Jim??nez

Pingback from  iframe o AJAX?  « Alexander Jim??nez

# Enable AJAX history in SharePoint Webpart pages «

Friday, July 17, 2009 4:54 AM by Enable AJAX history in SharePoint Webpart pages «

Pingback from  Enable AJAX history in SharePoint Webpart pages «

# Back Button Support for ASP.NET AJAX « Travis J. Gosselin

Monday, November 30, 2009 5:08 PM by Back Button Support for ASP.NET AJAX « Travis J. Gosselin

Pingback from  Back Button Support for ASP.NET AJAX « Travis J. Gosselin