Controlar los postbacks desde un control emergente sin 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. Cuando se produce un postback en este tipo de panel y hay varios paneles en la página, es difícil determinar en qué panel se hizo clic.

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. Cuando se produce un postback en este tipo de panel y hay varios paneles en la página, es difícil determinar en qué panel se hizo clic.

Pasos

Cuando se usa un PopupControl con un postback, pero sin tener un UpdatePanel en la página, el kit de herramientas de control no ofrece una manera de determinar qué elemento de cliente ha desencadenado el elemento emergente que, a su vez, causó el PostBack. Sin embargo, un truco pequeño proporciona una solución alternativa para este escenario.

En primer lugar, esta es la configuración básica: dos cuadros de texto que desencadenan el mismo elemento emergente, un calendario. Dos PopupControlExtenders incorporar cuadros de texto y ventanas emergentes.

<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:Calendar ID="c1" runat="server" OnSelectionChanged="c1_SelectionChanged" />
 </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>

La idea básica es agregar un campo de formulario oculto en el <formelemento de > que contiene el cuadro de texto que inició la ventana emergente:

<input type="hidden" id="tbHidden" runat="server" />

Cuando se carga la página, el código JavaScript agrega un controlador de eventos a ambos cuadros de texto: cada vez que el usuario hace clic en un cuadro de texto, su nombre se escribe en el campo de formulario oculto:

<script type="text/javascript">
 function pageLoad()
 {
 $get("tbDeparture").onclick = saveTextBox;
 $get("tbReturn").onclick = saveTextBox;
 }
 function saveTextBox()
 {
 $get("tbHidden").value = this.id;
 }
</script>

En el código del lado servidor, se debe leer el valor del campo oculto. Puesto que son triviales para manipular campos ocultos de formulario, se requiere un enfoque de lista de permitidos para validar el valor hidden. Una vez identificado el cuadro de texto correcto, se escribe en él la fecha del calendario.

<script runat="server">
 protected void c1_SelectionChanged(object sender, EventArgs e)
 {
 string id = tbHidden.Value;
 if (id == "tbDeparture" || id == "tbReturn")
 {
 TextBox tb = (TextBox)FindControl(id);
 tb.Text = (sender as Calendar).SelectedDate.ToShortDateString();
 }
 }
</script>

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)