Take Control Of Web Control ClientID Values in ASP.NET 4

http://www.4guysfromrolla.com/articles/031710-1.aspx

Web controls in ASP.NET also have

ID

values that uniquely identify each Web control. At first blush it may seem that the

ID

property values of an ASP.NET Web control
could be literally translated into the client-side

id

value, since both must be unique. But keep in mind that several ASP.NET files may be used in composing a single web page. For instance, when a browser requests the web page

Default.aspx

,
the ASP.NET engine may be composing the resulting web page from a multitude of sources, including: a master page (

Site.master

); a content page (

Default.aspx

); and, perhaps, one or more User Controls. It is certainly possible that
a Web control in the master page could have the same

ID

value as a Web control in the content page, or in a User Control. Consequently, ASP.NET needs some mechanism to ensure that the client-side

id

values it generates are unique
for the entire web page.
The way this is accomplished is by translating the server-side

ID

value into a client-side

id

value using the following sequence of steps:

Set the client-side

id

value to the name of the Web control's server-side

ID

value.
Inspect the Web control's parent controls.
For each naming container encountered, prefix the client-side

id

value with the

ID

property of the naming container.

Certain types of Web controls are classified as naming containers. For example, master pages and ContentPlaceHolder controls are both naming
containers. To see the effect naming containers have in altering the client-side

id

rendered, create a simple ASP.NET site with a master
page and a content page. Add a TextBox to the content page and set its server-side

ID

property value to something simple, like

txtName

.
Next, visit the page through a browser and do a View/Source. You'll see that the TextBox control's rendered client-side

id

value is something
like

ctl00_ContentPlaceHolder1_txtName

. This is because the TextBox is within two naming containers: the ContentPlaceHolder control in the
content page (named

ContentPlaceHolder1

, by default) and the master page itself (named

ctl00

).

...

Most Web controls that display data or use templates operate as naming containers, as well. To understand why, consider a GridView that
contains a TemplateField with a Label named

lblName

. The GridView renders this template once for each record bound to it, so if four records are bound to the GridView then there will be four Label controls rendered in the page. Imagine what would
happen if the GridView and its rows were not a naming container - the four Label controls would end up having the same

id

attribute value. To prevent this naming conflict the GridView and its rows are made naming containers, resulting
in rendered

id

attributes like:

GridViewID_ctl00_lblName

GridViewID_ctl01_lblName

GridViewID_ctl02_lblName

...

You can tell that the GridView is a naming container because its ID - GridViewID - appears in the rendered client-side

id

attribute. The rows of the GridView
are also naming containers. They appear in the client-side

id

with the auto-generated names

ctl00

,

ctl01

, and so on.
Retrieving the Client-Side

id

Value At Runtime

sample from envykok

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="TestClientID._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var txt = document.getElementById('<%=TextBoxID.ClientID%>');
txt.focus();
});

</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<asp:TextBox ID="TextBoxID" runat="server"></asp:TextBox>
</asp:Content>

Taking Control Of The Rendered Client-Side

id

Value With ASP.NET 4.0
ASP.NET 4.0 grants page developers finer control over how a Web control renders its client-side

id

value
via a new property,

ClientIDMode

.
The

ClientIDMode

property is defined on the

Control

class,
meaning that it applies to all Web controls in the ASP.NET Toolbox, including the

Page

itself.
The

ClientIDMode

property can be set to one of the following four values:

AutoID

- uses the same series of steps for computing the client-side

id

value as in previous versions of ASP.NET.

Static

-
the client-side

id

value is the same as the server-side

ID

property value.

Predictable

-
used for controls with repeating templates, like the GridView or ListView. When selected, the client-side

id

value is concatenated with a specified

ClientIDRowSuffix

property, which is the name of a data field whose value is appended
to the generated client-side

id

.

Inherit

- specifies that the control's client-side

id

value be generated the same way as its parent.

...