Maison > interface Web > tutoriel CSS > Comment ajouter efficacement la classe « Active » au Html.ActionLink d'ASP.NET MVC pour la navigation Bootstrap ?

Comment ajouter efficacement la classe « Active » au Html.ActionLink d'ASP.NET MVC pour la navigation Bootstrap ?

DDD
Libérer: 2024-12-13 01:42:08
original
626 Les gens l'ont consulté

How to Efficiently Add the

Ajout de la classe "Active" à Html.ActionLink dans ASP.NET MVC

Dans ASP.NET MVC, l'ajout d'une classe "active" à la barre de navigation d'amorçage est essentiel. Cependant, l'approche courante consistant à l'ajouter au ne correspond pas aux directives de Bootstrap.

La méthode Bootstrap

Bootstrap nécessite que la classe "active" soit appliquée à l'élément

  • élément, pas l'élément élément. Cela garantit que la classe active est toujours visible, quel que soit l'élément survolé.

    <ul class="nav navbar-nav">
        <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
    Copier après la connexion

    Application de classe automatique

    Plutôt que d'ajouter manuellement la classe "active" à chaque

    <ul class="nav navbar-nav">
        <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
        <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
    Copier après la connexion

    Une solution plus élégante (Extension HtmlHelper)

    Une solution encore plus élégante consiste à créer une méthode d'extension HtmlHelper :

    public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
    {
        var viewContext = html.ViewContext;
        var isChildAction = viewContext.Controller.ControllerContext.IsChildAction;
    
        if (isChildAction)
            viewContext = html.ViewContext.ParentActionViewContext;
    
        var routeValues = viewContext.RouteData.Values;
        var currentAction = routeValues["action"].ToString();
        var currentController = routeValues["controller"].ToString();
    
        var acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
        var acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();
    
        return (acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController)) ? cssClass : "";
    }
    Copier après la connexion

    Utilisation :

    <ul>
        <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
            <a href="@Url.Action("Home", "Default")">Home</a>
        </li>
        <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
            <a href="@Url.Action("List", "Default")">List</a>
        </li>
    </ul>
    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!

  • source:php.cn
    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
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal