首页 > web前端 > css教程 > 如何高效地将'Active”类添加到 ASP.NET MVC 的 Html.ActionLink 以进行 Bootstrap 导航?

如何高效地将'Active”类添加到 ASP.NET MVC 的 Html.ActionLink 以进行 Bootstrap 导航?

DDD
发布: 2024-12-13 01:42:08
原创
624 人浏览过

How to Efficiently Add the

在 ASP.NET MVC 中将“Active”类添加到 Html.ActionLink

在 ASP.NET MVC 中,向引导导航栏添加“active”类是基本的。然而,将其添加到 的常见方法是:

Bootstrap 方式

Bootstrap 要求将“active”类应用于

  • 元素。元素,而不是 元素。这确保了活动类始终可见,无论将鼠标悬停在哪个元素上。
    <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>
    登录后复制

    自动类应用

    而不是手动将“活动”类添加到每个

  • ;,你可以使用ViewContext.RouteData自动判断当前页面并应用相应的类:
    <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>
    登录后复制

    更优雅解决方案(HtmlHelper扩展)

    更优雅的解决方案是创建一个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 : "";
    }
    登录后复制

    用法:

    <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>
    登录后复制
  • 以上是如何高效地将'Active”类添加到 ASP.NET MVC 的 Html.ActionLink 以进行 Bootstrap 导航?的详细内容。更多信息请关注PHP中文网其他相关文章!

    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板