UpdatePanel history

Velký problém se stránkami umožňujícími AJAX je obecně ten, že, jak bylo navrženo, žádná akce nepředstavuje stav ve vašem prohlížeči, což znamená, že nelze použít Back ( Zpět ) či Forward ( Vpřed ) tlačítka tak, aby se do tohoto mezistavu dostal. A protože se nemění ani URL, specifický stav nemůže být ani uložen do záložek a ani se na něj nemůže uživatel dostat prostřednictvím odkazu. V podstatě tato skutečnost omezuje použití AJAXu obecně a obzvláště UpdatePanelu. Naštěstí Microsoft tento problém vyřešil prvkem History. Ten může být umožněn v prvku ScriptManager a v základu pracuje s přidáním informace do URL za znak #, což je normálně většinou používáno pro navigaci nezi různými částmi stejné stránky. Pojďme vytvořit jako příklad stránku, která vám ukáže problém. A až posléze jej opravíme.

<asp:ScriptManager runat="server" ID="MainScriptManager" />

<asp:UpdatePanel runat="server" ID="pnlColorSelect">
<ContentTemplate>
    <asp:DropDownList runat="server" ID="ddlColor" AutoPostBack="true" OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
        <asp:ListItem Value="Red">Red</asp:ListItem>
        <asp:ListItem Value="Blue">Blue</asp:ListItem>
        <asp:ListItem Value="Green">Green</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
    Selected color: <asp:Label runat="server" ID="lblSelectedColor" />
</ContentTemplate>
</asp:UpdatePanel>    

A také potřebujeme v Code Behind metodu k opečování výběru nové barvy.

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    lblSelectedColor.Text = ddlColor.SelectedValue;
    lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColor.SelectedValue);
}

Je to opravdu jednoduchý příklad, takže zkuste spustit stránku a podívat se sám. Když si vyberete novou barvu v dropdown listu, změna se promítne v labelu pod ním a protože je kolem UpdatePanel, není proveden žádný skutečný postback a label je upraven bez znovunatažení stránky. To vše je velice dobré, ale jak můžete vidět, nezáleží na tom, kolikrát změníte barvu, URL se nezmění a ani žádný stav není zaznamenán, výsledkem je tedy jakoby mrtvo po kliku na Back a Forward. Změňme to tím, že provedeme následující: ScriptManager by měl mít vlastnost EnableHistory nastavenou na True a potřebujeme ještě připsat OnNavigate událost takto:

<asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" OnNavigate="MainScriptManager_Navigate" />

A v Code Behind přidáme jeden řádek k události pro náš dropdown list a pak definujeme událost Navigate ke ScriptManageru podle následujícího:

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    lblSelectedColor.Text = ddlColor.SelectedValue;
    lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColor.SelectedValue);
    MainScriptManager.AddHistoryPoint("SelectedColor", ddlColor.SelectedValue);
}

protected void MainScriptManager_Navigate(object sender, HistoryEventArgs e)
{
    string color = e.State["SelectedColor"];
    if (!String.IsNullOrEmpty(color))
    {
        lblSelectedColor.Text = color;
        lblSelectedColor.BackColor = System.Drawing.Color.FromName(color);
    }
}

Zkuste stránka spustit nyní. Pokaždé, když změníte barvu, vidíte změnu URL, ale stále bez opravdového postbacku/znovunačtení stránky, a můžete nyní použít tlačítka Back/Forward v prohlížeči. Také vidíte, že URL v adresové liště můžete zkopírovat do nového okna prohlížeče a při načtení stránky je nyní barva shodná s tou z okopírovaného okna. Funguje to ! Ještě jedna věc vás ale může zlobit a to je skutečnost, že URL vypadá velice záhadně, jako takto:

Default.aspx#&&/wEXAQUNU2VsZWN0ZWRDb2xvcgUFR3JlZW6BwCysI0shYsZauxImdaPIIPEYSA==

Je to proto, že hodnoty jsou šifrovány z bezpečnostních důvodů. Nicméně v mnoha případech hodnoty pro uložení nejsou opravdu tak důležité a můžete chtít přirozeněji vypadající URL namísto toho bezpečného. Toho lze dosáhnout použitím vlastnosti EnableSecureHistoryState v Script manageru takto:

<asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" OnNavigate="MainScriptManager_Navigate" EnableSecureHistoryState="false" />

Nyní při použití stránky vypadá URL namísto toho takto:

Default.aspx#&&SelectedColor=Red

Mnohem jednodušeji, ačkoli to ovšem umožňuje uživateli vložit neočekávané hodnoty, což byste měl mít na mysli a připravit se na to když používáte tento mechanismus.