Controlar postbacks desde un ModalPopup (C#)

por Christian Wenz

Descargar PDF

El control ModalPopup del Kit de herramientas de control de AJAX ofrece una manera sencilla de crear un elemento emergente modal mediante medios del lado cliente. Se debe tener especial cuidado cuando se crea un postback desde el elemento emergente.

Información general

El control ModalPopup del Kit de herramientas de control de AJAX ofrece una manera sencilla de crear un elemento emergente modal mediante medios del lado cliente. Se debe tener especial cuidado cuando se crea un postback desde el elemento emergente.

Pasos

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

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

A continuación, agregue un panel que funcione como elemento emergente modal. Ahí, el usuario puede escribir un nombre y una dirección de correo electrónico. Se usa un botón para cerrar el elemento emergente y guardar la información. Tenga en cuenta que el atributo OnClick se establece para que se produzca un postback cuando se haga clic en este botón:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 Name: <asp:TextBox ID="tbName" runat="server" /><br/>
 Email: <asp:TextBox ID="tbEmail" runat="server" /><br/>
 <asp:Button ID="OKButton" runat="server" Text="Save" OnClick="SaveData" />
</asp:Panel>

La propia página consta de dos etiquetas para exactamente la misma información: nombre y dirección de correo electrónico. Se usa un botón para desencadenar el elemento emergente modal:

<div>
 Contact Information:
 <asp:Label ID="lblName" runat="server" Text="AJAX Fanatic"/><br />
 <asp:Label ID="lblEmail" runat="server" Text="ajax@fanatic"/><br />
 <asp:Button ID="btn1" runat="server" Text="Edit"/>
</div>

Para que aparezca el elemento emergente, agregue el control ModalPopupExtender. Establezca el atributo PopupControlID en el identificador del panel y TargetControlID en el identificador del botón:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlID="btn1" PopupControlID="ModalPanel" />

Ahora, cada vez que se hace clic en el botón Save dentro del elemento emergente modal, se ejecuta el método SaveData() del lado servidor. Ahí, podría guardar los datos especificados en un almacén de datos. Por motivos de simplicidad, los nuevos datos solo se generan en la etiqueta:

protected void SaveData(object sender, EventArgs e)
{
    lblName.Text = HttpUtility.HtmlEncode(tbName.Text);
    lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text);
}

Además, los controles de cuadro de texto dentro del elemento emergente modal deben rellenarse con el nombre y el correo electrónico actuales. Sin embargo, esto solo es necesario cuando no se produce ningún postback. Si hay un postback, la característica viewstate de ASP.NET rellenará automáticamente los cuadros de texto con los valores adecuados.

void Page_Load()
{
    if (!Page.IsPostBack)
    {
        tbName.Text = lblName.Text;
        tbEmail.Text = lblEmail.Text;
    }
}

El elemento emergente modal provoca un postback (haga clic para ver la imagen a tamaño completo).

AnteriorSiguiente