Dynamiczne kontrolowanie animacji kontrolki UpdatePanel (VB)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Animacja w zestawie narzędzi ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. W przypadku zawartości elementu 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 ASP.NET AJAX Control Toolkit nie tylko jest kontrolką, ale całą strukturą do dodawania animacji do kontrolki. W przypadku zawartości programu UpdatePanelistnieje specjalny rozszerzenie, które opiera się w dużej mierze na strukturze animacji: UpdatePanelAnimation. Może również współpracować z wyzwalaczami UpdatePanel .

Kroki

Pierwszym krokiem jest jak zwykle dołączenie ScriptManager elementu na stronie, 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 (ze względu na prostotę) używany jest następujący kod wbudowany:

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

Ponadto zostanie utworzony 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"wartość , ponieważ tylko wyzwalacze mogą aktualizować zawartość panelu. <Triggers> W sekcji UpdatePanelwyzwalacza wycofywania asynchronicznego jest tworzony i powiązany Click ze 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>

UpdatePanelAnimationExtender Na koniec należy skonfigurować atrybut: ustaw TargetControlID atrybut na identyfikator panelu i zdefiniuj animację w rozszerzeniu. Zanikanie w pewnym sensie, co tworzy ładny nacisk wizualny na zaktualizowany czas. Znacznik rozszerzenia może wtedy 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 jest zanikający (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Poprzednie