Controlar dinamicamente animações UpdatePanel (VB)

por Christian Wenz

Baixar código ou baixar PDF

O controle de animação no ASP.NET AJAX Control Toolkit não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Para o conteúdo de um UpdatePanel, existe um extensor especial que depende muito da estrutura de animação: UpdatePanelAnimation. Ele também pode trabalhar junto com gatilhos UpdatePanel.

Visão geral

O controle de animação no ASP.NET AJAX Control Toolkit não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Para o conteúdo de um UpdatePanel, existe um extensor especial que depende muito da estrutura de animação: UpdatePanelAnimation. Ele também pode trabalhar junto com UpdatePanel gatilhos.

Etapas

A primeira etapa é normalmente para incluir o ScriptManager na página para que a biblioteca ASP.NET AJAX seja carregada e o kit de ferramentas de controle possa ser usado:

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

A animação neste cenário será aplicada a uma exibição da hora atual. Essas informações podem ser gravadas em um rótulo usando o método Page_Load() ou (para simplificar) o seguinte código embutido é usado:

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

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

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

Em seguida, esse código é colocado na seção <ContentTemplate> de um elemento UpdatePanel. O atributo de UpdateMode do painel deve ser definido como "Conditional", já que somente gatilhos podem atualizar o conteúdo do painel. Na seção <Triggers> do UpdatePanel, um gatilho de postback assíncrono é criado e vinculado ao evento Click do botão. Portanto, se o usuário clicar no botão, a UpdatePanel será atualizada. Aqui está a marcação para o controle de UpdatePanel:

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

Por fim, o UpdatePanelAnimationExtender deve ser configurado: defina o atributo TargetControlID para a ID do painel e defina uma animação dentro do extensor. O esmaecimento faz sentido, o que cria uma boa ênfase visual no tempo atualizado. A marcação do extensor pode ter a seguinte aparência:

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

Execute o arquivo no navegador. Sempre que você clicar no botão, a hora atual será mostrada no painel, sempre esmaecida pela duração de um segundo.

a hora atual está esmaecida

A hora atual está esmaecida (clique para exibir a imagem em tamanho normal)