Controllo dinamico delle animazioni 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. Può anche interagire con i trigger 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. Può anche interagire con UpdatePanel i trigger.

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 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 UpdatePanel, viene 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, è necessario configurare : UpdatePanelAnimationExtender impostare l'attributo sull'ID TargetControlID del pannello e definire un'animazione all'interno dell'estensione. Dissolvenza in senso, che crea una bella enfasi visiva sull'ora aggiornata. Il markup dell'estensione potrebbe quindi 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 è in dissolvenza (fare clic per visualizzare l'immagine a dimensione intera)

IndietroAvanti