HTML classes and IDs with with $ or non alpha nume

Question

I'm looking at some site code on an XHTML doctype and from what I'm seeing the framework is ASP.net. The IDs in the HTML has a "$" in there.

For example:

<img id="$ct100templateContent$SectionPanel1$ctl01$ctl02ctl00_templateContent_SectionPanel1_ctl01_ct999img" src="this.jpg"/>

From a W3C semantic point of view the "$" is not valid in an ID or Class. IDs and classes can only contain alpha numeric characters in an XHTML doctype.

Is the the "$" a ASP.net naming convention referencing a web control or template item?

Answer 1

The $value stands for the level of which the control is embedded in your site/page. You can also change ClientIDMode to Static to make use of your own ID's.

Answer 2

I'm a little confused how/why you're seeing dollar signs in the id.

When rendering a Web control into markup, ASP.NET generates the element's id and name attributes based on the Web control's ID property and its location in the control hierarchy. In short, certain controls - such as templated controls or repeating controls - act as naming containers. Such controls' ID property values are prefixed to their inner controls' ID property values when determining the id and name attributes.

For example, consider the following control hierarchy:

Here, the Master Page (ctl00) and ContentPlaceHolder (MainContent) controls are naming containers. The Age TextBox Web control will have a rendered id of clt00_MainContent_Age - namely, its own server-sideIDproperty value prefixed with theID` values of its naming container ancestors.

But note how the rendered id is separating each naming container spot with an underscore. This is the default functionality in ASP.NET, so I am perplexed as to why you are seeing dollar signs in the id attribute. (When formulating the name attribute, ASP.NET separates each naming container spot with a dollar sign, but it shouldn't use $ when formulating the id attribute value.)

What version of ASP.NET are you using? Are you doing anything... weird? Like using custom controls and overriding the base Control class's IdSeparator property? If you are using ASP.NET 4, are you setting (either intentionally or unintentionally) the control's ClientIDMode property?

Answer 3

Yes, ASP.NET uses the '$' symbol when it generates the IDs of controls based off the hierarchical page layout. ASP.NET does not use the '$' symbol in class names.