Problems with Custom User Controls

[ILoveJackDaniels]

Hi all. Sorry my first post is a request begging for help, but me and my team are stumped.

We're using custom user controls in our web sites. This is to allow us to dynamically build pages based on database information.

When including a custom user control on a page, any web control with a runat="server" attribute has the ID renamed at runtime to include a prefix such as "ct101_". For example:

<div id="divContent" runat="server">some content</div>

becomes

<div id="ct101_divContent">some content</div>

These changes do not seem to be consistent and between us we can't work out how to stop this happening. Our best guess is that this is .NET's way of preventing accidental use of duplicate element IDs.

 

[Paszt]

The changes are usually consistant and are for the reason you put forth. But in all the instances I've seen, the prefix is ctl00 (lower case letters C, T, and L followed by two zeros). This usually doesn't happen for all controls with a runat="server" attribute but for all controls contained in a control that implements INamingContainer (examples include contentPlaceHolders, Wizards, DataGrids, ...)
The ClientID property of the control will return the client side ID of any server side control (control with runat="server" attribute) with its full naming container prefixes.

 

[ILoveJackDaniels]

Thanks, Paszt, that's made it a little clearer!

The controls that are being renamed are web controls contained within a .ascx file.

The main reason this is causing a problem is because we are trying to use ID's of the elements within the .ascx file with CSS to style the pages. Since different web pages include a differing number of .ascx files the web controls do not always end up with the same prefix and styling on ID ceases to work.

Is there a way of turning off the element renaming?

 

[JohnH]

You can't turn off element renaming, it's there to make sure different elements in various containers get unique IDs when everything ASP is generated into a flat Html page.

Alternative is CSS on element class, you can set specific class on individual elements. There is also the possibility to generate linked CSS stylesheet for those elements from ASP where you utilize the ClientID.

 

[Paszt]

You shouldn't be using the ID to reference CSS but instead use the CssClass attribute of the control, at least this is the method I use. When a control with a CssClass attribute is rendered, the output includes a Class attribute. In a stylesheet, you create a style for a class by starting the style with a period. For example if the CssClass attribute value is foo then your CSS style will look like:

.foo {text-align: center;}

The CSS Friendly Control Adapters may also be of interest to you: ASP.NET 2.0 CSS Friendly Control Adapters. They allow you to customize the rendered HTML produced by the control.

 

[ILoveJackDaniels]

You can't turn off element renaming, it's there to make sure different elements in various containers get unique IDs when everything ASP is generated into a flat Html page.

I understand why it's there . I trust myself and my team to manage to avoid using the same id for different elements. It seems ridiculous that turning this off is impossible.

Alternative is CSS on element class, you can set specific class on individual elements.

That's a solution, sure. But the design team have put together a complete and well tested design, using IDs and classes properly. I really wanted to avoid using just classes. However, it seems this is going to be unavoidable.

You shouldn't be using the ID to reference CSS but instead use the CssClass attribute of the control

The ID attribute offers a way to pick out a specific, unique, element in CSS. Their intelligent use alongside classes creates much simpler, easy to manage, and generally less buggy stylesheets. They're a part of the CSS and HTML standards. Suggesting they shouldn't be used would seem to indicate a lack of knowledge or understanding of CSS.

The CSS Friendly Control Adapters may also be of interest to you: ASP.NET 2.0 CSS Friendly Control Adapters. They allow you to customize the rendered HTML produced by the control.

Looks like an interesting solution, though at this point might involve more work than the other options. Thanks.


Thanks for the help, everyone. We'll go with classes until .NET is fixed .

 

[Paszt]

Suggesting they shouldn't be used would seem to indicate a lack of knowledge or understanding of CSS.

Ouch.
Perhaps you missed the last part of my statement:

at least this is the method I use

We'll go with classes until .NET is fixed

Maybe you should report that "bug" to Microsoft.

 

[ILoveJackDaniels]

Ouch

Perhaps I misunderstood - you seemed to me to be indicating IDs should not be used for CSS styling. I'm grouchy in the mornings (and afternoons, and evenings) - sorry if I was a little flame-happy.

Maybe you should report that "bug" to Microsoft.

I can imagine them all now, panicking at the thought there could be one unhappy customer out there. Perhaps even racing to get a fix to me asap.