¿Qué son las Propiedades ClientID y UniqueID en ASP NET?

Los controles de ASP.NET tienen las propiedades ClientID y UniqueIDque equivalen a los atributos id y name de elementos HTML, respectivamente.

Cuando creamos un TextBox dentro de una página ASPX, por ejemplo, de esta forma:

1

<asp:TextBox ID="textBox1" runat="server"/>

El código generado será el siguiente:

1

<input type="text" id="textBox1" name="textBox1"/>

El servidor genera automáticamente un elemento input con sus atributos id y name idénticos al ID del control original. Entonces, ¿cuál es la necesidad de ClientID y UniqueID? Veamos dos distintos escenarios:

Usando MasterPage o Web User Control

Supongamos que nuestro textBox1 se encuentra dentro de una página ASPX que a su vez, utiliza un archivo MasterPage.

1
2
3

<asp:Content ContentPlaceHolderID="cphBody" runat="server"> 
<asp:TextBox ID="textBox1" runat="server"/>
</asp:Content>

Al crearse el control en nuestra página, lo veremos de esta forma:

1

<input type="text" id="ctl00_cphBody_textBox1" name="ctl00$cphBody$textBox1"/>

¿¡Qué es todo eso que agregó en el id y name del control!? Si nos fijamos bien, está formado por tres partes: lo primero es “ctl” más un número consecutivo; en seguida, el nombre del ContentPlaceHolder que contiene al control, y finalmente, el ID que le dimos al control TextBox.

Todo ese código tiene un propósito, obviamente. Cuando trabajamos con Master Pages o Web User Controls, no podemos saber si en otra parte de la página existe o no un control con el mismo ID, y por lo tanto, si habrá más de un elemento HTML con el mismo atributo id. Así que lo que hace .NET es agregar un valor para esos atributos que sea único en la página generada, para lo cual se basa en el nombre del contenedor de la página o web user control, más un consecutivo, para tener mayor certeza. El mismo servidor sabrá cómo identificar cada uno, y utilizarlos por separado cuando se ejecute el código de servidor.

Controles como GridView o ListView

Creemos un GridView en la página:

1
2
3
4
5
6
7
8
9

<asp:GridView ID="grid1" runat="server"> 
   <Columns> 
      <asp:TemplateField> 
         <ItemTemplate> 
            <asp:TextBox ID="gridTextBox" runat="server" /> 
         </ItemTemplate> 
      </asp:TemplateField> 
   </Columns> 
</asp:GridView>

En el evento Page_Load en el code-behind, pondremos esto:

1
2
3
4
5
6
7
8

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
  Dim lista As New List(Of String)()
  For i As Integer = 1 To 10
    lista.Add(i)
  Next
  grid1.DataSource = lista
  grid1.DataBind()
End Sub

Al correr el sitio y ver el código fuente, encontraremos esto:

1
2
3
4
5
6
7
8
9
10
11
12
13

<table cellspacing="0" rules="all" border="1" id="ctl00_cphBody_grid1" style="border-collapse:collapse;">
  <tr><th scope="col"> </th><th scope="col">Item</th></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl02$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl02_gridTextBox" /></td><td>1</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl03$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl03_gridTextBox" /></td><td>2</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl04$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl04_gridTextBox" /></td><td>3</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl05$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl05_gridTextBox" /></td><td>4</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl06$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl06_gridTextBox" /></td><td>5</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl07$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl07_gridTextBox" /></td><td>6</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl08$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl08_gridTextBox" /></td><td>7</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl09$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl09_gridTextBox" /></td><td>8</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl10$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl10_gridTextBox" /></td><td>9</td></tr>
  <tr><td><input name="ctl00$cphBody$grid1$ctl11$gridTextBox" type="text" id="ctl00_cphBody_grid1_ctl11_gridTextBox" /></td><td>10</td></tr>
</table>

Todos los TextBox tienen el mismo ID en la definición del TemplateField, pero aquí podemos ver que los input tienen un nombre distinto por cada uno: consecutivo del contenedor principal – nombre del contenedor principal (Master Page) – nombre del control contenedor (GridView) – consecutivo del control contenedor – nombre del control (TextBox). Todo esto, nuevamente, para asegurarse que el ID no se repite en ningun lugar de la página que se generará.

¿Dónde entra el uso de ClientID y UniqueID? En cualquier lugar donde necesitemos referenciar a un elemento por su id o name en HTML.

Si necesito extraer el valor de textBox1 por medio de Javascript, puedo hacer esto:

1

var val = document.getElementById('<%= textBox1.ClientID %>');

Pueden haber muchos casos en los que utilicemos el ClientID para CSS y Javascript, dependiendo la complejidad de la página.

El UniqueID es menos probable que lo utilicemos, pero sí me he topado con un caso en el cual se le puede sacar provecho.

Al enviar los datos de un formulario, ya sea por método GET o POST, los valores enviados son identificados por el atributo name del control. El elemento form usado por .NET utiliza el método POST, cuyos valores pueden ser obtenidos desde Request.Form en el code-behind.

1

string valor = Request.Form["name_de_input_en_pagina"];

Si por algun motivo necesito obtener el valor de un elemento de entrada a partir del dato enviado en el submit de la forma, puedo hacer esto:

1

string valor = Request.Form[textBox1.UniqueID];

Como UniqueID es equivalente al name del elemento HTML, sabemos que vamos a recibir el valor exacto del control que necesitamos.

Puedes ver la publicación Original Aqui!