Animar un control UpdatePanel (C#)

por Christian Wenz

Descargar PDF

El control Animation del Kit de herramientas de control de ASP.NET AJAX no es solo un control, sino un marco completo para agregar animaciones a un control. Para el contenido de un elemento UpdatePanel, existe un control extensor especial que se basa en gran medida en el marco de animación: UpdatePanelAnimation. En este tutorial se muestra cómo configurar una animación de este tipo para un elemento UpdatePanel.

Información general

El control Animation del Kit de herramientas de control de ASP.NET AJAX no es solo un control, sino un marco completo para agregar animaciones a un control. Para el contenido de un elemento UpdatePanel, existe un control extensor especial que se basa en gran medida en el marco de animación: UpdatePanelAnimation. En este tutorial se muestra cómo configurar este tipo de animación para un elemento UpdatePanel.

Pasos

A continuación, como de costumbre, asegúrese de incluir el elemento ScriptManager en la página para que se cargue la biblioteca de ASP.NET AJAX y se pueda usar el Kit de herramientas de control:

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

La animación de este escenario se aplicará a un control web Wizard de ASP.NET que resida en UpdatePanel. Tres pasos (arbitrarios) proporcionan suficientes opciones para desencadenar 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>

El marcado necesario para el control UpdatePanelAnimationExtender es bastante similar al marcado usado para el elemento AnimationExtender. En el atributo TargetControlID proporcionamos el elemento ID del elemento UpdatePanel que se va a animar; dentro del control UpdatePanelAnimationExtender, el elemento <Animations> contiene el marcado XML de las animaciones. Sin embargo, hay una diferencia: la cantidad de eventos y controladores de eventos está limitada en comparación con AnimationExtender. Para UpdatePanels, solo existen dos de ellos:

• <OnUpdated>, cuando se ha actualizado UpdatePanel.
• <OnUpdating>, cuando comienza a actualizarse UpdatePanel.

En este escenario, el nuevo contenido de UpdatePanel (después del postback) se mostrará gradualmente. Este es el marcado necesario para ello:

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

Ahora, cada vez que se produce un postback dentro de UpdatePanel, el nuevo contenido del panel se muestra gradualmente sin problemas.

El siguiente paso del asistente es mostrar gradualmente (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente