jQuery: Mensaje por x segundos idem Gmail. Visualizar/Ocultar un Label y/o Panel en ASP.NET por x segundos

Estaba leyendo el post de Sergio donde nos comenta sobre un snippet para visualizar/ocultar un Label. 

El articulo de Sergio:

En el articulo utiliza la función setTimeout que tenemos disponible en javascript para disparar eventos en intervalos previamente asignados.

 

Yo tenia un post (de hace varios siglos) de un ejemplo que utilizamos con Lautaro, y se dio la oportunidad de publicarlo. Como no sabia el titulo para bautizarlo deje los dos:

  • jQuery: Mensaje por x segundos idem Gmail.
  • Visualizar/Ocultar un Label y/o Panel en ASP.NET por x segundos

 

Pero con jQuery?

Ya en la pagina principal de jQuery tenemos algo para vislumbrar “el potencial de su sencillez”, así que basado en ese ejemplo aqui para embeberlo en nuestras paginas ASP.NET

 

Descargar el proyecto de ejemplo

Para ayudar “jugando un poco”, el proyecto para descargar

  

Que lo que queremos lograr?

Un mensaje por x segundos, like Gmail 😉 … desvanecimiento…

 image  >> image >> image

Aquí utilizo un UserControl por comodidad pero esto es un firme candidato a WebControl.

 

Ejemplos

Para descargar el proyecto de ejemplo lo puedes hacer aquí, que consta de estos elementos:

image

El UserControl tiene algo? no nada simplemente hereda de una clase:

public partial class varios_Mensaje : YODA.Web.UI.MensajeBase 
{
      
}
y si no tiene nada para que lo necesitamos? para ubicarlo donde necesitemos y allí visualizaremos el mensaje

La clase bajo el namespace YODA.Web.UI contiene:

  • Registrar los .js necesarios
  • Agregar al contenido del UC (UserControl) un panel para contener el mensaje (Evento Init)
  • y luego una serie de métodos que lo único que harán será escribir script del lado del cliente

El código:

namespace YODA.Web.UI {
public abstract class MensajeBase : System.Web.UI.UserControl
{

    protected Panel Contenedor;
    private string TemplateScriptMensajeArmar = "mensajeArmar('{0}','{1}','{2}');";
    private string TemplateScriptMensajeArmarConTiempo = "mensajeArmar('{0}','{1}','{2}',{3});";
    
    public MensajeBase()
    {
        //
        // TODO: Add constructor logic here
        //
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        Contenedor = new Panel();
        Contenedor.CssClass = "mensajeContenedor";
        this.Controls.Add(Contenedor);
    }


    protected void Page_Load(object sender, EventArgs e)
    {

        //Registrando script
        ScriptManager.RegisterClientScriptInclude(this.Page, this.GetType(), "jQuery", ResolveClientUrl("~/js/jquery-1.3.2.min.js"));
        ScriptManager.RegisterClientScriptInclude(this.Page, this.GetType(), "YODA.Web.UI.Mensaje", ResolveClientUrl("~/js/YODA.Web.UI.Mensaje.js"));
    }


    /// <summary>
    /// Visualizar un mensaje
    /// </summary>
    /// <param name="Mensaje">Cadena de texto a visualizar</param>
    public void MostrarMensaje(String Mensaje)
    {
       Armar(Mensaje, 0, MensajeTipo.Normal);
    }

    /// <summary>
    /// Visualizar un mensaje
    /// </summary>
    /// <param name="Mensaje">Cadena de texto a visualizar</param>
    /// <param name="TiempoAVisualizar">Tiempo en milisegundos a visualizar el mensaje</param>
    public void MostrarMensaje(String Mensaje, Int32 TiempoAVisualizar)
    {
        Armar(Mensaje, TiempoAVisualizar, MensajeTipo.Normal);
    }

    public void MostrarMensaje(String Mensaje, Int32 TiempoAVisualizar, MensajeTipo Tipo)
    {
        Armar(Mensaje, TiempoAVisualizar, Tipo);
    }


    private void Armar(String Mensaje, Int32 TiempoAVisualizar, MensajeTipo Tipo)
    {
        String script = string.Empty;

        if (TiempoAVisualizar > 0)
        {
            script = String.Format(TemplateScriptMensajeArmarConTiempo, Contenedor.ClientID, Mensaje, Tipo.ToString(), TiempoAVisualizar);
        }
        else
        {
            script = String.Format(TemplateScriptMensajeArmar, Contenedor.ClientID, Mensaje, Tipo.ToString());
        }

        //Registrando script
        ScriptManager.RegisterStartupScript(this, this.GetType(), "MensajeArmar", script, true);

    }

}
}

 

O sea la magia es jQuery que nos proporciona funcionalidades muy nutritivas para nuestras web :), en este ejemplo encapsule MensajeArmar en una función en el archivo YODA.Web.UI.Mensaje.js

Allí tendremos la ubicación del contenedor (en este caso un DIV ya que es el ID del Panel que incrustamos en el evento Init anteriormente)  y luego manipulaciones de contenido HTML para armar algo que nos quede de esta forma:

<div id=Panel1_texto class=mensajeTexto>
     <span class='mensajeNormal mensajeTipoError'>Hola Mundo!</span>
</div>

Que con los estilos correctos quedara de siguiente forma:
image
No nos vamos a poner exquisitos con el diseño, ya que es un simple ejemplo. Queda por parte del lector descargar el ejemplo y manipularlo a su antojo, por ejemplo que acepte un template para el tipo de mensaje (template HTML)

El código js:

//Visualizar el mensaje
function mensajeArmar(contenedorId, mensaje, tipo, tiempoParaOcultar) {

    var contenedor = '#' + contenedorId;
    var contenedorTexto = '#' + contenedorId + '_texto'   
   
    //Tipo de Mensaje: 
    //por si queremos utilizar para definir mensajes de error, informacion, alertas...
    if (tipo == undefined) {
        tipo = 'Normal';
    }
    var tipoMensajeCss = 'mensajeTipo'+tipo;
    
    if (tiempoParaOcultar == undefined) {
        tiempoParaOcultar = 4000;

    }

    $(contenedor).html('<div id=' + contenedorId + '_texto' + ' class=mensajeTexto><span class='mensajeNormal '+tipoMensajeCss + ''>' + mensaje + '</span></div>');

    //boton cerrar (cualquier objeto con clase = cerrar
    $(contenedor + " .cerrar").click(function() { mensajeOcultar(); })
    
    //visualizando el mensaje contenedor
    $(contenedorTexto).fadeIn(1000);
    
    //asignando el tiempo para ocultarlo
    setTimeout(mensajeOcultar, tiempoParaOcultar);
}


//Ocultar el mensaje
function mensajeOcultar() {
    $('.mensajeTexto').fadeOut(2000);
}

 

En la pagina (la única del proyecto) podremos ver los ejemplos
image

 

y bueno, empecemos…

Ejemplo 1: Básico

Simplemente visualizaremos el mensaje…en la ubicación que insertamos en la pagina el UserControl
image 
El código:

Mensaje1.MostrarMensaje("Hola Mundo!");

Resultado:
image

Ejemplo 2: Definiendo contenido

Enviamos un contenido de ejemplo, idem al anterior pero proponiendo el mensaje 🙂
image
El código del botón nos podemos imaginar como seria, para el que no:

Mensaje1.MostrarMensaje(txtMensaje2.Text.Trim());

 

Ejemplo 3: Mensaje con botón cerrar

Aquí el botón cerrar hará uso de la funcion mensajeOcultar, que lo armo desde el codebehind asi:

Mensaje1.MostrarMensaje(txtMensaje2.Text.Trim() + ". <a href=# class=cerrar>Ocultar</a>");

Como vemos que solamente el enlace tiene la clase “cerrar” y asigno inyectando condigo con jQuery, esta linea se encuentra en el archivo YODA.Web.UI.Mensaje.js, en el método mensajeArmar

//boton cerrar (cualquier objeto con clase = cerrar
$(contenedor + " .cerrar").click(function() { mensajeOcultar(); })

Se visualiza:
image

 

Ejemplo4: Con contenido HTML

Idem al ejemplo 2, pero aquí insertamos tags :O
image
Se visualiza
image

 

Ejemplo5: Con tipo de mensaje e icono 😉

Y ya que estamos, agregamos Tipo de Mensaje
image

image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Los tipos de mensaje insertan una clase CSS para asignar algo en particular, en este ejemplo solamente imágenes
image image image
Podríamos hacer con CSS algo mas? SI! pero no era el objetivo de este “extenso articulo”

 

 

Espero que les pueda servir de ayuda o guía.

Para descargar como les decia aquí

2 comentarios en “jQuery: Mensaje por x segundos idem Gmail. Visualizar/Ocultar un Label y/o Panel en ASP.NET por x segundos”

Deja un comentario

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