Solved

Why does (runat="server") prefix my id tags with ctl100_?

Posted on 2009-05-07
4
1,836 Views
Last Modified: 2012-05-06
In my html document I have a line like:

            <h1 runat="server" id="testText">SAMPLE HEADING</h1>

to dynamically change the inner text at run time in the code behind using:

             this.testText.innerText="NEW HEADING";

....

I want to be able to use CSS to style this heading based on the id tag of "testText"; however at run-time the id name gets prefixed with "ctl100_"

Is there a way to prevent this prefixing?

Using C# and ASP.NET 2.0
0
Comment
Question by:ctl100
  • 2
4 Comments
 
LVL 29

Assisted Solution

by:David H.H.Lee
David H.H.Lee earned 50 total points
ID: 24333117
Hi ctl100,
This is .net interpreted id after rendered in HTML version. If you're trying to refer the id in javascript based on rendered ID, you can check its client ID instead.
eg:
<script>
var obj;
obj=document.getElementById('<%= testText.ClientID%>');
obj.className='yourCssClassID';
</script>

Lastly, you can't prevent the prefix include inside the rendered ID. That is spontaneous behavior for the page that running under .net framework.

0
 

Author Comment

by:ctl100
ID: 24333121
So, there is no way to stop .NET from prefixing?
0
 
LVL 9

Accepted Solution

by:
tetorvik earned 200 total points
ID: 24333147
It's .NET Framework that prefixes controls to identify them uniquely. Each control that implements INamingContainer prefixes child controls with its own id.
Therefore ids can grow very large and become unusable in many circumstances. I don't think there is a workaround for that until ASP.NET 4.0 comes in.
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

So until them I would engourage to identify your style with CSS classes.
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24333160
Hi tetorvik,
Good approach for the incoming .net 4.0 framework. Thanks for sharing thought here.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now