Filed under CSS
I have some CSS that was set up for me by a graphics artist. One of CSS elements is an ID that is used to format a <div> tag all nice and pretty. I decided I needed to manipulate this <div> through code, so I thought I would change it to an <asp:Panel> as I've done in the past. The problem I found was that the panel control has a property called CssClass, where you can specify some css to use, but what if I wanted to use my existing css ID and not a css class? Confused about the difference, check this out.
The problem is that ASP.NET will auto generate your control ID's and the ID is what needs to be specified in order to use my css! If I change my <div> to a <asp:Panel>, the ID will be generated something like:
<div id="MainContent_productImage">
It prefixes the ID with the parent container, in this case, a MainContent div. Well, I want the ID to be productImage so my styling is applied.
In ASP.NET 4.0, there is a new ClientIDMode property. I set the ClientIdMode to "Static" and I get the exact ID I want. That is,
<asp:Panel id="productImage" runat="server" ClientIDMode="Static">
will render out as:
<div id="productImage">
I get the benefit of manipulating the <div> in code behind before it's rendered AND I get to keep the ID I want!
I could go into a long tuturial here, but Rick Strahl has an excellent-as-always post here
Here's an MSDN link
a280c1c1-93e0-4f50-b287-95002fdbf7cf|0|.0