Can't Change CssClass From Code Behind

Question

This has to be the simplest thing in the world but it just isn't working.

I have an outer div to which I want to apply a class to make its display style = none so that it hides all the content within it. It's actually an asp:panel element so I'm assuming I can just set control.CssClass = "my-hidden-class" in the code behind.

I'm actually setting this on a button click handler(depending on certain conditions) But the class is never applied. When I inspect the div element in Firebug it doesn't even have a class attribute. It appears exactly as it is in the .aspx markup (the actual css class is fine & gets applied when I add it declaratively).

Also, I can see the class applied if I set CssClass in the prerender method on the initial get request. So I thought maybe I'll put all the logic in prerender and update the Css Class accordingly. This also doesn't work - the class gets applied on the initial get ok but I can't change it subsequently.

So, to sum up it seems I can't apply class from code behind at all in the event handler and I can only apply it in prerender for the intial get request & this value is persisted on all postbacks.

What am I doing wrong?

Edit: Here's the code -

aspx:

        <asp:panel runat="server" ID="TariffContainer"><!--this is the div I want to toggle-->
        <cms:ContentBlock ID="currentTariffsInfo" SkinID="Public/OurPrices/CurrentTariffsInfo" runat="server" />
        <ucTcrPanel:tcrpanel ID="tcrpanel" PagingEnabled="true" runat="server"  />

       <div class="quick-price">
            <asp:LinkButton runat="server" CausesValidation="false"  ID="QuickEnergyPrice" OnClientClick="Javascript:return false;" CssClass="button subcontent"><span>Get a quick energy price</span></asp:LinkButton>
        </div>
        <div class="not-for-sale">
        <cms:ContentBlock ID="preservedTariffsLinkInfo" SkinID="Public/OurPrices/PreservedTariffsLinkInfo" runat="server" />              
            <p>
            <asp:LinkButton runat="server" CausesValidation="false" ID="ViewNotAvailableTariffs" OnClick="RedirectToUnavailableTariffs" cssclass="arrow">View tariffs not available for sale</asp:LinkButton>
            </p>
        </div> 
    </asp:panel>

Code Behind:

        protected void PostCodeChange_BtnClick(object sender, EventArgs e)
    {
        if (IsValid)
        {
            tcrpanel.ApplyPostcodeUpdate(postcode.EnteredPostCode);
            tcrpanel.TcrUpdatePanel.Update();
        }
        else
        {
            TariffContainer.CssClass = "formContentHidden";
        }
    }

Update - The button click event is coming from a user control & this is wired up to trigger an update on an update panel - i.e. a partial postback is happening. I'm doing this hiding & showing of the div in the containing aspx page & even though all the server side page events are executing I'm guessing that the content of the page isn't getting re-rendered so I'm not seeing my changes.

The Solution - I ended up squirting a bit of javascript down from the server:

    protected void PostCodeChange_BtnClick(object sender, EventArgs e)
    {
            tcrpanel.ApplyPostcodeUpdate(postcode.EnteredPostCode);
            tcrpanel.TcrUpdatePanel.Update();
    }

Then in the tcrpanel user control code behind:

    public void ApplyPostcodeUpdate(string postcode)
    {
        if (IsValid)
        {
            BuildStartUpScript("showTariffContainer();");
        }
        else
        {
            BuildStartUpScript("hideTariffContainer();");
        }
    }

    private void BuildStartUpScript(string functionCall)
    {
        StringBuilder script = new StringBuilder();
        script.AppendLine("<script type=\"text/javascript\">");
        script.AppendLine(functionCall);
        script.AppendLine("</script>");
        ScriptManager.RegisterStartupScript(pnlUpdateTcr, pnlUpdateTcr.GetType(), "HideTariffContainerScript", script.ToString(), false);
    }

Then in the included JS file:

   function hideTariffContainer() {
          $("div.formContentVisible").toggleClass().toggleClass("formContentHidden");
    }

    function showTariffContainer() {
          $("div.formContentHidden").toggleClass().toggleClass("formContentVisible");

}

Answer 1

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.