Controlar los postbacks desde un control emergente con un UpdatePanel (VB)

por Christian Wenz

Descargar PDF

El extensor PopupControl del Kit de herramientas de control de AJAX ofrece una manera fácil de desencadenar un elemento emergente cuando está activado cualquier otro control. Se debe tener especial cuidado cuando se produce un postback dentro de un elemento emergente de este tipo.

Información general

El extensor PopupControl del Kit de herramientas de control de AJAX ofrece una manera fácil de desencadenar un elemento emergente cuando está activado cualquier otro control. Se debe tener especial cuidado cuando se produce un postback dentro de un elemento emergente de este tipo.

Pasos

Cuando se usa un PopupControl con un postback, un UpdatePanel puede impedir la actualización de la página causada por el postback. El siguiente marcado 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 emergente
  • Un control Panel que servirá como elemento emergente
  • Dentro del panel, un control Calendar está incrustado dentro de un control UpdatePanel
  • Dos controles PopupControlExtender 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 se establece el atributo OnSelectionChanged del control Calendar. Por lo tanto, cuando el usuario selecciona una fecha dentro del calendario, se produce un postback y se ejecuta el método c1_SelectionChanged() del lado servidor. Dentro de ese método, la fecha actual debe recuperarse y volver a escribirse en el cuadro de texto.

La sintaxis para eso es la siguiente: en primer lugar, se debe generar un objeto proxy para PopupControlExtender en la página. El kit de herramientas de control de AJAX ASP.NET ofrece el método GetProxyForCurrentPopup(). El objeto que devuelve este método admite el método Commit() que devuelve un valor al control que desencadenó el elemento emergente (no el control que desencadenó la llamada de método). El siguiente código 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 Sub c1_SelectionChanged(sender As object, e As EventArgs)
 Dim pce As PopupControlExtender = AjaxControlToolkit.PopupControlExtender.GetProxyForCurrentPopup(Page)
 pce.Commit(CType(sender, Calendar).SelectedDate.ToShortDateString())
 End Sub
</script>

Ahora, siempre que haga clic en una fecha de calendario, la fecha seleccionada aparece en el cuadro de texto asociado, creando un control de selector de fecha que se puede encontrar actualmente en un gran número de sitios web.

The Calendar appears when the user clicks into the textbox

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

Clicking on a date puts it in the textbox

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