无法从后面的代码更改 CssClass

Posted 2023-03-06

【中文标题】无法从后面的代码更改 CssClass

【英文标题】：Can't Change CssClass From Code Behind

【发布时间】：2014-02-04 07:27:44

【问题描述】：

这一定是世界上最简单的事情，但它就是行不通。

我有一个外部 div，我想对其应用一个类以使其显示样式 = none，以便隐藏其中的所有内容。它实际上是一个 asp:panel 元素，所以我假设我可以在后面的代码中设置 control.CssClass = "my-hidden-class"。

我实际上是在按钮单击处理程序上设置的（取决于某些条件）但该类从未应用。当我在 Firebug 中检查 div 元素时，它甚至没有类属性。它看起来与 .aspx 标记中的完全一样（实际的 css 类很好，当我以声明方式添加它时会应用它）。

另外，如果我在初始获取请求的 prerender 方法中设置 CssClass，我可以看到应用的类。所以我想也许我会将所有逻辑放在预渲染中并相应地更新 Css 类。这也不起作用 - 该类在初始得到应用时就可以了，但随后我无法更改它。

所以，总而言之，我似乎根本无法在事件处理程序中应用来自代码后面的类，我只能将它应用到初始获取请求的预渲染中，并且这个值在所有回发中都保持不变。

我做错了什么？

编辑：这是代码 -

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>

代码背后：

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

更新 - 按钮单击事件来自用户控件，并且已连接以触发更新面板上的更新 - 即正在发生部分回发。我正在隐藏和显示包含 aspx 页面中的 div 并且即使所有服务器端页面事件都在执行我猜页面的内容没有重新呈现所以我没有看到我的改变。

解决方案 - 我最终从服务器中喷出了一些 javascript：

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

然后在tcrpanel后面的用户控制代码：

    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);
    

然后在包含的JS文件中：

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

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

【问题讨论】：

能把相关代码放上来吗？将有助于确定问题。

从未遇到过从代码更改类的问题。你在用皮肤吗？

@afzalulh - 是的，使用皮肤，但在这里应该没有任何影响

不幸的是，它有。尽量不要使用皮肤，或者在 jquery 中更改类。

@BROTES DE GERMINADOS - 在你的情况下，皮肤文件无关...我已经测试了你的代码，删除了面板内的控件，它工作正常。是的，我相信您的更新回答了您的问题。

【参考方案1】：

正如怀疑的那样，问题在于发生了部分回发，其中只有更新面板的内容被重新渲染。

也就是说，所有服务器端页面生命周期事件仍在被调用。这让我感到困惑，因为我可以调试并看到 CssClass 被应用但没有在 html 中呈现。我猜这就是 Asp.Net 更新面板的工作方式。

【讨论】：

我有同样的问题，当我删除更新面板时，我可以更改 css 类，关于如何通过更新面板实现这一点的任何更新？