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

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!