html - 使 Bootstrap 选项卡在 MVC 操作上处于事件状态

Question

我希望在单击该选项卡(操作)后将该选项卡设置为事件状态。但是，我遇到的问题是“仪表板”选项卡始终设置为事件状态

<div class="row top-buffer">
    <ul class="nav nav-tabs">
        <li class="active">@Html.ActionLink("Dashboard", "Index")</li>
        <li>@Html.ActionLink("Users", "Users")</li>
        <li>@Html.ActionLink("Investigator Groups", "Groups")</li>
        <li>@Html.ActionLink("Assign Games", "AssignGames")</li>
        <li>@Html.ActionLink("Reports", "Reports")</li>
    </ul>
</div> 

编辑: 我尝试执行以下操作，现在允许将选项卡设置为事件状态，但不再重定向到操作。

  <li class="active" data-toggle="tab">@Html.ActionLink("Dashboard", "Index")</li>
  <li data-toggle="tab">@Html.ActionLink("Users", "Users")</li>

Answer 1

按照本教程进行操作 Setting the active menu item in a MVC C# Bootstrap application 通过添加扩展方法

 public static class HtmlHelpers
{
    public static string IsActive(this HtmlHelper htmlHelper, string action, string controller)
    {
        var routeData = htmlHelper.ViewContext.RouteData;

        var routeAction = routeData.Values["action"].ToString();
        var routeController = routeData.Values["controller"].ToString();

        var returnActive = (controller == routeController && action == routeAction);

        return returnActive ? "active" : "";
    }
}

然后使用它

 <li class="@Html.IsActive("Index", "Dashboard")">@Html.ActionLink("Dashboard", "Index")</li>
 <li class="@Html.IsActive("Users", "Users")">@Html.ActionLink("Users", "Users")</li>