Controlar dinámicamente las animaciones UpdatePanel (VB)

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. También puede funcionar junto con desencadenadores 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. También puede funcionar junto con desencadenadores UpdatePanel.

Pasos

A continuación, como de costumbre, el primer paso es incluir 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 una presentación de la hora actual. Esta información se puede escribir en una etiqueta mediante el método Page_Load(), o (por motivos de simplicidad) se usa el código insertado siguiente:

<%= DateTime.Now.ToLongTimeString() %>

Además, se crea un botón para desencadenar la actualización de la hora:

<asp:Button ID="Button1" runat="server" Text="Update" />

A continuación, este código se coloca en la sección <ContentTemplate> de un elemento UpdatePanel. El atributo UpdateMode del panel debe establecerse en "Conditional", ya que solo los desencadenadores pueden actualizar el contenido del panel. En la sección <Triggers> del elemento UpdatePanel, se crea un desencadenador de postback asincrónico y está vinculado al evento Click del botón. Por lo tanto, si el usuario hace clic en el botón, se actualiza el elemento UpdatePanel. Este es el marcado del control UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

Por último, se debe configurar el elemento UpdatePanelAnimationExtender: establezca el atributo TargetControlID en el identificador del panel y defina una animación dentro del extensor. El desvanecimiento tiene sentido, ya que crea un bonito énfasis visual en la hora actualizada. El marcado del extensor puede tener este aspecto:

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

Ejecute el archivo en el explorador. Siempre que haga clic en el botón, la hora actual se muestra en el panel y se desvanece siempre en un segundo.

La hora actual se muestra gradualmente (haga clic para ver la imagen a tamaño completo).

Anterior