Dynamické řízení animací ovládacím prvkem UpdatePanel (C#)
Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Pro obsah UpdatePanel existuje speciální extender, který do značné míry závisí na architektuře animace: UpdatePanelAnimation. Může také spolupracovat s triggery UpdatePanel.
Přehled
Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. Pro obsah objektu UpdatePanelexistuje speciální extender, který do značné míry závisí na architektuře animace: UpdatePanelAnimation. Může také spolupracovat s aktivačními UpdatePanel událostmi.
Postup
Prvním krokem je jako obvykle zahrnout ScriptManager na stránku, aby se načetla knihovna AJAX ASP.NET a bylo možné použít sadu control toolkit:
<asp:ScriptManager ID="asm" runat="server" />
Animace v tomto scénáři se použije na zobrazení aktuálního času. Tyto informace lze do popisku zapsat pomocí Page_Load() metody nebo (pro zjednodušení) se použije následující vložený kód:
<%= DateTime.Now.ToLongTimeString() %>
Vytvoří se také tlačítko pro aktivaci aktualizace času:
<asp:Button ID="Button1" runat="server" Text="Update" />
Tento kód se pak vloží do <ContentTemplate> části elementu UpdatePanel . Atribut panelu UpdateMode musí být nastavený na "Conditional", protože obsah panelu můžou aktualizovat pouze triggery. <Triggers> V části UpdatePanelse vytvoří asynchronní aktivační událost postbacku, která je svázaná s Click událostí tlačítka. Pokud tedy uživatel klikne na tlačítko, UpdatePanel aktualizuje se. Tady je kód UpdatePanel ovládacího prvku:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%= DateTime.Now.ToLongTimeString() %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
UpdatePanelAnimationExtender Nakonec je nutné nakonfigurovat: Nastavte TargetControlID atribut na ID panelu a definujte animaci v extenderu. Slábnutí dává smysl, což vytváří pěkný vizuální důraz na aktualizovaný čas. Vaše revize extenderu pak může vypadat takto:
<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<FadeIn Duration="1.0" Fps="24" />
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
Spusťte soubor v prohlížeči. Kdykoli kliknete na tlačítko, zobrazí se na panelu aktuální čas, který vždy po dobu jedné sekundy upadne.
Aktuální čas se blíží (kliknutím zobrazíte obrázek v plné velikosti).
