Maison >interface Web >tutoriel CSS >Comment ajouter correctement la classe « Active » à « Html.ActionLink » dans ASP.NET MVC pour la navigation Bootstrap ?

Comment ajouter correctement la classe « Active » à « Html.ActionLink » dans ASP.NET MVC pour la navigation Bootstrap ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-22 20:36:59760parcourir

How to Properly Add the

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

  • élément, pas le . En faisant référence à la documentation Bootstrap, nous constatons que l'utilisation des balises est déconseillée dans la barre de navigation.

    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!

  • 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