帶有引導導航欄的 MVC - 將所選項目設置為活動

我正在學習 Bootstrap，無法使所選項目進入“活動”狀態。活動狀態保持在預設項目上。新選擇/點擊的項目會短暫變為活動狀態，但會恢復。我已閱讀所有文章，但仍然無法使此程式碼正常工作。我正在使用 MVC5 和 JQuery 2.1。

編輯： 如果我將 li 的 href 更改為href="#"，則活動類將正確應用。載入新視圖時會發生什麼？我認為塞巴斯蒂安的反應很接近，但對區域很混亂。

標記

<div class="navbar-wrapper">
   <div class="container">
       <div class="navbar navbar-inverse navbar-fixed-top">

           <div class="navbar-header">
               <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </a>
               <a class="navbar-brand" href="#">Test</a>
           </div>
           <div class="btn-group pull-right">
               <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                   <i class="icon-user"></i>Login
         <span class="caret"></span>
               </a>
               <ul class="dropdown-menu">
                   <li><a href="#">Profile</a></li>
                   <li class="divider"></li>
                   <li><a href="#">Sign Out</a></li>
               </ul>
           </div>
           <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                   <li class="active"><a href="~/Home">Home</a></li>
                   <li><a href="~/Home/About">About</a></li>
                   <li><a href="~/Student">Students Sample</a></li>
                   <li class="dropdown">
                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                       <ul class="dropdown-menu">
                           <li><a href="~/Admin/Home/Index"">Admin</a></li>
                           <li><a href="#">Another action</a></li>
                           <li><a href="#">Something else here</a></li>
                           <li class="divider"></li>
                           <li><a href="#">Separated link</a></li>
                           <li><a href="#">One more separated link</a></li>
                       </ul>
                   </li>
               </ul>
           </div>

       </div>
   </div>
   <!-- /container -->
</div>
<!-- /navbar wrapper -->

腳本

<script type="text/javascript">

   $(function () {
       $('.navbar-nav li').click(function () {
           $(this).addClass('active').siblings().removeClass('active');
       });
   });

</script>

編輯： 這是我在發布的答案和一些研究的幫助下最終做的事情。

public static string MakeActive(this UrlHelper urlHelper,string action, string controller, string area = "")
       {
           string result = "active";
           string requestContextRoute;
           string passedInRoute;

           // Get the route values from the request           
           var sb = new StringBuilder().Append(urlHelper.RequestContext.RouteData.DataTokens["area"]);
           sb.Append("/");
           sb.Append(urlHelper.RequestContext.RouteData.Values["controller"].ToString());
           sb.Append("/");
           sb.Append(urlHelper.RequestContext.RouteData.Values["action"].ToString());
           requestContextRoute = sb.ToString();

           if (string.IsNullOrWhiteSpace(area))
           {
               passedInRoute = "/" + controller + "/" + action;
           }
           else
           {
               passedInRoute = area + "/" + controller + "/" + action;
           }

           //  Are the 2 routes the same?
           if (!requestContextRoute.Equals(passedInRoute, StringComparison.OrdinalIgnoreCase))
           {
               result = null;
           }

           return result;
       }

您必須檢查您的控制器或根據目前 url 查看哪個菜單項處於活動狀態：

我有一個類似的擴展方法：

public static string MakeActiveClass(this UrlHelper urlHelper, string controller)
{
   string result = "active";

   string controllerName = urlHelper.RequestContext.RouteData.Values["controller"].ToString();

   if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
   {
       result = null;
   }

   return result;
}

您可以像這樣在視圖中使用它：

<!-- Make the list item active when the current controller is equal to "blog" -->
<li class="@Url.MakeActive("blog")">
  <a href="@Url.Action("index", "blog")">....</a>
</li>

引用自：https://stackoverflow.com/questions/22407367