Buscar en este blog

viernes, 23 de agosto de 2013

C Sharp NET - Agregando Evento Click a un Label

Tal vez algunos de ustedes hallan tenido la curiosidad de agregar un evento a un tipico Label.

Bien pues esto no es tan complicado, aqui les enseñare el codigo necesario para hacerlo. Y posteriormente les explicare cada funcion de los metodos y/o lineas en el codigo.

El codigo es el siguiente:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ControlesWeb
{

    public class CWLabel:Label, IPostBackEventHandler
    {
        public event EventHandler Click;

        public bool AutoPostBack
        {
            get
            {
                if (ViewState["autoPostBack"] != null) return (bool)ViewState["autoPostBack"];
                else return true;
            }
            set { ViewState.Add("autoPostBack", value); }
        }

        public CWLabel(){      }

        protected void OnClick(EventArgs e)
        {
            if (this.Click != null)
                this.Click(this, e);
        }

        protected override void Render(HtmlTextWriter writer)
        {
            if (this.AutoPostBack)
            {
                this.Attributes.Add("onclick", this.Page.ClientScript.GetPostBackEventReference(this, ""));
                this.Style.Add("cursor","pointer");
            }
            base.Render(writer);
        }

        #region Miembros de IPostBackEventHandler

        public void RaisePostBackEvent(string eventArgument)
        {
            this.OnClick(new EventArgs());
        }

        #endregion
    }
}



Comencemos a analizarlo...

Primero, tenemos la linea donde declaramos la clase, la cual es

public class CWLabel:Label, IPostBackEventHandler

Se preguntaran, porque despues del nombre de la clase tiene dos puntos y otros objetos o nombres de objetos.
La respuesta es sencilla. Porque los necesitamos para que nuestra clase tenga propiedades heredadas y no estemos partiendo de cero.
El primer nombre despues de los puntos es la clase de donde extenderemos tanto metodos como propiedades "Label", en este caso estamos creando un objeto o control a partir de otro, y como veran, estamos creando nuestro propio Label pero mejorado porque le agregaremos el evento Click.

El segundo nombre de objeto es una referencia a una interfaz, lo que nos indica que utlizaremos metodos establecidos de una interfaz. Este objeto es importante ya que nos brindara la posibilidad de detectar el evento evento.

Bien, la siguiente linea que nos interesa es esta:

public event EventHandler Click;

En esta linea se crea un evento publico y aunque no les diga cual es, ustedes ya lo saben.

La linea siguiente es una propiedad que nos ayudara a determinar si debe hacer postback o no, esta es opcional.

public bool AutoPostBack
{
get
{
if (ViewState["autoPostBack"] != null) return (bool)ViewState["autoPostBack"];
else return true;
}
set { ViewState.Add("autoPostBack", value); }
}

Con esta propiedad, almacenamos un valor boleano que nos indicara si el objeto hara o no un llamado sincrono al servidor (PostBack). El nombre con el que se almacenara este valor ustedes pueden decidirlo.

El siguiente segmento importante es

protected void OnClick(EventArgs e)
{
if (this.Click != null)
this.Click(this, e);
}

Este metodo es importante, ya que es el intermediario entre el evento capturado y el despliegue o llamada al metodo de la pagina al que sera asignado el evento Click del objeto en cuestion.

Supongamos que en nuestra pagina tenemos un Label (pero de los nuestros) de nombre "Prueba" que en el evento Click lo atiende el metodo "Prueba_Click", bueno pues para que este metodo pueda funcionar o activarse ante el evento Click, es necesario este metodo.

protected override void Render(HtmlTextWriter writer)
{
if (this.AutoPostBack)
{
this.Attributes.Add("onclick", this.Page.ClientScript.GetPostBackEventReference(this, "s"));
this.Style.Add("cursor","pointer");
}
base.Render(writer);
}

Sobreescribimos este metodo para poder agregar la propiedad (evento a nivel dom) que nos disparara el Click. Si se dan cuenta hay un metodo curioso dentro que proviene del script de la pagina que contiene a nuestro objeto ("GetPostBackEventReference"); bien, pues este metodo nos ayuda a llamar al famoso metodo javascript __doPostBack que genera nuestro querido .NET;. GetPostBackEventRefence no solo coloca la funcion __doPostBack en el evento a nivel dom que le indicamos, sino que tambien genera el script de esta misma funcion y la coloca en el cuerpo de la pagina; o sea que con esto no necesitaran probar si está o no esta funcion creada. Como se daran cuenta tambien, aqui hacemos uso de la propiedad AutoPostBack para asignar o no la funcion javascript al evento a nivel dom.

El siguiente metodo es

public void RaisePostBackEvent(string eventArgument)
{
this.OnClick(new EventArgs());
}

Este metodo es el que nos es proporcionado por la interfaz IPostBackEventHandler. Y dentro debe de mandar a llamar a nuestro metodo que respondera al evento Click.

Cuando se de un Click sobre este objeto, la ejecucion sera la siguiente:

Primero, se disparara el metodo proporcioando por IPostBackEventHandler.
Segundo, el metodo OnClick sera llamado desde el metodo de IPostBackEventHandler
Y por ultimo, se mandara a llamar al metodo de la pagina que atendera al evento Click de este objeto.



Ahora ya podemos llamarlo o crearlo desde nuestro codigo ASP. Para esto debemos hacer lo siguiente.

Agregar la referencia del espacio de nombres de la siguiente manera:

<%@ Register Namespace="ControlesWeb" Assembly="ControlesWeb" TagPrefix="CW" %>

Y una vez agregado, lo podemos llamar de la siguiente manera:

<CW:CWLabel runat="server" ID="lblPrueba" Text="Mi texto" OnClick="prueba_Click"> </CW:CWLabel>

Y en el codigo C# de la pagina pueden escribir una funcion como la siguiente.

protected void prueba_Click(object sender, EventArgs e)
{
ControlesWeb.CWLabel ct = sender as ControlesWeb.CWLabel;
this.ClientScript.RegisterClientScriptBlock(typeof(System.String),
"alerta", "<script>alert('"+ct.Text+"');</script>");
}

En esta funcion solo estoy mostrando en un alert de Javascript, el valor que tiene nuestro Label al cual se le hizo Click.

Y esto es todo. Espero les sea de utilidad y tambien que me halla sabido explicar.

Saludos desde Mexico!

Leer post completo...