Ventanas modales
[Ventanas modales con linkbutton simulados ] 

Fecha: 24/Feb/2005 (24-02-05)
Autor: Félix López Luis jaaaelpumuki@gmail.com

 


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 Class
 

Y 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


 

 


ir al índice