Как применить условный класс в Razor

#html #asp.net-mvc #razor

#HTML #asp.net-mvc #razor

Вопрос:

Я добавляю класс на <li> основе текущего 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>
  

Когда я проверяю условие в watch, я получаю текущее имя класса «active» в Visual Studio.

введите описание изображения здесь

Но когда я проверяю в браузере, класс не применяется <li> . Я уверен, что он не переопределяется никаким другим кодом. Хотя, если я применяю class напрямую, это работает.

введите описание изображения здесь

Комментарии:

1. почему вы используете string.Format ?

Ответ №1:

Вам нужно изменить @(string.Format(Request.Url.PathAndQuery.ToLower() == "" ? "active" : string.Empty)) вместо @{}

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

Вашему коду должно понравиться это с переменной для 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>