Udostępnij za pośrednictwem

Animowanie kontrolki UpdatePanel (C#)

  • Artykuł

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. W tym samouczku pokazano, jak skonfigurować taką animację dla elementu 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. W tym samouczku pokazano, jak skonfigurować taką animację dla elementu 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 kontrolki internetowej ASP.NET Wizard znajdującej się w obiekcie UpdatePanel. Trzy (dowolne) kroki zapewniają wystarczającą liczbę opcji wyzwalania pozwów zwrotnych:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Wizard ID="Wizard1" runat="server">
 <WizardSteps>
 <asp:WizardStep runat="server" StepType="Start" Title="Ready!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Step" Title="Set!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Finish" Title="Go!">
 </asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>
 </ContentTemplate>
</asp:UpdatePanel>

Znaczniki niezbędne dla kontrolki UpdatePanelAnimationExtender są dość podobne do znaczników używanych dla obiektu AnimationExtender. W atrybucie udostępniamy UpdatePanelID element do animowania; w kontrolce <Animations>UpdatePanelAnimationExtender element przechowuje znaczniki XML TargetControlID dla animacji. Istnieje jednak jedna różnica: ilość zdarzeń i procedur obsługi zdarzeń jest ograniczona w porównaniu do AnimationExtender. W przypadku UpdatePanelsprogramu istnieją tylko dwa z nich:

  • <OnUpdated> gdy element UpdatePanel został zaktualizowany
  • <OnUpdating> po rozpoczęciu aktualizowania elementu UpdatePanel

W tym scenariuszu nowa zawartość UpdatePanel (po wycofaniu) zanika. Jest to niezbędny znacznik dla tego:

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

Teraz, gdy po powrocie zwrotne nastąpi w elemecie UpdatePanel, nowa zawartość panelu zanika bezproblemowo.

Następnym krokiem kreatora jest zanikanie

Następnym krokiem kreatora jest zanikanie (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej