CSS Style Not Working With ID

Question

I am using asp.net/C# for my project.Currently i have a default.aspx page and a master page.The default.aspx page has many controls , and for each control i have defined class and id. The problem i am facing is that when i apply style to a particular control using the class , the styles are reflected properly, and when i do that using the id of the control the style is not reflected. I rectified the issue but i dont know how to solve that. For instance, I have a textbox with id="txtCustNo" ,, when i apply style like

#txtCustNo{border:1px solid red}

it doesnot reflect ,,,when i apply style like #ctl00_ContentPlaceHolder1_txtCustNo it shows the changes , however the id is txtCustNo..Can somebody point me out where am i going wrong.Thanks .

Answer 1

The ID on server controls is automatically generated and is not the same as the generated ID on the client side.

You can find what the generated ID with be with this: <%# txtCustNo.ClientID %>

ASP.NET 4 supports a new ClientIDMode property on the Control base class. The ClientIDMode property indicates how controls should generate client ID values when they render. The ClientIDMode property supports four possible values:

1. AutoID—Renders the output as in .NET 3.5 (auto-generated IDs which will still render prefixes like ctrl00 for compatibility)
2. Predictable (Default)— Trims any “ctl00” ID string and if a list/container control concatenates child ids (example: id=”ParentControl_ChildControl”)
3. Static—Hands over full ID naming control to the developer – whatever they set as the ID of the control is what is rendered (example: id=”JustMyId”)
4. Inherit—Tells the control to defer to the naming behavior mode of the parent container control

When using ASP.Net before 4.0 you have to live with the auto generated ID's.

For more info on the 4.0 features see this link.

http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

Answer 2

The client ID is not equal to the ID property of a runat="server" control. To get the ID on the client, you can use the ClientID property.

On newer ASP.NET versions (starting with version 4), there is also a ClientIDMode property to control the generation.

So to solve your issue, you could either set ClientIDMode to ClientIDMode.Static or somehow access the ClientID property from code behind and put this value into your CSS definition.

Alternatively you could also:

• Put the text box in some container control (e.g. a div) that has no runat="server" and put an ID into this container control, changing your CSS to e.g. #txtContainer input{border:1px solid red}
• Use the CssClass property of your text box and use this class in your CSS file, instead of the ID.