Animazione di un controllo UpdatePanel (VB)

di Christian Wenz

Scaricare 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.

Informazioni generali

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 tale animazione per un oggetto UpdatePanel.

Gradi

Il primo passaggio, come di consueto, consiste nell'includere ScriptManager nella pagina in modo che venga caricata la libreria ASP.NET AJAX e che sia possibile usare il 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 è piuttosto simile al markup usato per .AnimationExtender All'interno dell'attributo TargetControlID, forniamo il ID del UpdatePanel da animare; nel controllo UpdatePanelAnimationExtender, l'elemento <Animations> contiene il markup XML per l'animazione. Esiste tuttavia una differenza: il numero di eventi e di gestori di eventi è limitato rispetto a AnimationExtender. Per UpdatePanels, esistono solo due elementi:

• <OnUpdated> quando UpdatePanel è stato aggiornato
• <OnUpdating> quando UpdatePanel inizia l'aggiornamento

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 senza problemi.

Il passaggio successivo della procedura guidata appare gradualmente (Fare clic per visualizzare l'immagine a dimensione intera)