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
Libérer: 2024-12-31 21:49:11
original
211 Les gens l'ont consulté

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>
Copier après la connexion
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

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;
}
Copier après la connexion

Cette méthode d'extension vous permet d'attribuer facilement la classe active en utilisant ce qui suit syntaxe :

<li>
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal