Animazione di un controllo UpdatePanel (C#)
Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. Per il contenuto di un UpdatePanel, esiste un extender speciale che si basa principalmente sul framework di animazione: UpdatePanelAnimation. Questa esercitazione illustra come configurare un'animazione di questo tipo per updatePanel.
Panoramica
Il controllo Animation nel ASP.NET AJAX Control Toolkit non è solo un controllo, ma un intero framework per aggiungere animazioni a un controllo. Per il contenuto di un UpdatePanel
oggetto , esiste un extender speciale che si basa principalmente sul framework di animazione: UpdatePanelAnimation
. Questa esercitazione illustra come configurare un'animazione di questo tipo per un oggetto UpdatePanel
.
Passaggi
Il primo passaggio è il solito includere nella ScriptManager
pagina in modo che venga caricata la libreria ASP.NET AJAX e che sia possibile usare Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
L'animazione in questo scenario verrà applicata a un controllo Web ASP.NET Wizard
che risiede in un oggetto UpdatePanel
. Tre passaggi (arbitrari) forniscono opzioni sufficienti per attivare i postback:
<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>
Il markup necessario per il UpdatePanelAnimationExtender
controllo è molto simile al markup usato per .AnimationExtender
Nell'attributo viene fornito l'oggetto TargetControlID
ID
dell'oggetto UpdatePanel
da animare, all'interno del UpdatePanelAnimationExtender
controllo l'elemento <Animations>
contiene markup XML per le animazioni. Esiste tuttavia una differenza: la quantità di eventi e gestori eventi è limitata rispetto a AnimationExtender
. Per UpdatePanels
, esistono solo due elementi:
<OnUpdated>
quando UpdatePanel è stato aggiornato<OnUpdating>
all'avvio dell'aggiornamento di UpdatePanel
In questo scenario, il nuovo contenuto di UpdatePanel
(dopo il postback) svanirà. Questo è il markup necessario per questo:
<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server"
TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<FadeIn Duration="1.0" Fps="24" />
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
Ora ogni volta che si verifica un postback all'interno di UpdatePanel, il nuovo contenuto del pannello si dissolve in modo uniforme.
Il passaggio successivo della procedura guidata si dissolve in (Fare clic per visualizzare l'immagine a dimensione intera)