|
Ventanas modales Fecha: 24/Feb/2005 (24-02-05)
|
A menudo cuando he trabajado con Popup me he encontrado con problemas porque el Popup quedaba detrás de la página principal y el usuario no lo veía, que decir cuando queremos que el usuario realice una tarea en el popup sin poder moverse por la página principal... mucho trabajo y finalmente acabamos por quitar el Popup, una de las soluciones que encontré dando vueltas por internet fueron las ventana modales(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/showmodelessdialog.asp), mi sorpresa fue al colocar controles con PostBack pues estos se abrían en otra ventana.En este artículo vamos a simular a través de javascript, como se puede hacer un postback en una ventana modal
Primero tenemos que entender el funcionamiento de las ventanas modales, estás no se comportan igual que en un popup, una ventana modal forma parte de la página que la abre, es decir es como una ventana hija, por este motivo no tiene PostBack, para que nos entendamos es algo parecido a una capa, pero sin poder realizar PostBack. La ventana modal interactúa con la ventana principal mediante javascript, así que nuestro objetivo es que una acción en la ventana modal desencadene un evento en la ventana principal o contenedora.
Primero veamos con abrir la ventana modal, para ello usaremos el método showModelessDialog(sus parámetros, propiedades, así como una descripción y ejemplos podemos encontrarlos en la ruta antes mencionada):
<script language="Javascript">
showModelessDialog("miDialogo.aspx",window,"status:false;dialogWidth:300px;dialogHeight:300px");
</script>
Para interactuar con la página principal debemos saber que contamos con un método Javascript que nos devuelve una instancia de está, es decir a través del método podemos acceder a las variables y/o funciones javascript de la página principal desde la ventana modal.
<script language="Javascript">
var sData = dialogArguments;
sData.VariablePaginaPrincipal=window.document.Form1.TxtMiValor.value;
sData.FuncionPaginaPrincipal();
</script>
Ahora que ya sabemos como interactuar con la ventana principal, solo tenemos que crear una función Javascript en la página principal que realice el postBack. Para ellos podemos, por ejemplo, insertar un LinkButton y no ponerle texto de modo que no se vea en la web o aplicándole un estilo(visibility:hidden), y en la función Javascript llamar al método PostBack del linkButton:
<script language="Javascript">
function RealizarAccion()
{
__doPostBack('lnkRealizarAccion','');
}
</script>
<asp:linkbutton id="lnkRealizarAccion" runat="server"></asp:linkbutton>
Si queremos utilizar o recoger algún valor de la ventana modal en el PostBack de la página principal, tenemos que guardar en una variable(sData.VariablePaginaPrincipal), y para que sea accesible en PostBak de la página tenemos que guardar esa variable en un campo oculto:
<script language="Javascript">
var VariablePaginaPrincipal;
function RealizarAccion()
{
window.document.Form1.TxtOculto.value=VariablePaginaPrincipal;
__doPostBack('lnkRealizarAccion','');
}
</script>
Veamos un pequeño ejemplo, supongamos que tenemos una web que muestra los datos de un usuario, y queremos que al presionar el botón Salir muestre una ventana modal que pregunté si queremos salir sin guardar, guardar los datos o cancelar. Si salimos sin guardar entonces redirecciona a la home, si pulsa guardar pues ;)) guardamos, y si cancela le dejamos donde esta, ahhh se me olvidaba en caso de que el usuario pulse la "X" de la ventana interpretaremos que cancela, para eso utilizamos el evento onbeforeunload.
Primero creamos la página principal:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="VentanaModal.WebForm1"%> <!DOCTYPE HTML PUBLIC "-"//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Datosusuario</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http:"//schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <script> var Guardar; function AbrirPregunta() { showModelessDialog('dialogSalir.aspx',window,'status:no;edge:sunken;dialogHide:true;help:no;dialogWidth:252px;dialogHeight:108px'); } function DeseaGuardar() { window.document.Form1.txtOculto.value=Guardar; __doPostBack('lnkGuadar',''); } </script> </HEAD> <body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0"> <form id="Form1" method="post" runat="server"> <TABLE id="TablaContenedor" height="595" cellSpacing="0" cellPadding="0" width="620" align="center" bgColor="#ffffff" border="0"> <TR> <TD width="40%"><asp:label id="Label1" runat="server">Login</asp:label></TD> <TD><asp:textbox id="txtLogin" runat="server" Width="160px"></asp:textbox></TD> </TR> <TR> <TD><asp:label id="Label2" runat="server">_Password</asp:label></TD> <TD><asp:textbox id="txtPassword" runat="server" Width="160px" TextMode="Password" Visible="False"></asp:textbox></TD> </TR> <TR> <TD style="HEIGHT: 27px"> <asp:label id="Label13" runat="server">Repetir Password</asp:label></TD> <TD style="HEIGHT: 27px"> <asp:textbox id="txtRePassword" runat="server" Width="160px" TextMode="Password"></asp:textbox></TD> </TR> <TR> <TD><asp:label id="Label4" runat="server">Nombre</asp:label></TD> <TD><asp:textbox id="txtNombre" runat="server" Width="160px"></asp:textbox></TD> </TR> <tr> <TD height="39"> <TABLE id="TablaBotones" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0"> <TR> <TD align="right"> <asp:LinkButton id="lnkGuadar" runat="server"></asp:LinkButton></TD> <TD align="right" width="100"><INPUT id="txtOculto" style="WIDTH: 1px; HEIGHT: 1px" type="hidden" size="1" name="txtOculto" runat="server"></TD> <TD align="right" width="100"><asp:hyperlink id="hlkSalir" onclick="AbrirPregunta();" NavigateUrl="#" runat="server" Runat="server">Salir</asp:hyperlink></TD> </TR> </TABLE> </TD> </tr> </TABLE> </form> </body> </HTML>Public Class WebForm1 Inherits System.Web.UI.Page #Region " Código generado por el Diseñador de Web Forms " 'El Diseñador de Web Forms requiere esta llamada. <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Protected WithEvents Label1 As System.Web.UI.WebControls.Label Protected WithEvents txtLogin As System.Web.UI.WebControls.TextBox Protected WithEvents Label2 As System.Web.UI.WebControls.Label Protected WithEvents txtPassword As System.Web.UI.WebControls.TextBox Protected WithEvents Label13 As System.Web.UI.WebControls.Label Protected WithEvents txtRePassword As System.Web.UI.WebControls.TextBox Protected WithEvents Label4 As System.Web.UI.WebControls.Label Protected WithEvents txtNombre As System.Web.UI.WebControls.TextBox Protected WithEvents Label5 As System.Web.UI.WebControls.Label Protected WithEvents txtApellido1 As System.Web.UI.WebControls.TextBox Protected WithEvents Label6 As System.Web.UI.WebControls.Label Protected WithEvents txtApellido2 As System.Web.UI.WebControls.TextBox Protected WithEvents Label10 As System.Web.UI.WebControls.Label Protected WithEvents txtMail As System.Web.UI.WebControls.TextBox Protected WithEvents hlkSalir As System.Web.UI.WebControls.HyperLink Protected WithEvents lnkGuadar As System.Web.UI.WebControls.LinkButton Protected WithEvents txtOculto As System.Web.UI.HtmlControls.HtmlInputHidden 'NOTA: el Diseñador de Web Forms necesita la siguiente declaración del marcador de posición. 'No se debe eliminar o mover. Private designerPlaceholderDeclaration As System.Object Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: el Diseñador de Web Forms requiere esta llamada de método 'No la modifique con el editor de código. InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'Introducir aquí el código de usuario para inicializar la página End Sub Private Sub lnkGuadar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles lnkGuadar.Click If Me.txtOculto.Value = "1" Then GuardarEnBBDD() Response.Write("Guardado") Else 'Este paso se puede hacer sin viaje al servidor, pero lo necesito así para explciar como usar la variable ;))) Response.Write("redireccionado....") 'Response.Redirect("home.aspx") End If End Sub Private Function GuardarEnBBDD() 'Guardamos End Function End ClassY ahora la página Modal
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="dialogSalir.aspx.vb" Inherits="VentanaModal.dialogSalir"%> <!DOCTYPE HTML PUBLIC "-"//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>dialogSalir</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http:"//schemas.microsoft.com/intellisense/ie5"> <script> function Respuesta(Opcion){ /*Opcion puede ser -1 Guadar -2 No Guardar -3 Cancelar */ if(Opcion<3){ var sData = dialogArguments; sData.Guardar=Opcion; sData.DeseaGuardar(); } window.close(); } </script> </HEAD> <body MS_POSITIONING="GridLayout" onbeforeunload="Respuesta('3');"> <form id="Form1" method="post" runat="server"> <table> <tr> <td colspan="3"><asp:Label ID="lblPregunta" Runat="server">¿Desea guardar los Cambios?</asp:Label> </td> </tr> <tr> <td><asp:HyperLink id="HlkGuardar" runat="server">Guardar</asp:HyperLink></td> <td><asp:HyperLink id="HlkNoGuardar" runat="server">No Guardar</asp:HyperLink></td> <td><asp:HyperLink id="HlkCancelar" runat="server">Cancelar</asp:HyperLink></td> </tr> </table> </form> </body> </HTML>
Public Class dialogSalir Inherits System.Web.UI.Page #Region " Código generado por el Diseñador de Web Forms " 'El Diseñador de Web Forms requiere esta llamada. <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Protected WithEvents lblPregunta As System.Web.UI.WebControls.Label Protected WithEvents HlkGuardar As System.Web.UI.WebControls.HyperLink Protected WithEvents HlkNoGuardar As System.Web.UI.WebControls.HyperLink Protected WithEvents HlkCancelar As System.Web.UI.WebControls.HyperLink 'NOTA: el Diseñador de Web Forms necesita la siguiente declaración del marcador de posición. 'No se debe eliminar o mover. Private designerPlaceholderDeclaration As System.Object Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: el Diseñador de Web Forms requiere esta llamada de método 'No la modifique con el editor de código. InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'Introducir aquí el código de usuario para inicializar la página Me.HlkGuardar.Attributes.Add("onclick", "javascript:Respuesta('1');") Me.HlkGuardar.Attributes.Add("onmouseover", "javascript:this.style.cursor='hand';") Me.HlkGuardar.NavigateUrl = "#" Me.HlkNoGuardar.Attributes.Add("onclick", "javascript:Respuesta('2');") Me.HlkNoGuardar.Attributes.Add("onmouseover", "javascript:this.style.cursor='hand';") Me.HlkNoGuardar.NavigateUrl = "#" Me.HlkCancelar.Attributes.Add("onclick", "javascript:Respuesta('3');") Me.HlkCancelar.Attributes.Add("onmouseover", "javascript:this.style.cursor='hand';") Me.HlkCancelar.NavigateUrl = "#" End Sub End Class
