Como crear una ventana de espera para eventos que tardan tiempo en responder del servidor
Usando ASP.NET, VB.NET y Javascript

Fecha: 27/Oct/2004 (26 de octubre de 2004)
Autor: nito (Miguel Angel Juárez Herrera), mjuarezh36@yahoo.com.mx

 


Muchas veces los procesos que realizamos en nuestras paginas ASP.NET dependiendo de donde tengamos montados los servidores, las conexiones del proveedor y las conexiones de los clientes etc.; llega a crearnos problemas y mas cuando tenemos consulta o procesos que tarden bastante aun en las mejores condiciones, esta es la tarea que me ha tomado investigar en esta ocasión

 

La solución que propongo es, crear tu pagina principal que ejecutará la consulta en el servidor y otra pagina auxiliar con puro código html que servirá para dar información al usuario.

 

1.- crea un nuevo proyecto asp.net

 

2.- cambia el nombre de el webform1.aspx por el de consulta.aspx

 

3.- Agrega un web control button

 

El ejemplo sirve para cualquier tipo de proceso que se desee hacer, en este caso solo haremos una lectura de archivos y mostraremos el resultado en pantalla.

 

4.- Generamos el evento “click” del button1 e ingresamos el siguiente codigo:

 

  Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim strFiles As String()

        Dim objFile As System.IO.FileInfo

        Dim i As Integer

        '        strFiles = System.IO.Directory.GetFiles(Server.MapPath("/"), "*.*")

        strFiles = System.IO.Directory.GetFiles("c:\windows\system32", "*.*")

        For i = 0 To strFiles.Length - 1

            objFile = New System.IO.FileInfo(strFiles(i))

            Response.Write("Nombre : " & objFile.Name() & "<br>")

            Response.Write("Extension : " & objFile.Extension() & "<br>")

            Response.Write("Longitud : " & CStr(objFile.Length) & "<br>")

            Response.Write("Fecha de creacion : " & CStr(objFile.CreationTime) & "<br>")

            Response.Write("<br>")

        Next

        Response.End()

     End Sub

Nota: (puedes substituir la ruta c:\windows\system32 por cualquier otra)

 

 

5.- El siguiente paso es ir a la vista de html de nuestra pagina aspx y codificar después de las etiquetas <title> y antes de terminar el <head> lo siguiente:

 

<HEAD>

            <title>listadoObras</title>

            <!--El siguiente es el script que carga la ventana -->

            <script language="javascript" type="text/javascript">

            <!-- Ocultar guion a navegadores antiguos

            function newWindow(){

                  ventanaEspera=window.open('utiles/espera.htm','Espera','toolbar=no,scroollbars=no,width=400,height=130')

            }

     

            // fin de ocultacion de guion a navegadores antiguos -->

           

            </script>

 

Es una función en javascript que permitirá abrir la página, a continuación la detallo:

 

a).-  el código funciona de la siguiente manera:

Codigo Javascript

Explicación

<!--El siguiente es el script que carga la ventana -->

Esta es una nota

<script language="javascript" type="text/javascript">

Es el encabezado del area de scripts, se define el tipo de lenguaje de salida.   Como algo importante, deberás de asegurarte que en las propiedades de tu pagina el lenguaje de salida del cliente sea javascript, sino entonces tendrás errores.

<!-- Ocultar guion a navegadores antiguos

Esto funciona para “ocultar” a navegadores antiguos que te marquen error con javascript.

function newWindow(){

Esta es la funcion de javascript  que denominamos newWindow y a forma de “begin” que se usaba en pascal se usa el “{“

 ventanaEspera=window.open('espera.htm','Espera','toolbar=no,scroollbars=no,

width=400,height=130')

Este es el código, asignamos un nombre ventanaespera, y le pasamos el codigo window.open y las caracteristicas: url (espera.htm), nobmre de ventana a mostrar(espera), caracteristicas(sin toolbar, sin scroolbars y el tamaño donde quepa tu información y la barra de desplazamiento)

             }

Esto es a manera de “end” (como en pascal)

             // fin de ocultacion de guion a navegadores antiguos -->

            

             </script
Clausulas de cierre

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6.- Ahora generamos el evento onload de la pagina y escribiremos lo siguiente:

 

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        Button1.Attributes.Add("onclick", "javascript:newWindow();")

End sub

 

Lo que estamos haciendo es agregarle al atributo onclick del boton, la ejecucion del javascript que llamamos newWindow.

 

7.- Realiza una pagina html "sencillita" que muestre el Mensaje: "Espere mientras se muestra la pagina" y una imagen gif que muestre avance.

 

A continuación te muestro el codigo html….

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

                <head>

                               <title>espera</title>

                               <meta name="vs_defaultClientScript" content="VBScript">

                               <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

                               <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">

                               <meta name="ProgId" content="VisualStudio.HTML">

                               <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">

                               <script id="clientEventHandlersVBS" language="vbscript">

 

                               </script>

                </head>

                <body>

                               <P>

                               </P>

                               <DIV style="DISPLAY: inline; FONT-SIZE: larger; WIDTH: 376px; HEIGHT: 40px" ms_positioning="FlowLayout">

                                               <P>Por favor espere mientras se realiza la consulta ...</P>

                               </DIV>

                               <P></P>

                               <DIV align="left"><IMG style="WIDTH: 368px; HEIGHT: 16px" height="16" src="../imagenes/lin42.gif" width="368"></DIV>

                               <DIV align="right">&nbsp;</DIV>

                               <DIV align="right">

                                               <DIV id="DIV1" style="DISPLAY: inline; FONT-SIZE: xx-small; WIDTH: 176px; HEIGHT: 16px"

                                                               ms_positioning="FlowLayout">(esta ventana se cerrará automaticamente)</DIV>

                               </DIV>

                </body>

</html>

 

Para este ejemplo, le pondremos espera.htm

Depende de tu diseño, como veras es una paginita sencilla…., si es sencilla mejor

 

8.- Y esto es todo para cargar la pagina cada vez que ejecutes el botón, le estas diciendo que cada vez que cargue, le agregue la funcionalidad del javascript: newWindow() al boton desde donde se ejecuta la consulta o el proceso que tu quieras.

Como se puede observar la ventana sigue abierta al terminar.

 

9.- Ahora bien, viene la parte del cierre de la ventana “auxiliar”, resulta que existen 2 posibilidades, una es que cuando se termine todo el proceso, lancemos un evento y en el evento agreguemos igualmente la funcionalidad de otro javascript, y la otra es que mostremos esta pagina auxiliar solamente por un tiempo predeterminado y entonces se cierre al cabo de este tiempo, esto funciona para avisar que se va a tardar un poco el asunto; la segunda versión será la que incorporemos en este caso.

 

10.- En la pagina html que hemos creado "espera.htm", agregaremos un código javascript de la siguiente manera:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>espera</title>
    <script language=javascript type=text/javascript>
     <!--
Inicio de comentario para ocultar de navegadores viejos
     function cierraVentana(){
      setTimeout("window.close('Espera')",8000);
     }
     // fin de comentario para ocultar de navegadores viejos -->
    </script>

 

De tal forma que creamos la función cierraVentana, y usaremos la propiedad setTimeout que  hace que se ejecute un codigo javascript despues de un determinado tiempo, especificado en milisegundos, en este caso 8 segundos.

 

11.- Mandaremos a llamar a esta función desde el evento onload de la pagina de la siguiente manera:

 

</head>
 <body onload=cierraVentana()>
  <P>

 

Lo que hacemos en este caso es que cuando inicie la consulta o proceso, se lanza la ventana, y luego de 8 segundos se cierra automáticamente.

 

espero que esto les ayude, si alguien tiene alguna sugerencia, entonces por favor digamela ok?...

 


ir al índice

Fichero con el código de ejemplo: nito_comocrearunaventanadeespera.zip - 19.8 KB