Dynamiczne kontrolowanie animacji UpdatePanel (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrola Animacji w zestawie narzędzi ASP.NET AJAX Control Toolkit to nie tylko kontrolka, ale cała platforma do wzbogacania kontrolek o animacje. Dla zawartości UpdatePanel istnieje specjalny rozszerzenie, które opiera się mocno na strukturze animacji: UpdatePanelAnimation. Może również współdziałać z wyzwalaczami UpdatePanel.

Przegląd

Kontrola Animacji w zestawie narzędzi ASP.NET AJAX Control Toolkit to nie tylko kontrolka, ale cała platforma do wzbogacania kontrolek o animacje. W przypadku zawartości obiektu UpdatePanel istnieje specjalne rozszerzenie, które w dużym stopniu opiera się na strukturze animacji: UpdatePanelAnimation. Może również współpracować z wyzwalaczami UpdatePanel .

Kroki

Pierwszym krokiem jest tradycyjnie dołączenie ScriptManager do strony, tak aby biblioteka ASP.NET AJAX była załadowana i można było używać Toolkit.

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

Animacja w tym scenariuszu zostanie zastosowana do wyświetlania bieżącego czasu. Te informacje można zapisać w etykiecie przy użyciu Page_Load() metody lub (ze względu na prostotę) używany jest następujący kod wbudowany:

<%= DateTime.Now.ToLongTimeString() %>

Ponadto jest tworzony przycisk wyzwalający aktualizowanie czasu:

<asp:Button ID="Button1" runat="server" Text="Update" />

Ten kod jest następnie umieszczany w <ContentTemplate> sekcji UpdatePanel elementu. Atrybut panelu UpdateMode musi być ustawiony na "Conditional", ponieważ tylko wyzwalacze mogą aktualizować zawartość panelu. W sekcji <Triggers>UpdatePanel tworzony jest wyzwalacz asynchronicznego odświeżenia i powiązany ze zdarzeniem przycisku Click. Zatem, jeśli użytkownik kliknie na przycisk, UpdatePanel zostanie odświeżony. Oto znaczniki dla kontrolki UpdatePanel :

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

Na koniec, UpdatePanelAnimationExtender musi zostać skonfigurowany: ustaw atrybut TargetControlID na identyfikator panelu i zdefiniuj animację wewnątrz rozszerzenia. Zanikanie ma sens, co tworzy przyjemny efekt wizualny na zaktualizowany czas. Znacznik rozszerzenia może wyglądać następująco:

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1">
 <Animations>
 <OnUpdated>
 <FadeIn Duration="1.0" Fps="24" />
 </OnUpdated>
 </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

Uruchom plik w przeglądarce. Za każdym razem, gdy klikniesz przycisk, bieżący czas jest wyświetlany w panelu, zawsze zanikając przez czas trwania jednej sekundy.

Bieżący czas zanika (kliknij, aby wyświetlić obraz o pełnym rozmiarze)