ASP.NET 4.0 Web Form ClientIDMode

Son muchas las novedades que se incluyen y que vamos descubriendo de a poco en la nueva versión de ASP.NET 4.0

Hoy aprovecho para comentarles rápidamente una de ellas, me refiero a la propiedad:

ClientIDMode

Esta propiedad indica cómo se generara la propiedad ClientID de los controles.

Pero pongámonos en contexto, hasta ahora (antes de ASP.NET 4.0), cuando queríamos referirnos a un control desde el cliente (java script) lo hacíamos de la siguiente forma (Supongamos que queremos seleccionar el botón btnAceptar):

var btn = document.getElementById("btnAceptar");

Pero que sucedía si este botón estaba dentro de un control contenedor (Control de Usuario, Dentro de un ContentPlaceHolderID, etc..)

Sucede que ASP.NET al generar la página, autogenera estos ID, por ejemplo:

ctl00$ContentPlaceHolder2$btnAceptar

Y para poder acceder a ellos comúnmente hacíamos esto:

var btn = document.getElementById("<%=btnAceptar.ClientID %> ");

Con ASP.NET 4.0 tenemos otra manera de resolver este problema, y es el usar la propiedad ClientIDMode de la clase Web.UI.Control.

Si establecemos esta propiedad a:

ClientIDMode="Static"

Conseguiremos que al regenerar la pagina se mantenga el mismo ClientID y podríamos hacer lo siguiente:

var btn = document.getElementById("btnAceptar");

Veamos un ejemplo y después comentaremos sobre los posibles valores de la propiedad:

Código de la pagina (ASPX):

 

Código de la pagina generado (HTML):

Expliquemos los distintos valores que pueden asignarse a esta propiedad y los resultados que se obtendrán:

Web.UI.Control.ClientIDMode

VALOR	DESCRIPCION
Legacy	El valor de ClientID es generado por la concatenación de los ID de cada uno de los padres con los nombres de contenedores del control. Este algoritmo es el que se utiliza en las versiones de ASP.NET antes de ASP.NET 4.0.
Static	El valor de ClientID se establece en el valor de la propiedad ID.
Predictable	Este algoritmo se utiliza para los controles que se encuentran en controles enlazados a datos. El valor de ClientID se genera mediante la concatenación del valor ClientID  del padre. Si el control esta enlazado a datos y genera varias filas, el valor del campo de datos especificado en la propiedad ClientIDRowSuffix se añade al final. Si la propiedad ClientIDRowSuffix está en blanco, un número secuencial se añade al final en lugar de un valor de campo de datos. Cada segmento está separado por un carácter de subrayado (_).
Inherit	El control usará (hereda) el mismo algoritmo que el padre.

Resumen (ClientIDMode):

Con ASP.Net 4.0 y la nueva propiedad ClientIdMode podemos especificar con precisión  como deben generarse los ClientID de nuestros objetos (Legacy, Static, Predictable, Inherit).

La propiedad ClientIdMode puede ser definida en:

• En el control:

   <asp:Button ID="btnOk" ClientIDMode="Static"

• Para todos los controles de una página:

   <%@ Page ClientIDMode="Static"

• Para todas las páginas de una aplicación (web.config):

   <system.web>

     <pages clientIDMode="Static"></pages>

   </system.web>

Artículos Relacionados:

• Si deseas profundizar mas en ClientIds …