Maison >interface Web >tutoriel CSS >Comment ajouter efficacement la classe « Active » aux liens de navigation ASP.NET MVC ?

Comment ajouter efficacement la classe « Active » aux liens de navigation ASP.NET MVC ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-31 21:49:11205parcourir

How to Efficiently Add the

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) &amp;&amp; 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn