August 20th, 2008 - by Golgotha

I love ASP.NET, but one thing I find extremely frustrating is dealing with the automatically generated ID properties that it places on page elements.

For example, let’s say you have a div with an id of “contentTop” like below:

  1. <div id="contentTop" runat="server" >...</div>

Because you have made the control a server-side control by adding the runat=”server” attribute it will now be rendered with a different ID when it hits the browser (view the source code and you will see). It will get rendered as something like this:

  1. <div id="ctl00_contentTop" >...</div>

This is because ASP.NET generates its own IDs to ensure that every element on the page has a unique ID. Developers that work with JavaScript and CSS will immediately see the problem. This causes difficulty when using JavaScript and CSS which rely on those IDs to reference elements, as they can’t easily predict what the generated ID will be. When it comes to CSS specificity the ID selector is extremely useful. In addition, anyone that uses JavaScript knows that getElementById (or one of the JavaScript library ways) is the most popular way to target an element. So why the hell does ASP.NET do this to us? Honestly, I can’t really tell why, other than the fact that they must not trust us enough to be able to uniquely ID our elements ourselves.

But I don’t want to just complain here, I would like to provide some solutions too.

Solution

The solution will be found in the ClientID property of the server-side control. The ClientID property represents the ID that ASP.NET will use for the element on the client.

Using the ScriptManager we place the ClientID in a hidden form field. This can all be done in the code-behind file by using the following code:

  1. ScriptManager.RegisterHiddenField(this, "contentTop", contentTop.ClientID);

Be sure to have included the ScriptManager to your page, like so:

  1. <asp:ScriptManager ID="ScriptManager1" runat="server">
  2.     </asp:ScriptManager>

Now we can use JavaScript to retrieve the value from our hidden form fields.

javascript

  1. var id = form1.contentTop.value;
  2. var cTop = document.getElementById('id');

That’s it, if you know of another way, please let us know.
Happy coding.

7 Responses to “IDing the Problem of ASP.NET”

1 Jack Hughes

Good hint…had a look at the MVC framework yet for ASP.NET?

2 Adrian Banks

The ids are auto-generated to avoid duplicates. If you have a control inside a repeater control, you’d end up with several controls with the same id.

3 Brian Nash

Part of the reason asp.net does this is because the controls (like a button or label) can repeat inside a datagrid or repeater. This way they get a unique id. I imagine your way would work fine for a single control on a page.

If you register the whole javascript function in C# code you can fill in individual client id’s. But that’s pretty painful unless you just have a couple of little javascript functions.

I always got the feeling that javascript support with asp.net was sort of “fine, if we have too”.

4 Golgotha

@Adrain and Brian – right, of course asp.net does this with the intention of avoiding duplicates. BUT, we should be able to ID the controls ourselves and then have controls like the GridView, ListView and Repeater do their auto-IDing off of our initial ID.

It’s very rare that you would try and target a specific row within these server-controls with CSS or JavaScript, but it’s very likely that you would want to target the controls in general. Even more likely is targeting asp:Panels, asp:PlaceHolder, asp:Button, asp:DropDownList and all the rest.

@Jack – Actually no, I know nothing about MVC. But when I read things like “It enables you to achieve and maintain a clear separation of concerns” and “It provides more control over the URLs you publish in the application and over the HTML that is emitted by the application” I can’t help but think I need to start learning it. If it’s all that then why doesn’t that just get rolled into ASP.NET 4.0?

5 Tony

You can also use:

Like so:

var cTop = $get(”
“);

or

var cTop = $(“#”);

The ASP.NET engine will parse the IDs for you at runtime. The bad news is that you cannot use this method in HTML markup such as:

<input type=”button” onclick=”Show(‘
‘)” />

This will parse and render the encoded version of the angle brackets. (&lgt;)

6 Tony

All that white space should have shown:

7 Tony

Lets try again, within angle brackets:

%= contentTop.ClientID %

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading