Nokia 630 ZDARMA pro nové majitele MSDN

AJAX a historie stránky

  • Comments 1

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

Attachment: AJAXHistory.zip
Page 1 of 1 (1 items)
Leave a Comment
  • Please add 2 and 4 and type the answer here:
  • Post