id and classes in asp.net

[Violet_82]

Hello guys, I'd like to clarify a few things with IDs and classes. As I've learned so far, ASP.NET adds its own id and overwrite the previous one, if there was any. Let's just take a recent example, the panel I added in my previous thread:

<asp:Panel ID="ThankYouPanel" runat="server">
        <div class="thankYouMsg" id="thankYouMsg" runat="server">
          <h2>Thank you for your feedback.</h2>
        </div>
    </asp:Panel>

OK, so I want this panel to be hidden when the page load. Glossing over the fact that it could be easily done in c# with

protected void Page_Load(object sender, EventArgs e)
    {
        ThankYouPanel.Visible = false;//hide thank you message
        ...
     }

(in fact let's comment that out), I thought I'd like to do it in the CSS, because undoubtly as I progress with ASP.NET there will be times when that's necessary. So, how do I do it then?! If I check firebug the id of the panel (which is now rendered as a div) isn't in fact ThankYouPanel anymore but it's now ctl00_contentPlaceholder_ThankYouPanel. So, what do I do? Can the panel have a class? Do I target that id? What really confuse me the most though, is the fact that, even though the id is now different I can still use it in the code behind...
So I can do this ThankYouPanel.Visible = false; using the original id, which as we know, is now gone...why?! Is that because the id gets changed after compilation and the code behind somehow runs before?! WOuld be grateful if somebody could explain it to me

[pritaeas]

Can the panel have a class?

Yes, CssClass just like other controls.

Do I target that id?

You can, but you'll need to use something like this:

<%= ThankYouPanel.ClientID %>

So it's possible to get the id in jQuery/Javascript, but this won't work for CSS directly, as you can't be absolutely sure it will be and stay ctl00_contentPlaceholder_ThankYouPanel.

I'm currently trying out ASP.NET/MVC5/WebApi and I think that's much more like you're used to. It just uses HTML5 controls. Personally I prefer it over the ASP.NET WebForms, just because these "issues" are gone. (It will raise other issues am sure.)

[Violet_82]

Yes, CssClass just like other controls.

So you imply that the class needs to be applied dynamically, but, after I posted this, I tohught I'd try to hard code it, and it looks like it worked (it compiled and the css was there in firebug):

<asp:Panel ID="ThankYouPanel" runat="server" class="thisPanel">
        <div class="thankYouMsg" id="thankYouMsg" runat="server">
          <h2>Thank you for your feedback.</h2>
        </div>
    </asp:Panel>

"You can, but you'll need to use something like this:
<%= ThankYouPanel.ClientID %>
"(sorry the 'quote' doesn't seem to work with code)

Do you mean that goes in the aspx file? So it's a placeholder: is there anywhere I can read more about that, in terms of general rules etc etc

"as you can't be absolutely sure it will be and stay
ctl00_contentPlaceholder_ThankYouPanel
"
Why not? I mean once I check in firebug that the id is that, can it possibly change?

[pritaeas]

Why not? I mean once I check in firebug that the id is that, can it possibly change?

Not as long the ASPX stays the same. If you add another panel before this one, the id will be incremented. BTW, I forgot to mention that it can be turned off:

MSDN

[JorgeM]

If you apply the ClientIDMode to Static, you don't have to worry about these funky asp.net I'ds changing. They will stay the same when rendered in HTML.

[Violet_82]

I just discovered that ClientIDMode isn't available for asp.net 3.5...no wonder why I couldn't get it to work!

[JorgeM]

true, i should have mentioned that. assumed you were >= .net 4

[Violet_82]

No problem :-)!