Maison >interface Web >tutoriel CSS >Comment ajouter efficacement la classe « Active » aux liens de navigation ASP.NET MVC ?
Ajout de la classe active à Html.ActionLink
Dans ASP.NET MVC, il est courant de définir la classe "active" sur les éléments de navigation pour indiquer la page active actuelle. Cependant, l'ajout de la classe directement au tag n'est peut-être pas l'approche souhaitée.
Considérations sur Bootstrap
Pour Bootstrap, la classe active est généralement appliquée au <li> plutôt que l'élément étiqueter. Par conséquent, vous devez modifier votre code pour qu'il ressemble à ceci :
<ul>
Affectation dynamique de classe
Pour automatiser le processus d'attribution de la classe active en fonction de la page actuelle, vous pouvez utiliser l'approche suivante :
<ul>
En utilisant la propriété ViewContext.RouteData.Values, vous pouvez déterminer automatiquement l'action et le contrôleur en cours. L'opérateur ternaire vous permet d'ajouter conditionnellement la classe active en fonction de l'action effectuée.
HtmlHelper Extension
Pour une solution plus propre et plus élégante, vous pouvez créer un Méthode d'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; }
Cette méthode d'extension vous permet d'attribuer facilement la classe active en utilisant ce qui suit syntaxe :
<li>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!