Animazione di un controllo UpdatePanel (C#)

di Christian Wenz

Scarica il PDF

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 UpdatePaneloggetto , 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 TargetControlIDID 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)

IndietroAvanti