asp.net-mvc - MVC で現在のメニュー項目の CSS クラスを強調表示または変更する最良の方法

Question

解決策を探していたので、いくつかの記事を読みました。それらはすべて、ハードコーディングされた、または HTML ヘルパーの代替手段を好むようでした。ただし、シンプルでデータベース駆動型のものが必要でした。これが私の最善の解決策です（私が回答として提出しました）。

他の記事の解決策は次のとおりです。

• ASP.NET MVC でコントローラーとユーザー コントロールを使用してアクティブなタブを設定する簡単な方法は?
• asp.net mvc と css: 選択時にメニュー タブを強調表示したままにする
• ASP.NET MVC: タブ ASCX - 現在のページに基づいて CSS クラスを調整しますか?

Answer 1

次のように、コントローラーの 1 つから TempData を渡すだけです。

TempData("CurrentPage") = "Nutrition"

次に、ビューに次のような条件を追加します。

<ul>

@For Each item In Model
    Dim currentItem = item

    If (Not String.IsNullOrEmpty(TempData("CurrentPage")) And TempData("CurrentPage") = currentItem.NAV_Element) Then
        @<li><a class="current" href="@Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">@Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>

    Else
        @<li><a href="@Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">@Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>
    End If


Next

</ul>

Answer 2

ルート値を使用してhrefを生成し、それに基づいて親タブをアクティブに設定することで、過去にこれを達成しました。

これはブートストラップ風味のバージョンです:

 <ul class="nav nav-tabs">
     <li><a href="/somepage">Some page</a></li>
     <li><a href="/someotherpage">Some other Page</a></li>
 </ul>

 <script type="text/javascript">
     $(function(){
          $('a[href="@Url.Action(ViewContext.RouteData.Values)"]').parents("li").addClass("active");
     };

 </script>

シ

Answer 3

私はこれに答えるには遅すぎることを知っていますが、ASP MVC を使用していて、コントローラーとアクションを使用してメニュー項目を強調表示しようとしている場合、ここに私にとって完全にうまく機能するソリューションがあります -

<li> <a href='@Url.Action("<action name>", "<controller name>")' class="@(ViewContext.RouteData.Values["Controller"].ToString() + ViewContext.RouteData.Values["Action"].ToString() == "ControllerAction" ? "active" : "" )"> <i class="fa fa-user-plus"></i> <span>Signup</span> </a> </li>

---