ブートストラップ ナビゲーションのために ASP.NET MVC の Html.ActionLink に「アクティブ」クラスを追加する方法

ASP.NET MVC の Html.ActionLink への「アクティブ」クラスの追加

コンテキスト

ブートストラップ ナビゲーションバーへの「アクティブ」クラスの追加これは、ユーザーが現在閲覧しているページに関する視覚的なフィードバックをユーザーに提供するために不可欠なステップです。 Html.ActionLink を使用してナビゲーション リンクを生成する場合、クラスをリンク自体に割り当てることが予想される場合があります。ただし、適切に機能するには、クラスを

に適用する必要があります。

解決策

この要件に対処するには、コードを次のように変更します。

<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>

「active」クラスを

要素に適用します。

高度な考慮事項

複数のアクションまたはコントローラーが選択された動作をトリガーできるシナリオでは、HtmlHelper 拡張メソッドの使用を検討してください。

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;
}

この拡張機能を使用すると、次のものが使用できるようになります構文:

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

以上がブートストラップ ナビゲーションのために ASP.NET MVC の Html.ActionLink に「アクティブ」クラスを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。