Dynamiczne kontrolowanie animacji kontrolki UpdatePanel (VB)
Autor: Christian Wenz
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 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
.
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 UpdatePanel
wyzwalacza 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)