Controlar dinamicamente animações UpdatePanel (C#)

por Christian Wenz

Baixar PDF

O controle Animação no kit de ferramentas de controle ASP.NET AJAX 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 em conjunto com gatilhos UpdatePanel.

Visão geral

O controle Animação no kit de ferramentas de controle ASP.NET AJAX 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 em conjunto com UpdatePanel gatilhos.

Etapas

A primeira etapa é, como de costume, 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 nesse cenário será aplicada a uma 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 "Conditional"como , pois somente os gatilhos podem atualizar o conteúdo do painel. <Triggers> Na seção do UpdatePanel, um gatilho de postback assíncrono é criado e vinculado ao Click evento do botão. Portanto, se o usuário clicar no botão, o UpdatePanel será atualizado. Aqui está a marcação para o 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 como a ID do painel e defina uma animação dentro do extensor. Desbotar faz sentido, o que cria uma boa ênfase visual no tempo atualizado. 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)

AnteriorAvançar