Controlo Dinâmico das Animações do UpdatePanel (VB)

por Christian Wenz

Descarregar PDF

O controlo de animação no ASP.NET AJAX Control Toolkit não é apenas um controlo, mas toda uma estrutura para adicionar animações a um controlo. Para o conteúdo de um UpdatePanel, existe um extensor especial que depende fortemente da estrutura de animação: UpdatePanelAnimation. Também pode funcionar em conjunto com os gatilhos do UpdatePanel.

Descrição geral

O controlo de animação no ASP.NET AJAX Control Toolkit não é apenas um controlo, mas toda uma estrutura para adicionar animações a um controlo. Para o conteúdo de um UpdatePanel, existe um extensor especial que depende fortemente da estrutura de animação: UpdatePanelAnimation. Pode também funcionar em conjunto com UpdatePanel gatilhos.

Passos

O primeiro passo é, como habitual, incluir o ScriptManager na página para que a ASP.NET biblioteca AJAX seja carregada e o Kit de Ferramentas de Controlo possa ser utilizado:

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

A animação neste cenário será aplicada a um ecrã da hora atual. Esta informação pode ser escrita num rótulo usando o Page_Load() método, ou (para simplificar) é utilizado o seguinte código inline:

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

Além disso, é criado um botão para ativar a atualização da hora:

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

Este código é então colocado na <ContentTemplate> secção de um UpdatePanel elemento. O atributo do UpdateMode painel deve ser definido para "Conditional", pois apenas os gatilhos podem atualizar o conteúdo do painel. Na secção <Triggers> do UpdatePanel, é criado um gatilho de postback assíncrono que está ligado ao evento Click do botão. Assim, se o utilizador clicar no botão, o UpdatePanel é atualizado. Aqui está a marcação do UpdatePanel controlo:

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

Finalmente, deve ser configurado o UpdatePanelAnimationExtender: definir o atributo TargetControlID para o ID do Painel e definir uma animação dentro do extensor. O fade-in faz sentido, o que cria uma boa ênfase visual no tempo atualizado. A marcação do teu extensor pode então ficar assim:

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

Executa o ficheiro no navegador. Sempre que clica no botão, a hora atual é mostrada no painel, sempre a desaparecer durante um segundo.

A hora atual está a desaparecer (Clique para ver a imagem em tamanho real)