ASP.NET MVC でアクティブ ナビゲーション リンクを効果的にスタイル設定するにはどうすればよいですか?

ASP.NET MVC の「アクティブ」クラスを使用したナビゲーション要素のスタイル設定

概要

ASP.NET MVC アプリケーションでは、Html.ActionLink ヘルパーナビゲーション リンクを作成するためによく使用されます。 Bootstrap スタイルを組み込む場合、対応するナビゲーション要素に「active」クラスを適用することが重要です。この記事では、Html.ActionLink ヘルパーを使用して「アクティブ」クラスをナビゲーション リンクに追加する方法を説明し、HTML ヘルパー拡張機能を使用したより洗練されたソリューションを提供します。

Html.ActionLink を使用した「アクティブ」クラスの適用

次のシナリオを考えてみましょう:

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

このコードはナビゲーション リンクを生成しますが、「アクティブ」クラスはに適用されます。タグが含まれているため、無効なブートストラップ構造が発生します。これを修正するには、「active」クラスを

に適用します。代わりに要素を使用します:

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

これにより、アクティブなページに基づいて、「アクティブ」クラスが現在のナビゲーション要素に正しく適用されます。

動的スタイリングのための HTML ヘルパー拡張機能の使用

より柔軟で再利用可能なソリューションを提供するには、次のような HTML ヘルパー拡張機能を作成できます。 this:

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

この拡張メソッドには、コントローラー、アクション、およびオプションの CSS クラスの 3 つのパラメーターが必要です。現在のアクションとコントローラーが指定された値と一致するかどうかを確認し、一致する場合は cssClass を返し、そうでない場合は空の文字列を返します。

HTML ヘルパー拡張機能の使用

この拡張機能を使用するには、ページへの using ステートメント:

@using YourNamespace;

その後、ビューで「アクティブ」クラスを次のように適用できます。

<ul>
    <li>@Html.ActionLink("Home", "Home", "Default", null, new {@class="@Html.IsSelected(actions: "Home", controllers: "Default")"})</li>
    <li>@Html.ActionLink("About", "About", "Default", null, new {@class="@Html.IsSelected(actions: "About", controllers: "Default")"})</li>
</ul>

結論

「active」クラスを適切な HTML 要素に適用し、提供されている HTML ヘルパー拡張機能を活用することで、ASP でナビゲーション リンクのアクティブ状態を効果的に管理できます。 .NET MVC アプリケーション。一貫性とクリーンなコード構成を確保します。

以上がASP.NET MVC でアクティブ ナビゲーション リンクを効果的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。