[解決済み] ASP.NET MVCのHtml.ActionLinkに "active "クラスを追加する方法

質問

MVCでブートストラップのナビバーに"active"クラスを追加しようとしているのですが、以下のように書くとactiveクラスが表示されません。

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

これは、正しくフォーマットされたクラスのように見えますが、動作しません。

<a class="active" href="/">Home</a>

Bootstrapのドキュメントでは、'a'タグはナビバーで使うべきではないと書かれていますが、上記は、Html.ActionLinkにクラスを追加する正しい方法だと思います。他の（整然とした）方法はないでしょうか？

どのように解決するのですか？

Bootstrapでは active クラスを適用する必要があります。 <li> 要素ではなく <a> . ここで最初の例をご覧ください。 http://getbootstrap.com/components/#navbar

アクティブかどうかに応じてUIスタイルを処理する方法は、ASP.NET MVCの ActionLink ヘルパーを使用します。これは、Bootstrapフレームワークがどのように構築されたかに従った適切な解決策です。

<ul class="nav navbar-nav">
    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

編集する

複数のページでメニューを再利用する可能性が高いので、メニューを何度もコピーして手動で行うのではなく、現在のページに基づいて選択したクラスを自動的に適用する方法があるとスマートだと思います。

最も簡単な方法は、単純に ViewContext.RouteData すなわち Action と Controller の値を指定します。現在あるものに加えて、このようなものを構築することができます。

<ul class="nav navbar-nav">
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

コード上はきれいではありませんが、これで仕事は完了し、必要に応じてメニューをパーシャルビューに抽出することができます。もっときれいな方法でこれを行う方法もありますが、あなたはまだ始めたばかりなので、このままにしておきます。ASP.NET MVCの学習がうまくいくことを祈っています。

遅れての編集です。

この質問は、少しトラフィックがあるようなので、私はよりエレガントなソリューションを提供することを考えました。 HtmlHelper を拡張したものです。

編集 03-24-2015: このメソッドを書き直して、複数のアクションやコントローラが選択された動作をトリガーできるようにし、子アクションの部分ビューからこのメソッドが呼び出されたときの処理も行いました。

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

.NET Coreで動作します。

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

使用例です。

<ul>
    <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
        <a href="@Url.Action("Home", "Default")">Home</a>
    </li>
    <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
        <a href="@Url.Action("List", "Default")">List</a>
    </li>
</ul>