Uso de varias ventanas emergentes (C#)

de 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 se activa cualquier otro control. También es posible usar más de un control emergente en una página.

Visión general

El extensor PopupControl del Kit de herramientas de control de AJAX ofrece una manera fácil de desencadenar un elemento emergente cuando se activa cualquier otro control. También es posible usar más de un control emergente en una página.

Pasos

Para activar la funcionalidad de ASP.NET AJAX y control Toolkit, el ScriptManager control debe colocarse en cualquier parte de la página (pero dentro del <form> elemento):

<asp:ScriptManager ID="asm" runat="server" />

A continuación, agregue un panel que actúa como elemento emergente. En el escenario actual, el panel contiene un Calendar control. Para evitar las actualizaciones de página causadas por los postbacks del calendario, el panel se incluye dentro de un control UpdatePanel:

<asp:Panel ID="pnlCalendar" runat="server">
 <asp:UpdatePanel ID="up1" runat="server">
 <ContentTemplate>
 <asp:Calendar ID="c1" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
</asp:Panel>

La página también contiene dos cuadros de texto. Para cada cuadro de texto, la ventana emergente del calendario aparecerá cuando se active el cuadro de texto.

<div>
 Departure date: <asp:TextBox ID="tbDeparture" runat="server" />
 Return date: <asp:TextBox ID="tbReturn" runat="server" />
</div>

Ahora amplíe cada uno de los dos cuadros de texto con PopupControlExtender. El TargetControlID atributo proporciona el identificador del control asociado al extensor. El PopupControlID atributo contiene el identificador del panel emergente. En este caso, ambos extensores muestran el mismo panel, pero también son posibles paneles diferentes.

<ajaxToolkit:PopupControlExtender ID="pce1" runat="server"
 TargetControlID="tbDeparture" PopupControlID="pnlCalendar" Position="Bottom" />
<ajaxToolkit:PopupControlExtender ID="pce2" runat="server"
 TargetControlID="tbReturn" PopupControlID="pnlCalendar" Position="Bottom" />

Ahora, siempre que haga clic dentro de un campo de texto, un calendario aparece debajo del campo, lo que le permite seleccionar una fecha. La introducción de la fecha seleccionada en los cuadros de texto se cubrirá en otro tutorial.

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