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個鏈路，我想成爲能夠根據用戶所處的頁面將此類添加/刪除到我的導航中的不同鏈接。這可能嗎？

乾杯

來源

2012-02-15 CallumVass

我會建議使用此擴展方法。喜歡的東西：

@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); 
}

然後你就可以通過包括分機號的命名空間，只是調用你的方法用它在你的瀏覽在其他視圖中很容易重用。

來源

2014-07-27 23:43:31 bingles

謝謝，標記爲答案，因爲我覺得這是做到這一點的最佳方式，更清晰的剃刀視圖和代碼重用性 – 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

你可以在你的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" : "" })

來源

2012-02-15 08:25:10 dknaack

謝謝！這工作 – 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他回答..更通用和更少的功能重複您的代碼。

來源

2012-09-27 12:29:50 KyorCode

我用這個教程來完成這件事，這是一個簡單得多的理解和需要2分鐘 Hightlight Active menu item

來源

2013-09-20 13:26:08 CSharper

這種方法的缺點是，你必須在你的每個控制器動作中執行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>

來源

2016-07-11 11:40:34

我真的很喜歡這個答案。非常簡單，非常實用。 – 2017-05-09 05:41:26

這適用於Bootstrap 4的導航設置，其中li具有「活動」CSS類以及「nav-item」 – JaneH 2017-09-14 13:18:59

ASP.NET MVC - 導航中的當前頁面高亮顯示

回答

相關問題