How to Add a CSS Class to an Updatepanel in Asp.Net

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

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>

how to change a css class of div in master page from update panel in content page

Without the UpdatePanel you would use FindControl to change the class.

Panel panel = Master.FindControl("Panel1") as Panel;
panel.CssClass = "myClass";

But since you use an UpdatePanel, the easiest way is to use jQuery.

On the master page the Panel and the script

<asp:Panel ID="Panel1" runat="server">Welcome to StackOverflow</asp:Panel>

<script type="text/javascript">
    function changeClass(className) {
        $("#<%= Panel1.ClientID %>").attr("class", className);
    }
</script>

Then in the code behind of the aspx page, you can call that javascript function on PostBack.

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "changeClassName", "changeClass('myClass');", true);

CSS messing up in updatepanel

Wrap the update panel with an asp Panel control as in code below and add CSS styling to asp Panel control and not to UpdatePanel.

You should not apply CSS to update panel. For this reason, it does not have a property of CssClass unlike other web controls.

<asp:Panel id="panel1" runat="server" 
          CssClass ="notifications mCustomScrollbar content3 fluid light">
  <asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional"
        ChildrenAsTriggers="true">
        <ContentTemplate>
            <div>
                <table>
                    <tr>
                        <td style="width: 15%">
                            Action
                        </td>
                        <td style="width: 55%">
                            Description
                        </td>
                        <td style="width: 30%">
                            Date Added
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Panel>

Css class changes to its initial state when update panel of asp.net triggers

Since this is only a clientside change the server does not recognize it and changes it back to the original. You have to either change this from server side or move the part outside the updatepanel. I guess your using the updatepanel for the gridview so you could just do.

<asp:UpdatePanel runat="server" ID="Up1">
   <ContentTemplate>
       <div class="row">
         <div class="col-lg-12">
            <asp:GridView runat="server" ID="grdAirportList" AllowPaging="true" PageSize="5" AutoGenerateColumns="true">
             </asp:GridView>
         </div>
      </div>
   </ContentTemplate>
</asp:UpdatePanel>

Change CSS class from code behind using Update panel - not working

Your linkbutton is outside the update panel.. it won;t update... its not supposed to.. Move it inside your update panel.

Your update panel is not mean to house the button that should update the controls, its actually meant to house the controls and the button.

Change CSSclass of panel

The problem is that the panel is not in the updatepanel...

Can't Change CssClass From Code Behind

As suspected, the problem was that a partial postback was occurring in which only the contents of the update panel were being re-rendered.

That said, all the server side page lifecycle events were still being invoked. This is what confused me as I could debug and see the CssClass being applied but not being rendered in the html. Just the way Asp.Net update panels work I guess.

---

Related Topics