“What is the difference between ID, ClientID, UniqueID and AssosiatedControlID identifiers of the control?” -
I’ve heard this question a lot of times from .Net developers . That is why I decided to start my blogs with the simple but common subject, about the difference between identifiers of web control in ASP.NET.
Web controls contain several identifiers : ID, UniqueID, ClientID and AssosiatedControlID. What are they?
“Theory”
ID is a unique identifier of element which helps us to access programmatically to the controls properties, methods and events. Each control on the page should contain unique value of the ID property. In Visual Studio value of ID property will be set automatically after dragging and dropping element from toolbox to the page. Property is not readonly and can be changed by programmer to have more explainable name. In case of missing ID compiler will not generate an error and control will be generated on a page but access to control will be lost.
ClientID is an identifier of the rendered element on html level. It helps us to access the element by script languages or css. ClientID is a read only property and generates automatically. Common usage of this property is when we are programmatically creating script code from code behind level and need to specify the ID of element in the script’s code.
For instance:
protected TextBox txtMyTextBox;
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("<script>");
sb.Append("function MyFunction()");
sb.Append("{");
sb.AppendFormat("document.getElementById('{0}').value = 'Test'; ", this.txtMyTextBox.ClientID);
sb.Append("}");
sb.Append("</script>");
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CustomKey", sb.ToString());
}
UniqueID is an identifier which generated automatically by ASP.NET to identify control within a page as there can be several controls with the same ID included in different containers. UniqueID generates based on ID of container and ID of control. ASP.NET accesses to Page’s element through UniqueID of the element.
“How does it work”
I think it is time to code a little bit. Let’s create a new web project and on default page add Label control with ID=”MyLabel”.
<asp:Label ID="MyLabel" runat="server" Text="My Label on a page "/>
Then in Controls folder let us to add new User Control called MyUserControl.ascx and add Label control inside of the user control and set ID of the Label control to “MyLabel”.
<%@ Control Language="C#" AutoEventWireup="true" ... %>
<asp:Label ID="MyLabel" runat="server" Text="My Label in user control"/>
Let add this user control into the page where previous Label controls is located. Now we have two elements on a page “MyLabel” and “MyUserControl “ (which contains another “MyLabel “ control).
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="MyLabel" runat="server" Text="My Label on a page"></asp:Label>
<br />
<br />
<uc1:MyUserControl ID="MyUserControl1" runat="server" />
</div>
</form>
</body>
Let’s to set a breakpoint in Page_Load level of page initialization and investigate identifiers of the Label controls which we have on a page: one is located directly on a page and the second one inside of UserControl. As you can see ID property of the both controls are the same like we set.
There is no issue with this as server identifies control by UniqueID and not ID. You can see it in next image. UniqueID of the Label which was set directly on the page has the same value as ID but Label control located in MyUserControl has UniqueID which ASP.NET generates by concatenation of container’s ID and control’s ID divided by “$” sign (in ASP.NET 1.1 it is “:”).
The same story with a ClientID. In case whether control located in some kind of container ASP.NET generates ClientID based on container ID and control ID divided by “_” sign.
Here is the result of rendered html code :
“What about AssosiatedControlID”
In ASP.NET 2.0 Label web control contains a new property, AssociatedControlID, which points to another input control such as a TextBox control. When the property is set, generated tag of the Label control will be not <span> but <label> For attribute of <label> element assumes the clientId of the associated control as the value.
ASP.NET code:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" Text="Label Text" />
Generated Html code:
<input name="TextBox1" type="text" id="TextBox1" />
<label for="TextBox1" id="Label1">Label Text</label>
The result of rendering is that after clicking on label assosiated textbox control will get focus.
“Summary”
It is very important to understand the difference between identifiers as you will use them almost everywhere during web development.
