miércoles, 27 de marzo de 2013

Acceder al ClientID de un control que está dentro de un UserControl desde Javascript


Hoy quiero comentarles la forma de acceder al ClientID de un control que está dentro de un UserControl en ASP.NET desde Javascript en el cliente. El ClienteID es el ID que genera ASP.NET al crear la página.

Me surgió la necesidad de acceder a un control que está dentro de un UserControl a través de Javascript o jQuery cuando estaba programando una página un tanto compleja. Estuve buscando una solución y la mayoría hacia una inyección de código Javascript en alguna parte del UserControl de una forma parecida a esta:

ClientScriptManager script = Page.ClientScript;
if (!script.IsClientScriptBlockRegistered(this.GetType(), "RegisterVariables"))
{
 
StringBuilder scriptBlock = new StringBuilder();
  scriptBlock
.AppendLine("<script type=text/javascript>");
  scriptBlock
.AppendFormat("var someVar = {0}", TextBox1.ClientID);
  scriptBlock
.AppendLine("</script>");


  script
.RegisterClientScriptBlock(this.GetType(), "RegisterVariables", 
scriptBlock.ToString());
}

ver: http://forums.asp.net/t/1506954.aspx

Luego someVar al ser global puede ser accedida en cualquier parte de nuestro script.

Realmente me pareció una manera poco elegante de solucionar el problema. Cada vez que el UserControl es utilizado ese código es agregado a la página, se use o no se use.

Mi UserControl, llamado "SeleccionarEmpleados" tenía un listbox llamado "lsEmpleados". Decidí crear una propiedad pública en él de la siguiente forma:


public string lsEmpleados_ClientID
{
        get
        {
            return lsEmpleados.ClientID;
        }
}



Esta propiedad de  "SeleccionarEmpleados" devuelve el ClientID del listbox.

Luego en mi webform puedo acceder de esta forma:



var lst = document.getElementById('<%=SeleccionarEmpleados.lsEmpleados_ClientID%>');




De está forma no hay inyección de código innecesario para otras páginas que no necesiten la funcionalidad y además el código utilizado es mucho más simple y fácil de leer.

Espero que les haya servido!!