Controllo dinamico delle animazioni UpdatePanel (C#)
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)
