[CodeSnippet] Mostrar un Label en ASP.NET por 3 segundos

Requerimiento: Después de procesar una operación contra la base de datos, se desea mostrar un mensaje de confirmación en un Label, pero que el mismo desaparezca en unos tres segundos, ver pregunta.

Solución: Conociendo el funcionamiento de la infraestructura web, el browser es quien automáticamente pasado los 3 segundos debe ocultar el mensaje mostrado. Dado que la funcionalidad que necesitamos es del lado del cliente, la opción es usar JavaScript. Dentro de los eventos Timing de JavaScript, existe el método setTimeout() que pertenece al DOM Window, este método permite ejecutar una sentencia o función JavaScript, después de un determinado tiempo. Y la propuesta será tener dos funciones, una que muestre el “Label” y que a la vez llame dentro de 3 segundos a otra función que oculta el Label. Y finalmente para integrarlo con nuestro botón de ASP.NET, al finalizar la ejecución del mismo podemos registrar el script del lado cliente, usando el método RegisterStartupScript de la propiedad Page.ClientScript. Nota: no es necesario usar un Label, podemos usar el elemento HTML Div para mostrar el mensaje.

Código ASPX:

   1: <head runat="server">
   2:     <title></title>
   3:     <script type="text/javascript" language="javascript">
   1:  
   2:         function MostrarLabel() {
   3:             setTimeout("OcultarLabel()", 3000);
   4:             var msj = document.getElementById("lblMensaje");
   5:             msj.style.visibility = "visible";
   6:         }
   7:         function OcultarLabel() {
   8:             var msj = document.getElementById("lblMensaje");
   9:             msj.style.visibility = "hidden";
  10:         }

</script>

   4: </head>
   5: <body >
   6:     <form id="form1" runat="server" >
   7:     <div>
   8:         <div id="lblMensaje" style="visibility:hidden;">
   9:           <h3>Mensaje mostrado por tres segundos...</h3> 
  10:           <br />
  11:         </div>                
  12:         <input type="button" value="click aqui" onclick="MostrarLabel()" />
  13:         <asp:Button ID="btnMostrarMensaje" runat="server" Text="Mostrar" 
  14:             onclick="btnMostrarMensaje_Click" />
  15:          <asp:Button ID="btnNada" runat="server" Text="No Muestra nada"  />        
  16:     </div>
  17:     </form>
  18: </body>

Código Evento:

   1: protected void btnMostrarMensaje_Click(object sender, EventArgs e)
   2:   {  
   3:     //codigo de operaciones contra la base de datos
   4:     Page.ClientScript.RegisterStartupScript(
   5:        Page.ClientScript.GetType(), "onLoad", "MostrarLabel();", true);
   6:   }

Navegadores Probados: Todos sobre Windows Vista SP1.

  • Firefox 3.0.6
  • Internet Explorer 7.0.6001
  • Opera 9.52
  • Google Chrome 1.0.154.48
  • Safari 3.1.2

Notas:

Recursos:

P.D.: Cuando tenga este tipo de requerimientos, no inventen marcianadas para hacerlo con ASP.NET 3.5++, puede ser tan simple de hacerlo con JavaScript. Ojo, tampoco se quiere concluir que todo lo vamos hacer con JavaScript, debemos buscar el equilibrio, sin afectar la seguridad y el rendimiento.

Saludos,

5 comentarios en “[CodeSnippet] Mostrar un Label en ASP.NET por 3 segundos”

  1. Pues a mi se me hace que no es necesario tener que utilizarse procesamiento de el lado del server para poder empezar el script, igual lo que pudiste haber hecho es que al final del script incluir la linea:

    window.onLoad = MostrarLabel();

    Pero es solo mi opinion.
    Saludos

  2. Hola Carlos,

    Tienes razón no hay necesidad, por eso adjunto también como llamarlo desde el cliente. Y eso es cuando la página sólo es para mostrar mensajes.

    Pero si la página, contiene procesamiento?, no se debe cargar antes de registrar o procesar la información no?, Sólo se debería mostrar después que se ha procesado el request en el servidor (operación contra la base de datos) y cuando envie el response al cliente, adjuntamos la llamada al JavaScript desde .NET. Por que sólo en ese momento debe mostrarse, y no en cualquier otro postback de la página.

    Espero que haya quedado más claro, la idea del código.

    Saludos,

  3. Buenas, que tal actualmente me estoy sumergiendo en todo lo que es we y debo decir que es un escenario muy pero muy interesante y me agrada por que cada vez aprendo cosas nuevas…claro con la salvedad que cada vez que creo saber un poco mas me encuentro en realidad un poco mas perdido jeje…Bueno, producto de esto es que en esta oportunidad voy a salir del tema e irrumpir en este post para ozar preguntarte algo que me tiene como con un dolor de cabeza .

    Bueno alli va:
    Hace unos dias alguien, con un poco mas de conocimientos que el que escribe me sugirió hacer un llenado de un gridview de la siguiente manera:

    Collection lista = new Collection();

    Celda oTd = new Celda();
    Filas oTr = new Filas();

    #region Cargar listado
    try
    {

    lista = oNegocio.TraerListaClientes();

    tbDetalle.Rows.Clear();

    foreach (Cliente item in lista)
    {
    # region Dibuja tabla
    oTr = new Filas();
    oTr.OnMouseOver(“PintarLinea(this)”);
    oTr.OnMouseOut(“NoPintarLinea(this)”);
    oTr.Height = Unit.Pixel(21);

    oTd = new Celda();
    oTd.Text = item.Codigo.ToString();
    oTd.Width = Unit.Percentage(10);
    if (oTd.Text.Trim() == “”) oTd.Text = “&nbsp”;
    oTd.CssClass = “LineCeldaAbajo”;
    oTr.Cells.Add(oTd);

    tbDetalle.Rows.Add(oTr);

    #endregion
    }
    if (tbDetalle.Rows.Count == 0)
    {
    oTd = new Celda();
    oTd.Text = oNegocio.Error();
    oTd.CssClass = “LineCeldaAbajo”;

    oTr.Cells.Add(oTd);
    tbDetalle.Rows.Add(oTr);
    }
    }
    catch (Exception ex)
    {
    throw (ex);
    }
    #endregion

    en donde

    public class Celda : TableCell
    {
    public Celda();
    }

    public class Filas : TableRow
    {
    public Filas();

    public void OnClick(string pFunction);
    public void OnMouseOut(string pFunction);
    public void OnMouseOver(string pFunction);
    }

    Ahh y ademas el tbDetalle se define de la siguiente manera:


    Bueno mi pregunta contreta es cual es la diferencia de hacerlo de esta manera a mostrar lo mismo pero con un gridview usando un objectdatasource, claro contando con los objetos de negocio correspondientes para ambos casos.

    Saludos y gracias por la atención prestada.

    sigfrido2006@hotmail.com

  4. Buenas, me parece muy copado tu blog.
    Te queria hacer una pregunta (por que se ve que sabes mucho) y como no sabia donde hacerlo te la pregunto aca:
    Quiero empezar a aprender ASP.Net y queria que me recomiendes un libro (ya me lei un libro entero de 1000 paginas sobre C#), pero quiero aprender bien la parte de asp.net y hacer paginas con buen rendimiento y rapidas.
    a mi me gustan las paginas usables , rapidas y minimalistas, pero tambien tiene que tener algo de ajax asi es mas agil el navegado.

    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *