The difference between ID, ClientID and UniqueID

Posted by: the telerik blogs,
on 06 Jun 2008 |
View original

Ref: http://dotnetslackers.com/ASP_NET/re-113573_The_difference_between_ID_ClientID_and_UniqueID.aspx
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:



I hope this helps.