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

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

Susan Sarandon

リリース： 2024-12-17 13:42:18

オリジナル

154 人が閲覧しました

How to Effectively Style Active Navigation Links in 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) &amp;&amp; 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>

ログイン後にコピー