Maison >interface Web >tutoriel CSS >Comment ajouter correctement la classe « Active » à « Html.ActionLink » dans ASP.NET MVC pour la navigation Bootstrap ?
Ajout de la classe "Active" à Html.ActionLink dans ASP.NET MVC
Dans cette enquête, nous visons à résoudre le défi de incorporer une classe "active" dans la barre de navigation d'amorçage à l'aide d'ASP.NET MVC. Le problème survient lorsque l'approche conventionnelle, telle que présentée dans l'extrait de code fourni, ne parvient pas à afficher le style souhaité.
Solution alternative
Dans Bootstrap, le "actif" doit être appliquée à la classe
Pour remédier à cela, nous pouvons modifier le code comme suit :
<ul>
Cette approche s'aligne sur Conception de Bootstrap et assure la bonne application de la classe "active".
Classe automatique Application
Pour simplifier le processus, vous pouvez exploiter ViewContext.RouteData pour appliquer automatiquement la classe « active » en fonction de la page actuelle. Une version améliorée de votre code initial ressemblerait à ceci :
<ul>
En utilisant cette technique, vous pouvez centraliser votre menu dans une vue partielle et automatiser l'affectation de classe "active".
Méthode d'extension pour plus d'élégance
Pour une solution plus propre, vous pouvez introduire un HtmlHelper extension :
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 : ""; }
Cette extension permet d'avoir du code concis et réutilisable dans vos vues :
<ul>
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!