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

我有一个作为ASP.NET web表单用户控件（ASCX）的导航菜单。 根据控件呈现的页面，每个菜单项都可以变为活动状态。活动状态应该用一个名为“

active

”的附加CSS类来表示。 通过将以下属性之一设置为

true

，可以从代码隐藏文件控制要激活的项目：

IsMenuItem1Active

或

IsMenuItem2Active

现在我的问题是：如何基于set属性修改视图中相应菜单项的

CssClass

属性，而不在code behind中执行任何附加逻辑？

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

菜单项1
菜单项1

为了保持设计和逻辑的分离，最好从代码隐藏中控制CssClass值。您需要进行的任何设计更改都可以通过您正在添加的

active

类名表示的CSS来完成

如果必须在视图中执行此操作，则可以使用一点JavaScript：

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

变量c=''
document.getElementById（“”）.setAttribute（'class'，c）；

请尝试以下代码：

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

菜单项1
菜单项1
document.getElementById（“”）.className+=“活动”；
document.getElementById（“”）.className+=“活动”；

我建议两种方法。一种方法是使用javascript。第二种方法是使用asp.net生命周期钩子函数进行特定控件

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

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

这个调用应该在创建HTML DOM之前调用的

onLoad

函数中进行

第二选项： 根据描述ASP.NET生命周期的文章，您可以使用

PreRender

函数来添加css类

---

希望我能帮忙

只需添加语句即可在代码中添加类，这没什么大不了的，因为如果我只想更改类名，我不想重新编译项目。这就是将代码隐藏与视图分离的唯一原因，这样就可以在不干扰逻辑的情况下更改设计方面！