Controlar los postbacks desde un control emergente con un UpdatePanel (C#)

por Christian Wenz

Descargar código o Descargar PDF

El extensor PopupControl en el kit de herramientas de control de AJAX ofrece una manera sencilla de desencadenar un elemento emergente cuando se activa cualquier otro control. Se debe tener especial cuidado cuando se produce un postback dentro de este tipo de elemento emergente.

Información general

El extensor PopupControl en el kit de herramientas de control de AJAX ofrece una manera sencilla de desencadenar un elemento emergente cuando se activa cualquier otro control. Se debe tener especial cuidado cuando se produce un postback dentro de este tipo de elemento emergente.

Pasos

Cuando se usa un PopupControl con un postback, una UpdatePanel puede evitar la actualización de la página causada por el PostBack. El marcado siguiente define un par de elementos importantes:

  • Un control ScriptManager para que el kit de herramientas de control de AJAX de ASP.NET funcione
  • Dos controles TextBox que desencadenarán un elemento popup
  • Control Panel que servirá como elemento emergente.
  • Dentro del panel, se inserta un control Calendar dentro de un control UpdatePanel
  • Dos PopupControlExtender controles que asignan el panel a los cuadros de texto
<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
 </div>
 <asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" 
 OnSelectionChanged="c1_SelectionChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </asp:Panel>
 <ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
 <ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />
</form>

Tenga en cuenta que el atributo OnSelectionChanged del control Calendar está establecido. Por tanto, cuando el usuario selecciona una fecha en el calendario, se produce un postback y se ejecuta el método del servidor c1_SelectionChanged(). Dentro de ese método, la fecha actual se debe recuperar y volver a escribir en el cuadro de texto.

La sintaxis de es la siguiente: en primer lugar, se debe generar un objeto de proxy para el PopupControlExtender en la página. ASP.NET AJAX control Toolkit ofrece el método GetProxyForCurrentPopup(). El objeto que devuelve este método admite el método Commit() que envía un valor al control que desencadenó el elemento emergente (no el control que desencadenó la llamada al método). El código siguiente proporciona la fecha seleccionada como argumento para el método Commit(), lo que hace que el código vuelva a escribir la fecha seleccionada en el cuadro de texto:

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 PopupControlExtender pce = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page);
 pce.Commit((sender as Calendar).SelectedDate.ToShortDateString());
 }
</script>

Ahora, cada vez que haga clic en una fecha de calendario, la fecha seleccionada aparecerá en el cuadro de texto asociado y creará un control selector de fecha que se puede encontrar actualmente en muchos sitios Web.

el calendario aparece cuando el usuario hace clic en el cuadro de texto

El calendario aparece cuando el usuario hace clic en el cuadro de texto (haga clic para ver la imagen de tamaño completo)

al hacer clic en una fecha, la coloca en el cuadro de texto

Al hacer clic en una fecha, se coloca en el cuadro de texto (haga clic para ver la imagen de tamaño completo)