AJAX a historie stránky


Při použití asynchronního volání serveru objektem XMLHttpRequest a následném změnění struktury webové stránky pomocí Javascript webový prohlížeč v podstatě neví, že se stránka změnila a neaktivuje tlačítka zpět/vpřed. Princip vytváření historie u AJAX aplikací je relativně jednoduchý. Stačí změnit URL stránky, část označovanou jako hash, při každé změně obsahu a tím se aktivují tlačítka zpět/vpřed. Při procházení historie je pak potřeba stránku zrekonstruovat do příslušné podoby podle URL, resp. hodnoty hash. Jednodušeji se to řekne, než udělá.

Proto ASP.NET AJAX v .NET Framework 3.5 SP1 přichází s podporou vytváření historie. Postup je následující:

1. U objektu ScriptManager je třeba povolit historii

<asp:ScriptManagerEnableHistory=”true”/>

2. U každé změny ve stránce, kterou chceme v historii zachytit, vytvoříme tzv. History point. Jde v podstatě o přidání záznamu klíč-hodnota do vlastnosti hash URL. Nezapomeňte si uložit všechny hodnoty, které budete potřebovat pro rekonstrukci stránky. Následující kód uloží vybranou položku z objektu DropDownList v události SelectedIndexChanged:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
// ukládáme pouze v případě asynchronního volání a jen
// tehdy, když nejde o vyvolání stránky tlačítky zpět/vpřed
if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating)
{
ScriptManager1.AddHistoryPoint(“Category”, DropDownList1.SelectedIndex.ToString());
}
}


3. Vlastní rekonstrukce stránky se provádí v události Navigate objektu ScriptManager:

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
string categoryHistory = e.State[“Category”];
if (!String.IsNullOrEmpty(categoryHistory))
{
// zpracování získané hodnoty
}
}

Ukázkovou aplikaci najdete v příloze k tomuto krátkému tipu. Jako vždy budete potřebovat ukázkovou databázi Northwind a Visual Studio 2008 SP1.


Štěpán

AJAXHistory.zip