Comment ajouter la classe « active » à Html.ActionLink dans ASP.NET MVC pour la navigation Bootstrap ?-tutoriel CSS-php.cn

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

Mary-Kate Olsen

Libérer： 2024-12-19 01:00:10

original

531 Les gens l'ont consulté

How to Add the

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

Context

Ajout d'une classe "active" à une barre de navigation Bootstrap est une étape essentielle pour fournir un retour visuel aux utilisateurs sur la page actuelle sur laquelle ils se trouvent. Lorsque vous utilisez Html.ActionLink pour générer les liens de navigation, vous pouvez vous attendre à attribuer la classe au lien lui-même. Cependant, pour une fonctionnalité correcte, la classe doit être appliquée au

Solution

Pour répondre à cette exigence, modifiez votre code comme suit :

<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

En appliquant la classe "active" à l'élément

élément, Bootstrap stylisera correctement le lien pour indiquer la page active.

Considérations avancées

Pour les scénarios dans lesquels plusieurs actions ou contrôleurs peuvent déclencher le comportement sélectionné, envisagez d'utiliser une méthode d'extension HtmlHelper :

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

Copier après la connexion

Avec cette extension, vous pouvez désormais utiliser la syntaxe suivante :

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