Como adicionar histórico ao browser em ASP.NET AJAX

As aplicações AJAX têm uma desvantagem: o browser não consegue encarregar-se do histórico, por isso as funcionalidades habituais do browser (back, forward, refresh, etc.) não funcionam. Para ultrapassar isto, é necessário adicionar suporte específico para o histórico do browser. Com ASP.NET (a partir da versão 3.5 SP1) isto é bastante simples. Para o fazer é necessário activar a história no ScriptManager e criar um event handler para a navegação.

Vamos pegar no exemplo de uma interface de tabs. Possivelmente têm um update panel e um menu de navegação. Sempre que escolhem uma das opções da tab, é carregado conteúdo usando AJAX.

A primeira coisa a fazer é definir como verdadeiro o valor da propriedade EnableHistory do ScriptManager. Como devem imaginar, isto dá suporte à vossa aplicação para adicionar estados históricos ao browser.

Outra propriedade que podem considerar é EnableSecureHistoryState. Quando definida como verdadeira, esta propriedade encripta a âncora do URL que identifica o estado da vossa aplicação. Se o valor for definido como falso, vão ter uma âncora legível no browser ao invés de uma string incompreensível (e.g. #&&tab=settings, que é legível e pode ser alterada manualmente caso saibam os valores), mas a desvantagem é que é menos seguro e é necessário filtrar o conteúdo antes de usar a string.

Normalmente terão um evento de click no menu e, de acordo com a tab que foi escolhida, será carregado conteúdo diferente. Isto permanece igual, mas agora há um passo extra: é necessário adicionar um ponto histórico ao estado do browser.

protected void menu_TabClick(string tab)
{
    Navigate(tab); // load the appropriate content from this tab
    AddHistoryPoint(tab); // save the current history state
}

Ao adicionar estado histórico é necessário especificar uma chave, um valor (que identifica o estado da aplicação) e opcionalmente um título (para mostrar títulos diferentes conforme o estado).

protected void AddHistoryPoint(string tab)
{
    ScriptManager manager = ScriptManager.GetCurrent(this.Page);
 
    if (manager != null)
    {
        if (manager.IsInAsyncPostBack)
        {
            string title = "Your page title";
            manager.AddHistoryPoint("tab", tab, title);
        }
    }
}

Finalmente, é necessário criar um event handler para o evento Navigate do ScriptManager. Neste evento podem ler o estado da aplicação (usando a chave da vossa designação) e depois efectuar a acção apropriada.

void manager_Navigate(object sender, HistoryEventArgs e)
{
    string tab = e.State["tab"];
    Navigate(tab); // load the appropriate content from this tab
    this.updatePanel.Update();
}

Como podem ver não dá muito trabalho, mas aumenta substancialmente a usabilidade das vossas aplicações.