is there a simple way to remove the "ct100" prefix from a .NET user control?

Question

Long story short, dozens of pages use no master page. For a new module I created a master page with a menu control (menu control exists already) so I can get the same look across the six or so pages I'm creating now. Since the content page uses the master page, the Menu control has its name changed to ct100_Menu1 instead of just Menu1. Wouldn't be an issue except someone decided to use the exact name of the control for the CSS that styles the menu, by its exact ID (e.g. CSS is Menu1 a { /* stuff */ }). So the menu won't render properly because I'm using a Master Page and not just copying the code.

I cannot change the CSS code in the menu file as it could break something, so is there any way that I can change the control to not display that pesky ct100 without having to add any tools or mess with creating my own custom control (as I can't replace the Menu.ascx control, although I might be able to modify it to add CSS classes) or is my only choice to either not use a master page or copy the menu CSS into another file and set it properly?

Feel kind of stuck between a rock and a hard place because the code was deliberately written so you cannot use Master Pages and nobody ever went back to change it.

Raul

Another reason to use class names, not IDs when using .NET – Deakin

It might be possible to add a custom response filter, and parse out the extra bits with a regex or something. msdn.microsoft.com/en-us/library/… (I am aware this is a really hackish thing to do, that would probably just hurt maintanability in the long run) – Insatiable

Answer 1

If you are on ASP.net 4.0, you can set the ClientID property of the controls.

Otherwise, you're in for a world of hurt as in: Custom Control, ASP.net Literals or JavaScript to change the IDs.

Dissension

3.5 :( Looks like my only choice is to copy the CSS then, at least without spending "too much time" on other stuff (because then I'll get reprimanded for wanting to use the master page in the first place instead of just copy/pasting, which is viewed as quicker...) – Raul

Answer 2

You should set the ClientIdMode to Static. Here's more information from MSDN. Note: This is .NET 4.0 only.

In earlier versions, I would recommend styling off of classes as you can't really control what the name will be everywhere that you use it (as you found out).

Bodnar

Answer 3

Are you using .NET 4? If so, you can set this on your control:

 <asp:SomeControl ClientIDMode="Static" />

Gird

Answer 4

Just add the new name to the CSS - without removing the old (since you said that was an issue):

 ctl100_Menu1 a, 
 Menu1 a { /* stuff */ }

Tisatisane

What happens if Menu1 has a different name on a different page? You just keep adding to that selector. I wouldn't say this is optimal. – Bodnar

It currently always has the name Menu1 - adding a master page in a consistent way should cause it to always have the name ctl100_Menu1. If that proliferates, I'd have to agree that it isn't optimal. – Tisatisane

Answer 5

If you are using ASP.NET 4.0, you can override the ClientId rendering mode, either per control, or for all controls. For instance:

<my:Menu runat="server" Id="Menu1" ClientIDMode="Static" />

This will enforce that the value "Menu1" is preserved as the client side Id for the element that is rendered. (see here).

What I would recommend though, is apply a CSS class to the menu element, and then adjust the CSS rules around a class. E.g.,:

#Menu1 a {

... to:

#Menu1 a,
div.menu a {

... etc

Towroy

Answer 6

To "correct" this behavior for your entire web application, look in your web.config for the following tag:

<system.web>
    ...
    <pages ... clientIDMode="*something*">
    </pages>
    ...
</system.web>

Remove the clientIDMode="*something*" property specification. Just take it out.

Yay.

Liturgy