ASP.NET MVC - 导航中的当前页面高亮显示
我想知道在使用ASP.NET MVC 3时,如何将CSS类添加到导航中的当前页面?这是我在我的_Layout.cshtml文件导航:ASP.NET MVC - 导航中的当前页面高亮显示
<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>
正如你可以看到我在与具有CSS类“当前”适用于它的第一个导航4个链路,我想成为能够根据用户所处的页面将此类添加/删除到我的导航中的不同链接。这可能吗?
干杯
我会建议使用此扩展方法。喜欢的东西:
@using MyExtensionNamespace;
...
@Html.NavigationLink("Product Search", "Index", "Home")
| @Html.NavigationLink("Orders", "Index", "Orders")
| @Html.NavigationLink("My Account", "MyAccount", "Account")
| @Html.NavigationLink("Logout", "LogOff", "Account")
这有让您的剃须刀干净了一点的利益和:
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);
}
然后你就可以通过包括分机号的命名空间,只是调用你的方法用它在你的浏览在其他视图中很容易重用。
你可以在你的HTML类属性来实现
@{
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" : "" })
谢谢!这工作 – CallumVass 2012-02-15 09:02:41
很高兴帮助!祝你今天愉快! – dknaack 2012-02-15 09:38:37
@dknaack是不是你在最后一个}错过了)? – 2015-06-02 13:18:09
@{
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);
}
然后,你可以这样做:
class="@isActiveController("controlername","action","activecssstyleclass","inactiveccsstyle")"
刚的其他方式@dknaack他回答..更通用和更少的功能重复您的代码。
我用这个教程来完成这件事,这是一个简单得多的理解和需要2分钟 Hightlight Active menu item
这种方法的缺点是,你必须在你的每个控制器动作中执行ViewBag.CurrentPage .. – CallumVass 2013-09-20 13:40:21
在我的情况下,假设我有一个主页和一个菜单。您li
类作为条件
@{
ViewBag.Title = "Home";
ViewBag.Active = "Home";
}
然后将其放置到主动与否:
主页中添加ViewBag.Active
作为占位符这样
<li class="@(ViewBag.Active=="Home"? "active" : "")">
<a href="@Url.Action("Index", "Home")"><span>@ViewBag.Title</span></a>
</li>
我真的很喜欢这个答案。非常简单,非常实用。 – 2017-05-09 05:41:26
这适用于Bootstrap 4的导航设置,其中li具有“活动”CSS类以及“nav-item” – JaneH 2017-09-14 13:18:59
谢谢,标记为答案,因为我觉得这是做到这一点的最佳方式,更清晰的剃刀视图和代码重用性 – CallumVass 2014-07-28 07:32:17
对于扩展'HtmlHelper.ActionLink()',添加[LinkExtensions]的命名空间(https://msdn.microsoft.com/en-us/library/system.web.mvc.html.linkextensions.aspx),如下所示: '使用System.Web.Mvc.Html;' – Mike 2015-09-28 17:02:46