首页 >web前端 >css教程 >如何在 ASP.NET MVC 中有效设置活动导航链接的样式?

如何在 ASP.NET MVC 中有效设置活动导航链接的样式?

Susan Sarandon
Susan Sarandon原创
2024-12-17 13:42:18158浏览

How to Effectively Style Active Navigation Links in ASP.NET MVC?

在 ASP.NET MVC 中使用“活动”类设置导航元素的样式

简介

在 ASP.NET MVC 应用程序中,Html.ActionLink 帮助器通常用于创建导航链接。合并 Bootstrap 样式时,必须将“active”类应用于相应的导航元素。本文将指导您使用 Html.ActionLink 帮助器将“active”类添加到导航链接,并使用 HTML 帮助器扩展提供更优雅的解决方案。

使用 Html.ActionLink 应用“active”类

考虑以下场景:

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

此代码生成导航链接,但“active”类是应用于标签,导致无效的 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>

    这将根据活动页面正确地将“活动”类应用于当前导航元素。

    使用 HTML 帮助器扩展进行动态样式

    为了提供更灵活和可重用的解决方案,您可以创建一个 HTML 帮助器扩展,例如this:

    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) &amp;&amp; acceptedControllers.Contains(currentController) ?
            cssClass : String.Empty;
    }

    此扩展方法需要三个参数:控制器、操作和可选的 CSS 类。它检查当前操作和控制器是否与指定值匹配,如果匹配则返回 cssClass,否则返回空字符串。

    HTML 帮助器扩展的使用

    要使用此扩展,请添加在页面中使用语句:

    @using YourNamespace;

    然后,在视图中,您可以将“active”类应用为如下:

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

    结论

    通过将“active”类应用到适当的 HTML 元素并利用提供的 HTML 帮助器扩展,您可以有效地管理 ASP 中导航链接的活动状态.NET MVC 应用程序,确保一致性和更清晰的代码组织。

  • 以上是如何在 ASP.NET MVC 中有效设置活动导航链接的样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

    声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn