ホームページ >ウェブフロントエンド >CSSチュートリアル >「アクティブ」クラスを ASP.NET MVC ナビゲーション リンクに効率的に追加するにはどうすればよいですか?
Html.ActionLink へのアクティブ クラスの追加
ASP.NET MVC では、ナビゲーション要素に「アクティブ」クラスを設定するのが一般的です現在アクティブなページを示します。ただし、クラスを に直接追加すると、
ブートストラップの考慮事項
ブートストラップの場合、通常、アクティブ クラスは <li> タグに適用されます。 ではなく要素タグ。したがって、次のようにコードを変更する必要があります。
<ul>
動的クラス割り当て
現在のページに基づいてアクティブ クラスを割り当てるプロセスを自動化するには、次のようにします。次のアプローチを使用できます:
<ul>
ViewContext.RouteData.Values を使用するプロパティを使用すると、現在のアクションとコントローラーを自動的に決定できます。三項演算子を使用すると、実行されるアクションに基づいてアクティブ クラスを条件付きで追加できます。
HtmlHelper Extension
よりクリーンでエレガントなソリューションとして、 HtmlHelper 拡張メソッド:
public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected") { // Get the current action and controller string currentAction = html.ViewContext.RouteData.Values["action"].ToString(); string currentController = html.ViewContext.RouteData.Values["controller"].ToString(); // Create arrays of accepted actions and controllers string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray(); string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray(); // Check if the current action and controller match any of the accepted values return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ? cssClass : string.Empty; }
この拡張メソッドを使用すると、次を使用してアクティブなクラスを簡単に割り当てることができます。次の構文:
<li>
以上が「アクティブ」クラスを ASP.NET MVC ナビゲーション リンクに効率的に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。