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

ASP.NET MVC の Html.ActionLink に "Active" クラスを追加する

この調査では、次の課題を解決することを目的としています。 ASP.NET MVCを使用して「アクティブ」クラスをブートストラップ ナビゲーションバーに組み込む。この問題は、提供されているコード スニペットに示されている従来のアプローチが意図したスタイルを表示できない場合に発生します。

代替解決策

ブートストラップでは、「アクティブ」クラスは

に適用する必要があります。 ではなく要素です。 Bootstrap のドキュメントを参照すると、ナビゲーションバーでは タグの使用が推奨されていないことがわかります。

これを修正するには、コードを次のように変更できます。

<ul>

このアプローチは次のとおりです。 Bootstrap の設計により、「アクティブ」の適切なアプリケーションが保証されます。 class.

自動クラス アプリケーション

プロセスを簡素化するために、ViewContext.RouteData を利用して、現在のページに基づいて「アクティブ」クラスを自動的に適用できます。最初のコードの拡張バージョンは次のようになります。

<ul>

この手法を利用すると、部分ビューでメニューを一元化し、「アクティブな」クラスの割り当てを自動化できます。

よりエレガントにするための拡張メソッド

よりクリーンなソリューションとして、HtmlHelper を導入できます。拡張機能:

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    // Logic to extract relevant information from the current request
    // Compares the extracted information with the provided parameters

    return result ? cssClass : "";
}

この拡張機能により、ビュー内で簡潔で再利用可能なコードが可能になります:

<ul>
    

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