How to apply conditional class in Razor

Question

I am adding class to <li> based on the current url.

<ul class="nav navbar-nav">
                            <li class="@{string.Format(Request.Url.PathAndQuery.ToLower() == "" ? "active" : string.Empty);}"><a href="/">Home </a></li>
                            <li class="@{string.Format(Request.Url.PathAndQuery.ToLower().Contains("aboutus") ? "active" : string.Empty);}"><a href="/AboutUs">About Us </a></li>
                            <li class="@{string.Format(Request.Url.PathAndQuery.ToLower().Contains("research") ? "active" : string.Empty);}"><a href="/Research">Research</a></li>
                            <li class="@{string.Format(Request.Url.PathAndQuery.ToLower().Contains("contactus") ? "active" : string.Empty);}"><a href="/ContactUs">Contact Us</a></li>
                        </ul>

When I check the condition in watch, I am getting current class name "active" in visual studio.

But when I check in browser, class doesn't apply to <li>. I am sure that it is not override by any other code. Although If I apply class directly, it works.

why are you using string.Format?

BenG
– BenG

2019-04-11 07:33:26 +00:00
Commented Apr 11, 2019 at 7:33 — BenG
– BenG, Commented Apr 11, 2019 at 7:33

Hien Nguyen · Accepted Answer · 2019-04-11 07:26:45Z

You need change to @(string.Format(Request.Url.PathAndQuery.ToLower() == "" ? "active" : string.Empty)) instead of @{}

<li class="@(string.Format(Request.Url.PathAndQuery.ToLower() == "" ? "active" : string.Empty))"><a href="/">Home </a></li>

Your code should like this with a variable for currentUrl

@{
    var currentUrl = Request.Url.PathAndQuery.ToLower();
}

<ul class="nav navbar-nav">
    <li class="@(string.Format(currentUrl == "" ? "active" : string.Empty))"><a href="/">Home </a></li>
    <li class="@(string.Format(currentUrl.Contains("aboutus") ? "active" : string.Empty))"><a href="/AboutUs">About Us </a></li>
    <li class="@(string.Format(currentUrl.Contains("research") ? "active" : string.Empty))"><a href="/Research">Research</a></li>
    <li class="@(currentUrl.Contains("contactus") ? "active" : string.Empty))"><a href="/ContactUs">Contact Us</a></li>
</ul>

Collectives™ on Stack Overflow

How to apply conditional class in Razor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related