Question

我想知道在使用ASP.NET MVC 3时如何将CSS类添加到导航中的当前页面？这是我在_Layout.cshtml文件中的导航：

<p>@Html.ActionLink("Product Search", "Index", new { controller = "Home" }, new { @class = "current" })
                | @Html.ActionLink("Orders", "Index", new { controller = "Orders" }) 
                | @Html.ActionLink("My Account", "MyAccount", new { controller = "Account" })
                | @Html.ActionLink("Logout", "LogOff", new { controller = "Account" })</p>

正如您所看到的，我的导航中有4个链接，其中第一个链接应用了CSS类“当前”，我希望能够将此类添加/删除到导航中的不同链接，具体取决于用户所在的页面。这可能吗？

干杯

Answer 1

你可以这样做

@{ 
   var currentController = ViewContext.RouteData.Values["controller"] as string ?? "Home";
   var currentAction = ViewContext.RouteData.Values["action"] as string ?? "Index";
   var currentPage = (currentController + "-" + currentAction ).ToLower();
}

@Html.ActionLink("Product Search", "Index", "Home", null,
                 new { @class = currentPage == "home-index" ? "current" : "" })
@Html.ActionLink("MyAccount", "MyAccount", "Account", null,
                  new { @class = currentPage == "account-myaccount" ? "current" : "" })

Answer 2

我建议使用扩展方法。类似的东西：

public static HtmlString NavigationLink(
    this HtmlHelper html,
    string linkText,
    string actionName,
    string controllerName)
{
    string contextAction = (string)html.ViewContext.RouteData.Values["action"];
    string contextController = (string)html.ViewContext.RouteData.Values["controller"];

    bool isCurrent =
        string.Equals(contextAction, actionName, StringComparison.CurrentCultureIgnoreCase) &&
        string.Equals(contextController, controllerName, StringComparison.CurrentCultureIgnoreCase);

    return html.ActionLink(
        linkText,
        actionName,
        controllerName,
        routeValues: null,
        htmlAttributes: isCurrent ? new { @class = "current" } : null);
}

然后，您可以通过包含扩展程序的命名空间并只调用您的方法在视图中使用它：

@using MyExtensionNamespace;

...

  @Html.NavigationLink("Product Search", "Index", "Home")
| @Html.NavigationLink("Orders", "Index", "Orders") 
| @Html.NavigationLink("My Account", "MyAccount", "Account")
| @Html.NavigationLink("Logout", "LogOff", "Account")

这有利于保持剃须刀更清洁，并且可以在其他视图中轻松重复使用。

Answer 3

@{
   var controller = ViewContext.RouteData.Values["controller"].ToString();
   var action = ViewContext.RouteData.Values["action"].ToString();
   var isActiveController = new Func<string, string, string, string, string>((ctrl, act, activeStyle, inactiveStyle) => controller == ctrl && action == act ? activeStyle : inactiveStyle);
 }

然后在HTML的class属性中，您可以执行以下操作：

class="@isActiveController("controlername","action","activecssstyleclass","inactiveccsstyle")"

只是另一种方式@dknaack他的答案..在你的代码中重复更多通用和更少的功能。

Answer 4

在我的情况下，假设我有一个主页和一个菜单。

在主页中添加ViewBag.Active作为占位符，如下所示：

@{
   ViewBag.Title = "Home";
   ViewBag.Active = "Home";
}

然后将其放在li课程中作为激活或不激活的条件：

 <li class="@(ViewBag.Active=="Home"? "active" : "")">
      <a href="@Url.Action("Index", "Home")"><span>@ViewBag.Title</span></a>
 </li>

Answer 5

我使用本教程来完成这项工作，理解起来要简单得多，需要2分钟 Hightlight Active menu item

ASP.NET MVC - 导航中的当前页面突出显示

5 个答案: