Hi,

in chapter 8 there's a note about how the asp.net runtime can change html control's 'id' attribute making it difficult to use css id selectors in some cases. The note goes on to say "Alternatively you can use the control's ClientID when using embedded style sheets", and I don't understand that sentence...how can the ClientID be used in style sheets and why's it limited to embedded style sheets?

Hi there,

Imagine that your client ID ends up like this:

ctrl00_somecontrol_someid

Then in an external CSS file you could use:

#ctrl00_somecontrol_someid
{
// rules here
}

to target that element by its ID.

For embedded or in-line styles you don't need this as you could (for embedded) directly use the client ID:

#<%= yourControl.ClientID %>
{
// rules here
}

For in-line CSS this is not relevant at all since you define the CSS directly on the control's element.

Note that this should be a last resort as it's pretty fragile (rename or move the control and things break). It's much easier to use class selectors here than id selectors.

Cheers,

Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

ah, thanks. I didn't realise that this sort of thing was possible:

#<%= yourControl.ClientID %>

and I can't find any examples of it being used.

At the risk of sounding ignorant, why doesn't the same work with external css?

It doesn't work with external references to CSS files because yourControl.ClientID has no meaning in a CSS file. A request for a CSS file is a separate request, and from the perspective of the ASP.NET processing pipeline completely unrelated to the page that references it. So, the CSS file is a) not processed by .NET and b) even it were, it wouldn't understand the reference to your control.

Hope this helps,

Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

hmm, so embedded css and css in an external file are processed in completely different ways (the former is processed by .Net, the latter isn't)?

More or less....

External CSS files are treated as static files and served by IIS directly without involvement of .NET

Embedded CSS in an ASPX page isn't really processed by .NET either; it's plain content and streamed to the browser directly. However, <%= yourControl.ClientID %> *is* processed by .NET because of the server side tags. In this example, this code writes the ID of the control to the output stream where it just happens to end up in an embedded CSS code block, making it CSS. You could use this code in another location and it would end up as HTML or text.

Does this clarify things?

Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

ok, I finally got it = thanks Imar!!