ASP.NET - Mensaje en pantalla mientras se carga la página

Question

Tengo una página que realiza una tarea larga (10 a 15 segundos) en el método page_load.

Tengo el código javascript del lado del cliente que mostrará un gif animado de "carga de página" decente para el usuario.

Puedo invocar el método de JavaScript desde el código subyacente, para mostrar el gif animado de "carga de página", sin embargo, la tarea de larga ejecución cuelga la UI de modo que el gif animado no se muestra hasta que se complete la tarea de ejecución prolongada, que es exactamente lo contrario de lo que deseo.

Para probar esto, en mi método page_load hago una llamada al método de JavaScript para mostrar el gif animado. Entonces, uso Thread.Sleep (10000). Lo que ocurre es que el archivo .gif animado no se muestra hasta después de que se complete Thread.Sleep.

Obviamente estoy haciendo algo incorrecto.

Cualquier consejo sería apreciado.

Gracias.

Chris

A continuación se muestra un ejemplo del código subyacente:

protected void Page_Load(object sender, EventArgs e) 
    { 
     ClientScript.RegisterStartupScript 
       (GetType(), "Javascript", "javascript: ShowWaitIndicator(); ", true); 

     Response.Flush(); 

     Thread.Sleep(10000); 
    } 

Answer 1

Suena como el proceso de carga Javascript está siendo visualizado después de los procesos onload ASP. Es posible que desee retrasar su acción que requiere mucho tiempo a Page.LoadComplete: de esta manera, su usuario verá el renderizado de Javascript antes de que ocurra la operación intensiva.

Luego, actualizará el contenido de la página según sea necesario después de que la función finalice.

¿Puede proporcionar un ejemplo del código?

Answer 2

Lo logré colocando un temporizador en la página. Después de su primer tick deshabilítelo y ejecute su tarea.

<asp:Timer runat="server" id="UpdateTimer" interval="500" ontick="UpdateTimer_Tick" /> 

Lo puse en un UpdatePanel para mis necesidades. No estoy seguro de qué funcionará mejor para ti. Luego, en su código detrás ...

Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As EventArgs) 
     UpdateTimer.Enabled = False 

     ' run method here 

    End Sub 

Answer 3

La razón es que se desencadene el evento Page.Load antes de cualquier respuesta ha sido enviada al cliente; así que cualquier instrucción para el cliente (como ejecutar su javascript) no ocurrirá hasta que el cliente reciba la respuesta.

Entonces ... colocar la tarea de larga duración en Page.Load no tendrá el efecto que desee. Esto suena como un caso para usar AJAX o alguna otra forma de recuperación de datos asincrónica. En este escenario, la página que devuelve al cliente no contiene el resultado de su tarea de larga ejecución, por lo que la página misma (con su spinner) se carga rápidamente, entonces el cliente solicita los datos; cuando los datos estén listos (10-15 segundos después) puede actualizar el DOM en el cliente con los resultados.

Answer 4

Evitaría invocar su JavaScript desde el código subyacente.

En su lugar, utilice la biblioteca jQuery.Puede desencadenar su código para llamar inmediatamente después de que el DOM se carga utilizando el siguiente código:

$(document).ready(function() { 
    //Call your JavaScript method here. 
}); 

También tendrá que añadir jQuery para su página, que es una única secuencia de comandos incluye desde el Microsoft CDN. Agregue esto a su margen de beneficio de hacer esto:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 

Esto llamará a su método de JavaScript GIF inmediatamente cuando se carga la página y se puede eliminar su Thread.Sleep. Supongo que su método GIF animado oculta automáticamente la imagen después de 10-15 segundos.

Answer 5

El siguiente ejemplo funcionará para usted. solo colóquelo en Page Load Event.

Response.Write("<div id=\"loading\" style=\"position:absolute; width:100%; text-align:center; top:300px;\"><img src=\"http://www.cse.iitk.ac.in/users/singhroh/images/loading.gif\" border=0></div>"); 
    Response.Flush(); 
    System.Threading.Thread.Sleep(5000);   
    Response.Write("script>document.getElementById('loading').style.display='none';</script>"); 

Answer 6

Tomando la vieja escuela, podría cambiar el almacenamiento en búfer. Con el almacenamiento en búfer (predeterminado), la página se genera en su totalidad antes de enviarse al cliente. Si desactiva el almacenamiento en búfer, se envía a medida que se carga, por lo que puede enviar el html para activar el gráfico de carga, realizar su tarea de larga ejecución y luego enviar un javascript para desactivarlo.