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:

1. Set the client-side id value to the name of the Web control's server-side ID value.
2. 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 IDproperty 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 (namedContentPlaceHolder1, 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 namedlblName. 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 theControl 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 ClientIDRowSuffixproperty, 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.

...