在标准 ASP.NET Web 窗体控件上添加/删除附加 CSS 类的简单方法答案

【问题标题】：Simple way to add/remove an additional CSS class on a standard ASP.NET web-forms control在标准 ASP.NET Web 窗体控件上添加/删除附加 CSS 类的简单方法
【发布时间】：2013-11-14 20:14:41
【问题描述】：

我有一个导航菜单作为 ASP.NET 网络表单用户控件 (ASCX)。每个菜单项都可以根据控件呈现的页面变为活动状态。活动状态应该用一个名为“active”的附加 CSS 类来表示。通过设置为true 以下属性之一，可以从代码隐藏文件控制要激活的项目：IsMenuItem1Active 或IsMenuItem2Active。

现在我的问题是：如何根据设置的属性，修改视图内相应菜单项的CssClass属性而不在代码隐藏中做任何额外的逻辑？

<div class="menu">
    <asp:HyperLink runat="server" ID="MenuItem1" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
    <asp:HyperLink runat="server" ID="MenuItem2" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
</div>

【问题讨论】：

只需在代码中添加语句添加类就没什么大不了的了。
这很重要，因为如果我只想更改类名，我不想重新编译项目。这就是代码隐藏与视图分离的唯一原因，因此可以在不弄乱逻辑的情况下更改设计方面。
这是正确答案：stackoverflow.com/questions/19990046/…谢谢大家！

标签： c# asp.net webforms

【解决方案1】：

保持设计和逻辑的分离，CssClass的值最好从后面的代码中控制。您需要进行的任何设计更改都可以通过您添加的 active 类名所代表的 CSS 来完成。

如果您绝对必须在视图中执行此操作，那么您可以使用一点 JavaScript：

<script>
var c = '<%= IsMenuItem1Active ? "menu-item active" : "menu-item" %>'
document.getElementById('<%= MenuItem1.ClientID %>').setAttribute('class', c);
</script>

【讨论】：

【解决方案2】：

请尝试以下代码：

            <div class="menu">
                <asp:HyperLink runat="server" ID="MenuItem1" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
                <asp:HyperLink runat="server" ID="MenuItem2" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
            </div>
            <%-- Change css here--%>
            <script type="text/javascript">
            <%if (IsMenuItem1Active == true)
             {%>
                document.getElementById("<%=MenuItem1.ClientID%>").className += " active";
           <%}
            else if (IsMenuItem2Active == true)
            {%>
                document.getElementById("<%=MenuItem2.ClientID%>").className += " active";
           <%}%>
            </script>

【讨论】：

【解决方案3】：

我会建议两种方法来做到这一点。一种方法是使用 javascript。第二种方式是针对具体控件使用asp.net生命周期钩子函数。

第一个选项： 根据this，您可以使用以下方法将 css 类添加到特定元素：

document.getElementById("MyElement").className += " MyClass";

应该在 onLoad 函数中进行此调用，该函数在创建 HTML DOM 之前调用。

第二个选项： 根据描述 ASP.NET 生命周期的 this 文章，您可以使用 PreRender 函数来添加 css 类。

希望我能帮上忙！

【讨论】：