Setting clientID

higgsy · April 15th, 2009, 05:39 PM

Hello,

As part of a website im building, there are hyperlinks which form the top navigation. To style these hyperlinks i have created styles within CSS using an ID rather than a class, basically because CSS best practices would dictate using an ID where there is only one existence of that element.

The problem is I am using .NET master pages which means that my hyperlinks are rendered with id's like ctl00_navItem. I only know of 3 ways to get round this, none of them seem like a good solutions.

1) Override the UniqueID and ClientID properties so that the ctl00 ID's are not generated - this obviously poses risks that Microsoft intended to negate by using such unique ID's.

2) Create classes in my CSS and use the .NET CssClass attribute - again, this is changing the way css development is intended to be implemented just to accomodate .NET.

3) Name my ID's within my CSS ctl00_ElementName. As i havent actually set the IDs of my elements with these unique ID's, i presume there is a risk that these IDs could programmatically change as the application grows - this would render my css useless!

Any ideas anyone?

Thanks in advance
higgsy

Lee Dumond · April 16th, 2009, 12:44 AM

This is actually a pretty good question. I am asked this a lot by other colleagues and such.

First of all, let me say that I congratulate you for favoring ID selectors over classes where you can. That is the way CS is supposed to work, yet many developers (especially ASP.NET guys it seems) never seem to grasp this, or understand why they should even care. So you are on the right track there.

Quote:

Override the UniqueID and ClientID properties

Really bad idea. You already know why.

Quote:

Create classes in my CSS and use the .NET CssClass attribute

Valid, yet far less than ideal. This is what I call the "Class-itis Approach", and unfortunately it is the one far too many ASP.NET devs seem to opt for. Seriously, if you're just going to stick class attributes on every tag, why not just use inline styles and forget the stylesheets altogether, right?

Quote:

Name my ID's within my CSS ctl00_ElementName

While not totally ideal either, this is by far the best approach of the three, as it comes the closest to the spirit of true CSS design principles. I've done it this way many many times, and I can tell you that in actual practice it is far less problematic than you might otherwise think.

The key is to try to get as much of the UI in place as you can up front. Then, during the development phase, as long as the UI remains relatively stable, the chances that you will introduce a "breaking" change that messes up an ID is relatively low. If you happen to do that, just change the stylesheet to target the correct ID -- no big deal.

Once the UI is set, there is no chance at all that the IDs will just "spontaneously" change without intervention from you. In other words, if you don't mess with it, it won't mess with you.

Hope this helps.

Imar · April 16th, 2009, 01:28 AM

Not very useful at this moment, I know, but you could delay and delay and delay the project, wait for .NET 4.0 to arrive and then manually set the control IDs:

http://weblogs.asp.net/asptest/archi...-overview.aspx
http://www.mostlylucid.net/archive/2...p.net-4.0.aspx

On top of the useful things that Lee said, you could also try to favor inheritance. While of course not always possible you may not always need an id but instead you could use a parent element as a reference to your iems. For example:

Code:

 
<div id="MainMenu">
  <asp:Repeater....>
    <a href=....... />
  </asp:Repeater>
</div>

Instead of referring to each <a> menu item using an ID, you could of course refer to its parent:

#MainMenu a
{
....
}

You probably knew that already, but I wanted to mention it anyway...

Imar

Lee Dumond · April 16th, 2009, 01:39 AM

Great point from Imar about the upcoming 4.0, and the ability to set the ClientID on child controls.

I meant to mention that. Really, I did.

higgsy · April 16th, 2009, 03:53 PM

Thanks so much for your feedback, its really useful info, and great to know that this will be addressed in .NET 4.0.

Regards,
Al

Lee Dumond · April 16th, 2009, 04:18 PM

Quote:

Originally Posted by higgsy

Thanks so much for your feedback, its really useful info, and great to know that this will be addressed in .NET 4.0.

Regards,
Al

You're welcome.