Controle Dinâmico de Animações do UpdatePanel (VB)

por Christian Wenz

Baixar PDF

O controle de animação no ASP.NET AJAX Control Toolkit não é apenas um componente, 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 juntamente com os gatilhos do UpdatePanel.

Visão geral

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

Steps

A primeira etapa é, normalmente, incluir o ScriptManager na página para que a biblioteca ASP.NET AJAX seja carregada e o Control Toolkit possa ser usado.

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

A animação neste cenário será aplicada à exibição da hora atual. Essas informações podem ser escritas em um rótulo usando o Page_Load() método 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 <ContentTemplate> seção de um UpdatePanel elemento. O atributo do UpdateMode painel deve ser definido como "Conditional", uma vez que somente os gatilhos podem atualizar o conteúdo do painel. Na seção <Triggers>, um gatilho de postback assíncrono é criado e vinculado ao evento Click do botão UpdatePanel. Portanto, se o usuário clicar no botão, o UpdatePanel será atualizado. Aqui está a marcação do UpdatePanel controle:

<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 TargetControlID atributo para a ID do painel e defina uma animação dentro do extensor. O desvanecimento faz sentido, o que cria uma boa ênfase visual na hora atualizada. A marcação do extensor pode ter esta 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ê clica no botão, a hora atual é mostrada no painel, sempre desaparecendo durante um segundo.

A hora atual está desaparecendo (Clique para exibir a imagem em tamanho real)