Controlar dinamicamente animações UpdatePanel (C#)
por Christian Wenz
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)
