html tag ID's

Topics: ASP.NET 2.0, Themes
Jun 7, 2008 at 9:28 PM
Hi
Does anyone know why html tags that are processed on server-side have their ID replaced with 'ctl00_' + ID name? Where can I change this?

I want to add a custom image generator to the frontpage of my blog. I customise the layout with css based on the id of the image. That's why i dont want to have my image ID replaced on server side.

Thanks!
Jun 8, 2008 at 12:04 AM
That's the internal mechanism of ASP.NET to make the client ID of all HTML controls generated by server side control unique. If your CSS is placed in the same ASPX page, you can replace the ID with its server-side syntax. For example, if your ID is divBlock, its server side syntax is <%= divBlock.ClientID %>.

<style>
#<%= divBlock.ClientID %> {
   font-size: large;
}
</style>

Regards,
Agus Suhanto
Jun 8, 2008 at 12:15 PM
Edited Jun 8, 2008 at 1:44 PM
Hi, Thanks for replying!

Are you sure this is default ASP.NET behavior? I use the same code in other webpages of my site and the tag ID's arent manipulated there.

Example:

Webpage created outside the blogengine framework: http://www.silentdream.be/default.aspx
When you look at the source, you can find an IMG tag with ID="bannerImage". The SRC and ALT attributes of this tag are filled out at the server.

Page within the blogengine framework: http://www.silentdream.be/blogg/default.aspx
The ID of the same IMG tag is changed to "ctl00_bannerImage" after filling out the SRC and ALT attributes at the server.

In the first example i don't make use of master pages. Maybe tag ID's are manipulated in .NET when using master pages to make sure that all ID's are unique? I wish this was configurable... :)

Thanks again!
Chris




Jun 10, 2008 at 1:01 AM
I have the same wish with you, 'cause now I have the same problem with referenced JavaScript files that access server control's elemen in a content page. For the time being, my solution is just to put the JavaScript codes into the same ASPX content page.

Regards,
Agus Suhanto
Jun 10, 2008 at 1:40 AM
Hi Silentdream,
ASP.NET control always change control ID and name if it placed inside other control. ASP.NET control naming structure using ParentControlID_YourControlID pattern. If parent control have not ID, default id is ctlnnn where nnn is control index. ASP.NET server controls inside ContentPlaceHolder always prefixed with ContentPlaceHolder's id so that your image id is changed.
Agus, are you sure <%= tag can be used in the css definition?
I suggest you to use CSS class instead of name for ASP.NET server control.
Jun 10, 2008 at 9:18 PM
Of course, server tags can also be place inside CSS definition as long as it is in the same ASPX page. Just try it!

Regards,
Agus Suhanto
Jun 11, 2008 at 8:37 PM
Hi guys,

Thanks for helping out. I guess you're both right. It just depends on personal preference. :)

As for me, i dont really like to put my css styling and scripts inside the ASPX page... so i prefer the css class and id solution, although it's not perfect... As for now, i just replaced the auto-generated 'ctl00' prefix of the masterpage ID with my own custom prefix in the page_load event.

But now it's time for a well deserved holiday! See you in two weeks! ;-)




Jun 16, 2008 at 7:55 AM
Check this out, maybe it can help: http://weblogs.asp.net/joewrobel/archive/2008/02/19/clientid-problem-in-external-javascript-files-solved.aspx.

Regards,
Agus Suhanto