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-sideID
value. - Inspect the Web control's parent controls. For each naming container encountered, prefix the client-side
id
value with theID
property of the naming container.
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 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-sideid
value as in previous versions of ASP.NET.Static
- the client-sideid
value is the same as the server-sideID
property value.Predictable
- used for controls with repeating templates, like the GridView or ListView. When selected, the client-sideid
value is concatenated with a specifiedClientIDRowSuffix
property, which is the name of a data field whose value is appended to the generated client-sideid
.Inherit
- specifies that the control's client-sideid
value be generated the same way as its parent.