ASP.NET Master Page Content Page's IDs all changed, breaking CSS based on original element IDs? Are you kidding me

Question

ASP.NET Master Page Content Page's elements all seem to be having their ID's changed or prepended by the ASP.NET page renderer.

This breaks all CSS styles based on the original element IDs.

Is this seriously how it works? If so, is there a way around it?

Acicula

Answer 1

Yes, you can specify the ClientIDMode set it to static.

examples:

Client Side

<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>

Code Behind

TextBox txtBox = new TextBox();
txtBox.ID = "TextBox1";
txtBox.ClientIDMode = ClientIDMode.Static

By setting it to static...

The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.

---

Update thanks to @Chris Lively for the additional info

---

Page Level

<%@ Page Language="C#" ClientIDMode="Static" AutoEventWireup="true"...

Application Level

<system.web>
    <pages clientIDMode="Static"></pages>
</system.web>

references:

• http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx

• http://beyondrelational.com/blogs/hima/archive/2010/07/16/all-about-client-id-mode-in-asp-net-4.aspx

Stockwell

Note this was introduced in ASP.net 4.0 – Goldstone

Also, it can be controlled in the web.config for the entire project in the <pages> section. – Extraversion

@Chris, I was not aware of that. Thanks! – Stockwell

Answer 2

I think you need to use the ClientID property instead of the ID property.

Documentation: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

Wat

I'm not sure this would help in the case of a linked stylesheet – Goldstone

@Jon P, It would. The ClientID generates the DOM element's ID, which is what is formatted by the linked stylesheet. – Wat