How can I add a css class to an updatepanel in ASP.Net?

Question

How can I add a css class to an updatepanel in the c# code behind file of asp.net

Answer 1

As you've seen the update panel doesn't have a css class property. So since it can't be done directly you need a work around; there are two (Grabbed from UpdatePanel and CSS) that can get the behavior you desire.

One is to surround the update panel with a div:

<div id="foo" style="visibility: hidden; position: absolute">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</div>

The other is to apply a css selector based on the update panel's id:

<style type="text/css">
#<%=UpdatePanel1.ClientID%> {
    visibility: hidden;
    position: absolute;
}
</style>

Yet another way not mentioned in the article is surround the panel in a div and style the update panel based on it rendering as a div:

<style type="text/css">
#foo div {
    visibility: hidden;
    position: absolute;
}
</style>

<div id="foo">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</div>

Answer 2

An update panel can render as a div or span (depending on mode). Easiest way to achieve what you want is to wrap the UpdatePanel in a standard Panel:

<asp:Panel ID="Panel1" runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
</asp:Panel>

The you can just do this in codebehind:

Panel1.CssClass = "myCssClass";

You could also use a div, like LFSR Consulting said, and add runat="server" and then change the class attribute. But Panel is a bit easier to work with (a Panel just renders as a div).