[英]MVC5 - Navbar active color
I am having trouble getting the active li in my nav bar to change color when I click it and go to that view, I have included some code below but I show you more if needed 我单击导航栏并进入该视图时,无法在导航栏中更改活动锂,我在下面添加了一些代码,但如果需要,可以显示更多代码
This is my navbar code that is placed in my layout shared view: 这是放置在布局共享视图中的导航条代码:
<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>
This is the Header-Nav css classes I have: 这是我拥有的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;
}
In each action method of the required controllers you can add ViewBag
values: 在所需控制器的每种操作方法中,您可以添加ViewBag
值:
public ActionResult Index()
{
ViewBag.Action = ControllerContext.RouteData.Values["Action"].ToString();
ViewBag.Controller = ControllerContext.RouteData.Values["Controller"].ToString();
return View();
}
Then in the View you can use the following to apply the required CSS class: 然后,可以在“视图”中使用以下内容来应用所需的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>
This is probably an ok solution for these simple links - but if you were going to add many more I would recommend adding you own custom HtmlHelper
. 对于这些简单的链接,这可能是一个好的解决方案-但如果要添加更多,我建议您添加自己的自定义HtmlHelper
。 See accepted answer here for more information: How to add "active" class to Html.ActionLink in ASP.NET MVC 有关更多信息,请参见此处的已接受答案: 如何在ASP.NET MVC中将“活动”类添加到Html.ActionLink
Edit: 编辑:
You could simplify it even more by just having this in controller: 您可以通过在控制器中添加以下内容来进一步简化它:
public class EventsController : Controller
{
public ActionResult Index()
{
ViewBag.LinkText = "Events";
return View();
}
}
And then the links would just be, eg: 然后链接就是,例如:
<li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.