Simple way to add/remove an additional CSS class on a standard ASP.NET web-forms control

Question

I have a navigation menu as an ASP.NET web-forms user control (ASCX). Each menu item can become active depending on the page the control is rendered at. The active state should be denoted with an additional CSS class named "active". What item to become active is controlled from the code-behind file by setting to true one of these properties: IsMenuItem1Active or IsMenuItem2Active.

Now my question is: How, based on the set property, can I modify the CssClass property of the corresponding menu item inside the view without doing any additional logic in 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>

Just add the statement to add class in code behind its not big deal. — Bhavesh Kachhadiya
– Bhavesh Kachhadiya, Commented Nov 14, 2013 at 20:19
It is a big deal as I don't want to recompile the project if I just want to change a class name. That's the solely reason why the code-behind is separated from the view, so that design aspects could be changed without messing with the logic. — Trident D'Gao
– Trident D'Gao, Commented Nov 14, 2013 at 20:23
And here is the right answer: stackoverflow.com/questions/19990046/… Thank you everyone! — Trident D'Gao
– Trident D'Gao, Commented Nov 14, 2013 at 23:21

matk · Accepted Answer · 2013-11-14 20:41:08Z

0

Keeping with the separation of design and logic, it would be better to control the CssClass value from code behind. Any design changes that you will need to make can be done through the CSS represented by the active class name you're adding.

If you absolutely must do this in the view, then you could use a bit of JavaScript:

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

answered Nov 14, 2013 at 20:41

matk

1,5182 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhavesh Kachhadiya · Accepted Answer · 2013-11-14 20:41:40Z

Please try following code :

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

Community · Accepted Answer · 2017-05-23 10:31:43Z

0

I would suggest two ways to do it. One way is by using javascript. The second way is by using asp.net lifecycle hook functions for the specific control.

First option: According to this, you could add a css class to a specific element using this:

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

This call should be made in the onLoad function which is called just before the HTML DOM is created.

Second option: According to this article describing the ASP.NET lifecycle, you could use the PreRender function in order to add the css class.

Hope I helped!

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Nov 14, 2013 at 20:52

Pantelis Natsiavas

5,3875 gold badges24 silver badges40 bronze badges

Collectives™ on Stack Overflow

Simple way to add/remove an additional CSS class on a standard ASP.NET web-forms control

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related