How to Add the 'active' Class to Html.ActionLink in ASP.NET MVC for Bootstrap Navigation?

Adding the "active" Class to Html.ActionLink in ASP.NET MVC

Context

Adding an "active" class to a Bootstrap navbar is an essential step for providing visual feedback to users on the current page they're on. When using Html.ActionLink to generate the navigation links, you might expect to assign the class to the link itself. However, for proper functionality, the class must be applied to the

element.

Solution

To address this requirement, modify your code as follows:

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

By applying the "active" class to the

element, Bootstrap will correctly style the link to indicate the active page.

Advanced Considerations

For scenarios where multiple actions or controllers can trigger the selected behavior, consider using an HtmlHelper extension method:

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

With this extension, you can now use the following syntax:

<li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
    <a href="@Url.Action("Home", "Default")">Home</a>
</li>

The above is the detailed content of How to Add the 'active' Class to Html.ActionLink in ASP.NET MVC for Bootstrap Navigation?. For more information, please follow other related articles on the PHP Chinese website!