如何将'活动”类添加到 ASP.NET MVC 中的 Html.ActionLink 以进行 Bootstrap 导航？

将“active”类添加到 ASP.NET MVC 中的 Html.ActionLink

Context

将“active”类添加到 Bootstrap 导航栏是向当前页面上的用户提供视觉反馈的重要步骤。当使用 Html.ActionLink 生成导航链接时，您可能希望将该类分配给链接本身。然而，为了获得正确的功能，该类必须应用于

。

解决方案

要满足此要求，请按如下方式修改代码：

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

通过将“active”类应用于

元素。元素，Bootstrap 将正确设置链接的样式以指示活动页面。

高级注意事项

对于多个操作或控制器可以触发所选行为的场景，请考虑使用 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;
}

通过此扩展，您现在可以使用以下语法：

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

以上是如何将'活动”类添加到 ASP.NET MVC 中的 Html.ActionLink 以进行 Bootstrap 导航？的详细内容。更多信息请关注PHP中文网其他相关文章！