Controlar dinámicamente las animaciones UpdatePanel (VB)

por Christian Wenz

Descargar código o Descargar PDF

El control de animación de ASP.NET AJAX control Toolkit no es solo un control, sino un marco de trabajo completo para agregar animaciones a un control. Para el contenido de un UpdatePanel, existe un extensor especial que se basa en gran medida en el marco de animación: UpdatePanelAnimation. También puede funcionar junto con los desencadenadores UpdatePanel.

Información general

El control de animación de ASP.NET AJAX control Toolkit no es solo un control, sino un marco de trabajo completo para agregar animaciones a un control. Para el contenido de un UpdatePanel, existe un extensor especial que se basa en gran medida en el marco de animación: UpdatePanelAnimation. También puede trabajar junto con desencadenadores UpdatePanel.

Pasos

El primer paso es lo habitual para incluir el ScriptManager en la página para que se cargue la biblioteca de AJAX de ASP.NET 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 simplicidad) se usa el siguiente código en línea:

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

Además, se crea un botón para desencadenar la actualización del tiempo:

<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 UpdatePanel, se crea un desencadenador de postback asincrónico y se vincula al evento Click del botón. Por lo tanto, si el usuario hace clic en el botón, se actualiza el 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 la UpdatePanelAnimationExtender: establezca el atributo TargetControlID en el identificador del panel y defina una animación dentro del objeto extender. La difuminación en tiene sentido, lo que crea un atractivo visual interesante en la hora actualizada. El marcado del extensor puede tener el siguiente 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 se hace clic en el botón, la hora actual se muestra en el panel, siempre atenuada durante un segundo.

se difumina la hora actual

La hora actual se difumina en (haga clic para ver la imagen de tamaño completo)