The difference between ID, ClientID and UniqueID

I this post I will try to explain the difference between those three commonly used properties. Each property is described in a separate section. Attached you can find a sample web site as well as two screenshots visually depicting the difference between the ID, ClientID and UniqueID properties.

 

ID

The ID property is used to assign an identifier to an ASP.NET server control which can be later used to access that control. You can use either the field generated in the codebehind or pass the value of the ID property to the FindControl method. There is a catch though - the ID property is unique only within the current NamingContainer (page, user control, control with item template etc). If a server control is defined inside the item template of some other control (Repeater, DataGrid) or user control, its ID property is no longer unique. For example, you can add some user control twice in the same page. Any child controls of that user control will have the same ID.  Also the ASP.NET page parser won’t generate a codebehind field corresponding to the control ID in case the control is defined inside a template. This is the reason you cannot easily find a specific control when it is part of a template - you need to use the FindControl method of its container control instead. As a side note, setting the ID property is not mandatory. If you don’t set it the ASP.NET Runtime will generate one for you in the form of “_ctl0”, “_ctl1”, etc.

 

UniqueID

The UniqueID property is the page-wide unique identifier of an ASP.NET server control. Its uniqueness is guaranteed by prefixing the ID of a server control with the ID of its NamingContainer. If the NamingContainer is the Page the UniqueID will remain the same as the ID.

For example if a Label with ID="Label1" is defined in a user control with ID = "UserControl1" the UniqueID of the Label will be "UserControl1$Label1". Adding another instance of the same user control (with ID = "UserControl2") will make the UniqueID of its child label to be "UserControl2$Label1".

The UniqueID property is also used to provide value for the HTML "name" attribute of input fields (checkboxes, dropdown lists, and hidden fields). UniqueID also plays major role in postbacks. The UniqueID property of a server control, which supports postbacks, provides data for the __EVENTTARGET hidden field. The ASP.NET Runtime then uses the __EVENTTARGET field to find the control which triggered the postback and then calls its RaisePostBackEvent method. Here is some code which illustrates the idea:

IPostBackEventHandler postBackInitiator =

Page.FindControl(Request.Form["__EVENTTARGET") As IPostBackEventHandler;

if (postBackInitiator != null)
    postBackInitiator.RaisePostBackEvent(Request.Form["__EVENTARGUMENT"]);

You can use the UniqueID property to find any control no matter how deep it is nested in the control hierarchy. Just pass its value to the FindControl method of the Page.
 

ClientID

The ClientID property is quite similar to the UniqueID. It is generated following the same rules (the ID of the control prefixed by the ID of its NamingContainer). The only difference is the separator - for the ClientID it is the "_" (underscore) symbol.
The ClientID property is globally unique among all controls defined in an ASP.NET page. You may ask why we need two different globally unique properties. The answer is that ClientID serves a different purpose than UniqueID. In most server controls the ClientID property provides the value for the HTML "id" attribute of the HTML tag of that server control. For example this:

<asp:Label ID="Label1" Text="Label" />

will render as this:

<span id="Label1">Label</span>

 

That’s why you often use the following JavaScript statement to access the DOM element corresponding to some ASP.NET server control:

var label = document.getElementById("<%= Label1.ClientID%>");

which in turn renders as:

var label = document.getElementById("Label1");

 

It is worth mentioning that the values of the ID, UniqueID and ClientID will be the same if the control is defined in the master page (or the page). This however can often lead to unexpected errors. If the ID of the control is hardcoded inside the JavaScript statement (e.g. "Label1") this code will only work provided the control is defined in the Page or master page. Moving the control and the JavaScript code into a userc control with ID "UserControl1" will fail at runtime because the control will now render as:

<span id="UserControl1_Label1">Label</span>

That’s why you should prefer using the "<%= Label1.ClientID%>" syntax to get the client-side id of server controls.

Additionaly the ClientID is used in ASP.NET Ajax as the unique identifier of client-side controls. Thus the following JavaScript statement is commonly used:

var control = $find("<%= MyControl1.ClientID %>");

Example

I have attached a sample web site which demonstrates the difference between those three properties of controls defined in a page (without a master), master page, content placeholder and user control. Here are two screenshots from the output:

Normal ASPX page (without a master page):

Master page scenario:

 

I hope this helps.