Animar um controle 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. Este tutorial mostra como configurar essa animação para um 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. Este tutorial mostra como configurar essa animação para um UpdatePanel.

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 um ASP.NET Wizard controle da Web que reside em um UpdatePanel. Três etapas (arbitrárias) fornecem opções suficientes para disparar postbacks:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Wizard ID="Wizard1" runat="server">
 <WizardSteps>
 <asp:WizardStep runat="server" StepType="Start" Title="Ready!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Step" Title="Set!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Finish" Title="Go!">
 </asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>
 </ContentTemplate>
</asp:UpdatePanel>

A marcação necessária para o UpdatePanelAnimationExtender controle é bastante semelhante à marcação usada para o AnimationExtender. TargetControlID No atributo que fornecemos o IDUpdatePanel do a ser animado; dentro do UpdatePanelAnimationExtender controle , o elemento mantém a <Animations> marcação XML para a(s) animação(s). No entanto, há uma diferença: a quantidade de eventos e manipuladores de eventos é limitada em comparação com AnimationExtender. Para UpdatePanels, apenas dois deles existem:

• <OnUpdated> quando o UpdatePanel tiver sido atualizado
• <OnUpdating> quando o UpdatePanel começa a atualizar

Nesse cenário, o novo conteúdo do UpdatePanel (após o postback) deverá desaparecer. Essa é a marcação necessária para isso:

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

Agora, sempre que um postback ocorre dentro do UpdatePanel, o novo conteúdo do painel desaparece sem problemas.

A próxima etapa do assistente está desaparecendo (Clique para exibir a imagem em tamanho real)

AnteriorAvançar