Controllo dinamico delle animazioni 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. Può anche funzionare insieme ai trigger 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. Può anche funzionare insieme ai trigger di 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 una visualizzazione dell'ora corrente. Queste informazioni possono essere scritte in un'etichetta usando il Page_Load() metodo o ,per semplicità, viene usato il codice inline seguente:

<%= DateTime.Now.ToLongTimeString() %>

Inoltre, viene creato un pulsante per attivare l'aggiornamento dell'ora:

<asp:Button ID="Button1" runat="server" Text="Update" />

Questo codice viene quindi inserito nella <ContentTemplate> sezione di un UpdatePanel elemento . L'attributo del UpdateMode pannello deve essere impostato su "Conditional", perché solo i trigger possono aggiornare il contenuto del pannello. <Triggers> Nella sezione di UpdatePanelviene creato un trigger di postback asincrono e associato all'evento Click del pulsante. Pertanto, se l'utente fa clic sul pulsante, l'oggetto UpdatePanel viene aggiornato. Ecco il markup per il UpdatePanel controllo:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

Infine, UpdatePanelAnimationExtender deve essere configurato: impostare l'attributo TargetControlID sull'ID del pannello e definire un'animazione all'interno dell'extender. L'effetto di dissolvenza ha senso, il quale crea una bella enfasi visiva sull'ora aggiornata. Il markup dell'extender potrebbe essere simile al seguente:

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

Eseguire il file nel browser. Ogni volta che si fa clic sul pulsante, l'ora corrente viene visualizzata nel pannello, dissolvendo sempre per la durata di un secondo.

L'ora corrente sta svanendo (fare clic per visualizzare l'immagine a dimensione intera)