MVC5 - 导航栏活动颜色答案

【问题标题】：MVC5 - Navbar active colorMVC5 - 导航栏活动颜色
【发布时间】：2017-06-22 17:32:57
【问题描述】：

当我单击导航栏中的活动 li 并转到该视图时，我无法让其更改颜色，我在下面包含了一些代码，但如果需要，我会向您展示更多内容

这是放置在我的布局共享视图中的导航栏代码：

<header id="main-header">
    <div class="container">
        <a href="@Url.Action("Index", "Home")">
            <img src="~/logo.png" id="logo" alt="logo" />
        </a>
        <nav class="main-nav">
            <ul>
                @if (User.IsInRole("Admin"))
                {
                    <li>@Html.ActionLink("Venues", "Index", "Venues")</li>
                    <li>@Html.ActionLink("Events", "Index", "Events")</li>
                    <li>@Html.ActionLink("Bands", "Index", "Bands")</li>
                    <li>@Html.ActionLink("Admin", "Admin", "Home")</li>
                    @Html.Partial("_LoginPartial")
                }
                else
                {
                    <li>@Html.ActionLink("Venues", "Index", "Venues")</li>
                    <li>@Html.ActionLink("Events", "Index", "Events")</li>
                    <li>@Html.ActionLink("Bands", "Index", "Bands")</li>
                    <li>@Html.Partial("_LoginPartial")</li>
                }
            </ul>
        </nav>
    </div>
</header>

这是我拥有的 Header-Nav css 类：

.main-nav {
    float: right;
    padding-top: 17px;
}
.main-nav li {
    float: left;
    list-style: none;
    margin-right: 10px;
    position: relative;
}
.main-nav li:last-child {
    margin-right: 0px;
}
.main-nav li.current > a {
    border: 1px solid;
}
.main-nav li a {
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    padding: 2px 10px;
    font-family: 'Montserrat', sans-serif;
}

【问题讨论】：

标签： css asp.net-mvc twitter-bootstrap asp.net-mvc-5

【解决方案1】：

在所需控制器的每个操作方法中，您可以添加ViewBag 值：

public ActionResult Index()
{
    ViewBag.Action = ControllerContext.RouteData.Values["Action"].ToString();
    ViewBag.Controller = ControllerContext.RouteData.Values["Controller"].ToString();

    return View();
}

然后在 View 中你可以使用以下内容来应用所需的 CSS 类：

<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>
<li class="@(ViewBag.Action == "Admin" && ViewBag.Controller == "Home" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li>

对于这些简单的链接，这可能是一个不错的解决方案 - 但如果您要添加更多链接，我建议您添加自己的自定义 HtmlHelper。请参阅此处接受的答案以获取更多信息：How to add "active" class to Html.ActionLink in ASP.NET MVC

编辑：

您可以通过在控制器中添加它来进一步简化它：

public class EventsController : Controller
{
    public ActionResult Index()
    {
        ViewBag.LinkText = "Events";

        return View();
    }
}

然后链接就是，例如：

<li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>

【讨论】：