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

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

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

Pasos

Cuando se usa PopupControl con un postback, pero sin tener un elemento UpdatePanel en la página, el Kit de herramientas de control no ofrece una manera de determinar qué elemento cliente ha desencadenado el elemento emergente que, a su vez, provocó el postback. Sin embargo, un pequeño truco 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 reúnen cuadros de texto y elementos 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 elemento <form> que contiene el cuadro de texto que inició el elemento 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. Dado que los campos de formulario ocultos son triviales para manipular, se requiere un enfoque de lista segura para validar el valor oculto. Una vez identificado el cuadro de texto correcto, la fecha del calendario se escribe en él.

<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 (haga clic para ver la imagen a tamaño completo)

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

AnteriorSiguiente