Condividi tramite


Animazione di un controllo UpdatePanel (VB)

di Christian Wenz

Scarica il PDF

Il controllo Animazione 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 estensione speciale che si basa fortemente sul framework di animazione: UpdatePanelAnimation. Questa esercitazione illustra come configurare un'animazione di questo tipo per un UpdatePanel.

Panoramica

Il controllo Animazione 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 estensione speciale che si basa fortemente sul framework di animazione: UpdatePanelAnimation. Questa esercitazione illustra come configurare un'animazione di questo tipo per un UpdatePaneloggetto .

Passaggi

Il primo passaggio è il solito per includere nella ScriptManager pagina in modo che la libreria ASP.NET AJAX venga caricata e il Toolkit di controllo può essere usato:

<asp:ScriptManager ID="asm" runat="server" />

L'animazione in questo scenario verrà applicata a un controllo Web ASP.NET Wizard che risiede in un UpdatePaneloggetto . Tre passaggi (arbitrari) forniscono opzioni sufficienti per attivare 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 Nell'attributo fornito l'oggetto ID da UpdatePanel animare; all'interno del UpdatePanelAnimationExtenderTargetControlID controllo, l'elemento <Animations> contiene il markup XML per le animazioni. Tuttavia, esiste una differenza: la quantità di eventi e gestori eventi è limitata rispetto a AnimationExtender. Per UpdatePanels, esistono solo due di essi:

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

In questo scenario, il nuovo contenuto dell'oggetto UpdatePanel (dopo il postback) verrà sadeto. 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 viene sadeto senza problemi.

Il passaggio successivo della procedura guidata viene sbiadito in

Il passaggio della procedura guidata successiva viene sbiadito in (Fare clic per visualizzare l'immagine full-size)