Comment styliser efficacement les liens de navigation actifs dans ASP.NET MVC ?

Style des éléments de navigation avec la classe "active" dans ASP.NET MVC

Introduction

Dans les applications ASP.NET MVC, l'assistant Html.ActionLink est couramment utilisé pour créer des liens de navigation. Lors de l'intégration du style Bootstrap, il est essentiel d'appliquer la classe « active » à l'élément de navigation correspondant. Cet article vous guidera dans l'ajout de la classe « active » aux liens de navigation à l'aide de l'assistant Html.ActionLink et fournira une solution plus élégante à l'aide d'une extension d'assistance HTML.

Application de la classe « active » avec Html.ActionLink

Considérez le scénario suivant :

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Ce code génère les liens de navigation, mais la classe "active" est appliquée au balise, conduisant à une structure Bootstrap invalide. Pour résoudre ce problème, appliquez la classe "active" au

élément à la place :

<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>

Cela appliquera correctement la classe "active" à l'élément de navigation actuel en fonction de la page active.

Utilisation d'une extension d'assistance HTML pour un style dynamique

Pour fournir une solution plus flexible et réutilisable, vous pouvez créer une extension d'assistance HTML comme celle-ci :

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

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

Cette méthode d'extension nécessite trois paramètres : des contrôleurs, des actions et une classe CSS facultative. Il vérifie si l'action et le contrôleur actuels correspondent aux valeurs spécifiées et renvoie la cssClass si c'est le cas, ou une chaîne vide dans le cas contraire.

Utilisation de l'extension HTML Helper

Pour utiliser cette extension, ajoutez un using instruction à la page :

@using YourNamespace;

Ensuite, dans la vue, vous pouvez appliquer la classe "active" comme suit :

<ul>
    <li>@Html.ActionLink("Home", "Home", "Default", null, new {@class="@Html.IsSelected(actions: "Home", controllers: "Default")"})</li>
    <li>@Html.ActionLink("About", "About", "Default", null, new {@class="@Html.IsSelected(actions: "About", controllers: "Default")"})</li>
</ul>

Conclusion

En appliquant la classe "active" à l'élément HTML approprié et en tirant parti de l'extension d'assistance HTML fournie, vous pouvez gérer efficacement l'état actif des liens de navigation dans ASP Applications .NET MVC, garantissant la cohérence et une organisation du code plus propre.

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!