Udostępnij za pośrednictwem

Dynamiczne kontrolowanie animacji kontrolki UpdatePanel (C#)

  • Artykuł

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie animacji do kontrolki. Dla zawartości UpdatePanel istnieje specjalny rozszerzenie, które opiera się w dużej mierze na strukturze animacji: UpdatePanelAnimation. Może również współpracować z wyzwalaczami UpdatePanel.

Omówienie

Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie animacji do kontrolki. W przypadku zawartości obiektu UpdatePanelistnieje specjalny rozszerzenie, które w dużym stopniu opiera się na strukturze animacji: UpdatePanelAnimation. Może również współpracować z wyzwalaczami UpdatePanel .

Kroki

Pierwszy krok jest jak zwykle dołączany ScriptManager do strony, tak aby biblioteka ASP.NET AJAX była ładowana i można użyć zestawu narzędzi Control 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 (dla uproszczenia) jest używany 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. <Triggers> W sekcji UpdatePanelwyzwalacza asynchronicznego ogłaszania zwrotnego jest tworzony i powiązany ze Click zdarzeniem przycisku. W związku z tym, jeśli użytkownik kliknie 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 należy skonfigurować element UpdatePanelAnimationExtender : ustaw TargetControlID atrybut na identyfikator panelu i zdefiniuj animację w rozszerzeniu. Zanikanie w ma sens, co tworzy ładny nacisk wizualny na zaktualizowany czas. Znaczniki rozszerzenia mogą 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żąca godzina jest wyświetlana w panelu, zawsze zanikając przez czas trwania jednej sekundy.

Bieżąca godzina zanika

Bieżący czas jest zanikający (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

WsteczDalej