«
»

Utilizando múltiples controles UpdateProgress en una sola página


Si tienes dos o más controles UpdatePanel que quieres que se actualicen por separado, quizás también quieras tener diferentes indicadores “un momento por favor…” para cada uno de ellos, con la finalidad de que se muestren en diferentes posiciones.

Antes de darte la solución considera este código:

Clic para mostrar texto plano
ASP:
  1. <asp:ScriptManager ID="ScriptManager1" runat="server" />
  2.     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  3.         <Triggers>
  4.             <asp:AsyncPostBackTrigger ControlID="Boton1" EventName="Click" />
  5.         </Triggers>
  6.         <ContentTemplate>
  7.             <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
  8.                 <ProgressTemplate>
  9.                     Un momento por favor...
  10.                 </ProgressTemplate>
  11.             </asp:UpdateProgress>
  12.             <asp:Button ID="Boton1" runat="server" Text="Botón 1" />
  13.             <asp:Label ID="Hora1" runat="server" Text="<br />"></asp:Label>
  14.         </ContentTemplate>
  15.     </asp:UpdatePanel>
  16.     <br />
  17.     <br />
  18.     <asp:UpdatePanel ID="UpdatePanel2" runat="server">
  19.         <Triggers>
  20.             <asp:AsyncPostBackTrigger ControlID="Boton2" EventName="Click" />
  21.         </Triggers>
  22.         <ContentTemplate>
  23.             <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="0">
  24.                 <ProgressTemplate>
  25.                     Un momento por favor...
  26.                 </ProgressTemplate>
  27.             </asp:UpdateProgress>
  28.             <asp:Button ID="Boton2" runat="server" Text="Botón 2" />
  29.             <asp:Label ID="Hora2" runat="server" Text=""></asp:Label>
  30.         </ContentTemplate>
  31.     </asp:UpdatePanel>

Clic para mostrar texto plano
VB.NET:
  1. Protected Sub Boton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Boton1.Click
  2.         Threading.Thread.Sleep(1000)
  3.         Hora1.Text = "La hora es " & Now.ToString
  4.     End Sub
  5.  
  6.     Protected Sub Boton2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Boton2.Click
  7.         Threading.Thread.Sleep(1000)
  8.         Hora2.Text = "La hora es " & Now.ToString
  9.     End Sub

El cual genera lo siguiente:

image

Y al hacer clic en el botón 1 (o en el 2) ocurre lo siguiente:

image

Los dos controles UpdateProgress aparecieron porque es su comportamiento natural cuando se hace un postBack. Obviamente queremos que cada uno aparezca únicamente cuando se haga clic en su botón correspondiente.

Para hacerlo, utiliza la propiedad AssociatedUpdatePanelID del control UpdateProgress, de tal forma que tu código quede así:

Clic para mostrar texto plano
ASP:
  1. <asp:ScriptManager ID="ScriptManager1" runat="server" />
  2.     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  3.         <Triggers>
  4.             <asp:AsyncPostBackTrigger ControlID="Boton1" EventName="Click" />
  5.         </Triggers>
  6.         <ContentTemplate>
  7.             <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
  8.                 <ProgressTemplate>
  9.                     Un momento por favor...
  10.                 </ProgressTemplate>
  11.             </asp:UpdateProgress>
  12.             <asp:Button ID="Boton1" runat="server" Text="Botón 1" />
  13.             <asp:Label ID="Hora1" runat="server" Text="<br />"></asp:Label>
  14.         </ContentTemplate>
  15.     </asp:UpdatePanel>
  16.     <br />
  17.     <br />
  18.     <asp:UpdatePanel ID="UpdatePanel2" runat="server">
  19.         <Triggers>
  20.             <asp:AsyncPostBackTrigger ControlID="Boton2" EventName="Click" />
  21.         </Triggers>
  22.         <ContentTemplate>
  23.             <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel2">
  24.                 <ProgressTemplate>
  25.                     Un momento por favor...
  26.                 </ProgressTemplate>
  27.             </asp:UpdateProgress>
  28.             <asp:Button ID="Boton2" runat="server" Text="Botón 2" />
  29.             <asp:Label ID="Hora2" runat="server" Text=""></asp:Label>
  30.         </ContentTemplate>
  31.     </asp:UpdatePanel>

El código VB quedaría igual

De esta forma al oprimir el primer botón ocurrirá esto:

image

Y al oprimir el segundo botón verás esto:

image

De esta forma puedes colocar varios indicadores para cada una de las partes en las que dividas visualmente tu página.

Esta entrada fue escrita el 12 Noviembre 2010, 11:32 y archivada en ASP.NET 2.0 / 3.5, Ajax. Puedes seguir las respuestas en esta entrada a través de RSS 2.0. Puede dejar una respuesta, o hacer trackback desde su propio sitio.

  1. No hay Comentarios
(No será publicado)