none
Capa con texto "por favor espere" mostrar/ocultar? RRS feed

  • Pregunta

  • Hola.

    Tengo una página web de un buscador que emplea cierto tiempo en cargar los datos. Estoy intentando mostrar un mensaje de "Buscando datos, por favor espere" mientras hace la consulta y al finalizar que se oculte el mismo.

    El caso es que se me ocultan y no hay forma de volver a mostrarlos. He buscado por internet y en teoría con el visible debería funcionar (1ª forma), pero no. Tampoco funciona aplicando el estilo de display (2ª forma). ¿Qué estoy haciendo mal? ¿Alguna otra alternativa?

    Muchas gracias.

    Mi código es el siguiente:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="prueba2.aspx.cs" Inherits="prueba2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Prueba2</title> <style type="text/css""> .capa{display:block;background-color:#DDDDDD; padding:100px; text-align:center; vertical-align:middle; font-size:25px; color:#FF0000; font-weight:bold; ; top:50px; left:0px; width:100%; height:100%; float:left; z-index:1; filter:alpha(opacity=60); opacity:.60; } </style> </head> <body> <form id="form1" runat="server"> <div ID="espere1" runat="server" class="capa"><p>Por favor espere1.</p></div> <asp:Panel ID="espere2" runat="server">Por favor espere2.</asp:Panel> <asp:Button ID="Prueba" runat="server" Text="Prueba"  onclick="Prueba_Click" /><br />

    ...AQUI INFORMACION DE LA PAGINA QUE SE MUESTRA... </form> </body> </html>

    public partial class prueba2 : System.Web.UI.Page
    {
        private bool on = true;
        protected void Page_Load(object sender, EventArgs e) { }
        protected void Prueba_Click(object sender, EventArgs e)
        {
        if (this.on) {
           this.espere1.Style.Add("display", "none"); this.espere1.Visible = false;
           this.espere2.Style.Add("display", "none"); this.espere2.Visible = false;}
        else {
           this.espere1.Style.Add("display", "block"); this.espere1.Visible = true;
           this.espere2.Style.Add("display", "block"); this.espere2.Visible = true; }
        on = !on;
        }
    }

    miércoles, 26 de noviembre de 2014 13:04

Respuestas

  • Lo que debe usar es display: none cuando envía la página, y luego en JavaScript cambiarlo a display: block y luego hacer el postback.  O sea, no puede usted mostrar eso desde código .net en el servidor.  Tiene que usar código JavaScript en el cliente.

    Las soluciones que le han dado hasta ahora son más para MVC o desarrollo fuera de WebForms, o bien Ajax.  Aquí le dejo una para WebForms sin Ajax u UpdatePanel's.

    Primero:  Asegúrese que define el elemento a mostrar mientras carga datos con display:none.

    <div id="espera" style="display: none; background-color: red; color: white;"><p>Por favor espere...</p></div>

    Ahí le muestro un ejemplo bien sencillo.

    Luego asegúrese de tener JavaScript en una función que ubique dicho elemento HTML por ID.  Algo así:

            function MostarEspera()
            {
                var elem = document.getElementById('espera');
                elem.style.display = 'block';
                return true;
            }
    

    Puede también usar jQuery si se le facilita más, pero como verá es bastante simple.

    Finalmente esta función debe llamarse del botón que hace el postback.  Le dejo el ejemplo también:

                <asp:Button ID="btnTest" Text="Probar 'Por favor espere'" runat="server" OnClientClick="return MostarEspera();" OnClick="btnTest_Click" />
    

    Como verá, el OnClientClick() define la ejecución del JavaScript y el OnClick definirá el código de servidor que hará la carga de los datos.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta Miguel_Po miércoles, 26 de noviembre de 2014 16:36
    miércoles, 26 de noviembre de 2014 14:20
    Moderador

Todas las respuestas

  • Ya intento con jquery ?

    Un ejemplo muy practico

    <head runat="server">
        <title></title>
    
        <script src="Scripts/jquery-1.10.2.js"></script>
        <style type="text/css">
            .cargado{
                background-color:white;
                color:black;
                display:none;
            }
            .cargando{
                background-color:black;
                color:white;
            }
        </style>
    
    <script type="text/javascript">
        $(function () {
            $(".cargando").hide();
            $(".cargado").show();
        });
    </script>
    
    </head>

    y en el body

    <div class="cargando">
        Loading ...
    </div>
    <div class="cargado">
        la pagina se ha cargado
    </div>

    como dije es un ejemplo muy practico pero por ahi le brinda una idea

    saludos


    G. Poliovei

    miércoles, 26 de noviembre de 2014 13:51
  • hola

    para implementar lo que propones existen plugin de jquery que podrian ayudar como ser

    BlockUI

    con este podrias mostrar un mensaje cuando realices una operacion en la pagina

    pero ojo esto solo funciona si la operacion la realizas mediente ajax, o sea se debes olvidad de usar los eventos de asp.net, usarias jquery con $.ajax para invocar a webmethods

    -----

    si quieres usar evento vas a tener que usar el UpdatePanel con 

    [How Do I:] Use the ASP.NET AJAX UpdateProgress Control?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 26 de noviembre de 2014 13:58
  • Buen día.

    Primero que nada, veo que no estas utilizando AJAX, deberías utilizar un UpdatePanel para que la llamada del botón sea asíncrona, luego que tengas esto, deberas controlar el inicio de la llamada asíncrona y la finalización del Request para que muestres/ocultes en ese ida/vuelta el mensaje de espera. Esto lo haces con javascript de la siguiente manera:

    <script src="jquery.min.js" type="text/javascript" />
    <script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(mostrarMensajeEspera)
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ocultarMensajeEspera)
    
    function mostrarMensajeEspera()
    {
       $("#panelMensaje").Show();   
    }
    
    function ocultarMensajeEspera()
    {
       $("#panelMensaje").Hide();
    }
    </script>

    En ese ejemplo deberías agregar la librería de JQUERY solo para ocultar o mostrar el panel $("#panelMensaje"), sino puedes hacerlo por Javascript puro.

    Suerte.


    Thks, Eduardo Velez.

    miércoles, 26 de noviembre de 2014 14:14
  • Lo que debe usar es display: none cuando envía la página, y luego en JavaScript cambiarlo a display: block y luego hacer el postback.  O sea, no puede usted mostrar eso desde código .net en el servidor.  Tiene que usar código JavaScript en el cliente.

    Las soluciones que le han dado hasta ahora son más para MVC o desarrollo fuera de WebForms, o bien Ajax.  Aquí le dejo una para WebForms sin Ajax u UpdatePanel's.

    Primero:  Asegúrese que define el elemento a mostrar mientras carga datos con display:none.

    <div id="espera" style="display: none; background-color: red; color: white;"><p>Por favor espere...</p></div>

    Ahí le muestro un ejemplo bien sencillo.

    Luego asegúrese de tener JavaScript en una función que ubique dicho elemento HTML por ID.  Algo así:

            function MostarEspera()
            {
                var elem = document.getElementById('espera');
                elem.style.display = 'block';
                return true;
            }
    

    Puede también usar jQuery si se le facilita más, pero como verá es bastante simple.

    Finalmente esta función debe llamarse del botón que hace el postback.  Le dejo el ejemplo también:

                <asp:Button ID="btnTest" Text="Probar 'Por favor espere'" runat="server" OnClientClick="return MostarEspera();" OnClick="btnTest_Click" />
    

    Como verá, el OnClientClick() define la ejecución del JavaScript y el OnClick definirá el código de servidor que hará la carga de los datos.


    Jose R. MCP
    Code Samples

    • Marcado como respuesta Miguel_Po miércoles, 26 de noviembre de 2014 16:36
    miércoles, 26 de noviembre de 2014 14:20
    Moderador
  • Hola

    Lo que comenta Jose R. MCP se adapta perfectamente a lo que necesitaba. Muchas gracias Jose, llevaba ya unas horas con el tema y no había caido en lo de separar la activación desde el onClienteClick y desactivarlo desde el postback (muy buena idea).

    Muchas gracias a todos.


    • Editado Miguel_Po miércoles, 26 de noviembre de 2014 17:03 error ortográfico
    miércoles, 26 de noviembre de 2014 16:40
  • Gracias!! Me ayudó mucho. :)
    jueves, 3 de enero de 2019 14:01