Controlar postbacks desde un ModalPopup (VB)

por Christian Wenz

Descargar código o Descargar PDF

El control ModalPopup en el 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 en el 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 control Toolkit, 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 actúe como elemento emergente modal. Allí, 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 está establecido para que se produzca un postback al hacer 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, siempre que se haga clic en el botón Save en el menú emergente modal, se ejecutará el método de SaveData() del servidor. Allí, puede guardar los datos especificados en un almacén de datos. Por simplicidad, los nuevos datos se generan en la etiqueta:

Protected Sub SaveData(ByVal sender As Object, ByVal e As EventArgs)
 lblName.Text = HttpUtility.HtmlEncode(tbName.Text)
 lblEmail.Text = HttpUtility.HtmlEncode(tbEmail.Text)
End Sub

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 un postback. Si hay un postback, la característica ASP.NET ViewState rellenará automáticamente los cuadros de texto con los valores adecuados.

Sub Page_Load()
 If Not Page.IsPostBack Then
 tbName.Text = lblName.Text
 tbEmail.Text = lblEmail.Text
 End If
End Sub

el elemento emergente modal produce un postback

El elemento emergente modal produce un postback (haga clic para ver la imagen de tamaño completo)