如何在 ASP.NET MVC 中有效设置活动导航链接的样式？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-12-17 13:42:18

原创

161 人浏览过

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>

登录后复制