MVC5 - ナビゲーションバーのアクティブカラー

Question

私はトラブル私はそれをクリックして、そのビューに行くときの色を変更するには、私のナビゲーションバーに積極的にリチウムを得ることが生じています、私は以下のいくつかのコードが含まれているが、

を必要に応じて、私はより多くのあなたを見ますこれは私のレイアウト共有ビューに配置された私のナビゲーションバーコードです：

<header id="main-header"> 
    <div class="container"> 
     <a href="@Url.Action("Index", "Home")"> 
      <img src="~/logo.png" id="logo" alt="logo" /> 
     </a> 
     <nav class="main-nav"> 
      <ul> 
       @if (User.IsInRole("Admin")) 
       { 
        <li>@Html.ActionLink("Venues", "Index", "Venues")</li> 
        <li>@Html.ActionLink("Events", "Index", "Events")</li> 
        <li>@Html.ActionLink("Bands", "Index", "Bands")</li> 
        <li>@Html.ActionLink("Admin", "Admin", "Home")</li> 
        @Html.Partial("_LoginPartial") 
       } 
       else 
       { 
        <li>@Html.ActionLink("Venues", "Index", "Venues")</li> 
        <li>@Html.ActionLink("Events", "Index", "Events")</li> 
        <li>@Html.ActionLink("Bands", "Index", "Bands")</li> 
        <li>@Html.Partial("_LoginPartial")</li> 
       } 
      </ul> 
     </nav> 
    </div> 
</header> 

これは私が持っているヘッダー、ナビゲーションのCSSクラスです：

あなたがCAに必要なコントローラの各アクションメソッドで

.main-nav { 
    float: right; 
    padding-top: 17px; 
} 
.main-nav li { 
    float: left; 
    list-style: none; 
    margin-right: 10px; 
    position: relative; 
} 
.main-nav li:last-child { 
    margin-right: 0px; 
} 
.main-nav li.current > a { 
    border: 1px solid; 
} 
.main-nav li a { 
    text-transform: uppercase; 
    font-size: 15px; 
    color: #fff; 
    font-weight: 400; 
    padding: 2px 10px; 
    font-family: 'Montserrat', sans-serif; 
} 

Answer 1

public ActionResult Index() 
{ 
    ViewBag.Action = ControllerContext.RouteData.Values["Action"].ToString(); 
    ViewBag.Controller = ControllerContext.RouteData.Values["Controller"].ToString(); 

    return View(); 
} 

次にビューに必要なCSSクラスを適用するには、次を使用することができます： - しかし、あなたがいた場合

<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li> 
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li> 
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li> 
<li class="@(ViewBag.Action == "Admin" && ViewBag.Controller == "Home" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li> 

これはおそらく、これらの単純なリンクのためのOKソリューションであるn個ViewBag値を追加します。もっとたくさん追加するつもりですが、あなた自身のカスタムを追加することをお勧めしますHtmlHelper。詳細については、こちらを受け入れ答えを参照してください：How to add "active" class to Html.ActionLink in ASP.NET MVC

編集：

public class EventsController : Controller 
{ 
    public ActionResult Index() 
    { 
     ViewBag.LinkText = "Events"; 

     return View(); 
    } 
} 

をそしてリンクは単に、例えば次のようになります。

あなただけのコントローラでこれを持っていることによって、さらにそれを簡略化することができ：

<li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>