PopupControl

Descripción

El PopupControl se puede aplicar a cualquier control Web –al que llamaremos cuerpo- y su funcionalidad consiste en mostrar una pequeña ventana emergente con infomación adicional. Esa ventana emergente –a la que llamaremos popup- puede ser también cualquier control Web (típicamente un panel) y dentro de él podemos ubicar cualquier cosa.

Por ejemplo, imagínese un TextBox en el que cuando se pone el ratón sobre él, emerja un calendario sobre el que podamos elegir una fecha y en el momento la elijamos, ésta se plasme en el TextBox.

Propiedades

• TargetControlID: ID del control cuerpo.
• PopupControlID: ID del control popup.
• Position: posición relativa en la que aparecerá el popup con respecto al cuerpo. Sus valores posibles serán: Left, Right, Top, Bottom, Center.
• CommitProperty: especifica la propiedad del control cuerpo que se modificará con el resultado del popup. Por ejemplo, en el caso de un TextBox, lo normal es que queramos modificar su “value”, aunque también podríamos modificar su “Width”, su “TextMode”... Es opcional.
• CommitScript: función javascript que se ejecutará cuando hayamos dado el resultado del popup.
• OffsetX/OffsetY: distancia horizontal/vertical en pixels que añadiremos o quitaremos a la posición relativa del popup con respecto del cuerpo.

Ejemplo

Aplicaremos el ejemplo propuesto en 3.15.1

PopUp.aspx
Fecha: <asp:TextBox ID="TextBox1" runat="server" Width="80"></asp:TextBox>

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
</center>

</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"
TargetControlID="TextBox1"
PopupControlID="Panel1"
Position="Bottom">
</ajaxToolkit:PopupControlExtender>

PopupControl.aspx.cs
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
}