如何在 ASP.NET MVC 中有效設定活動導覽連結的樣式？-css教學-PHP中文網

如何在 ASP.NET MVC 中有效設定活動導覽連結的樣式？

Susan Sarandon

發布： 2024-12-17 13:42:18

原創

154 人瀏覽過

How to Effectively Style Active Navigation Links in ASP.NET MVC?

在ASP.NET MVC 中使用「活動」類別設定導航元素的樣式

簡介

在ASP.NET MVC 應用程式中， Html.ActionLink 幫助器通常用於建立導航連結。合併 Bootstrap 樣式時，必須將「active」類別套用至對應的導航元素。本文將指導您使用 Html.ActionLink 幫助器將“active”類別添加到導航鏈接，並使用 HTML 幫助器擴展提供更優雅的解決方案。

使用Html.ActionLink 應用「active」類別

考慮以下場景：

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

登入後複製

此程式碼產生導航鏈接，但「active」類別是應用於標籤，導致無效的Bootstrap 結構。若要解決此問題，請將“active”類別應用於

。元素代替：

<ul class="nav navbar-nav">
  <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

登入後複製

這將根據活動頁面正確地將「活動」類別應用於目前導航元素。

使用HTML 幫助器擴展進行動態樣式

為了提供更靈活和可重用的解決方案，您可以建立一個HTML 幫助器擴展，例如this:

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

    return acceptedActions.Contains(currentAction) &amp;&amp; acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

登入後複製

此擴充方法需要三個參數：控制器、操作和可選的CSS 類別。它檢查當前操作和控制器是否與指定值匹配，如果匹配則返回 cssClass，否則返回空字串。

HTML幫助器擴展的使用

要使用此擴展，請添加在頁面中使用語句：

@using YourNamespace;

登入後複製

然後，在視圖中，您可以將“active”類應用為如下：

<ul>
    <li>@Html.ActionLink("Home", "Home", "Default", null, new {@class="@Html.IsSelected(actions: "Home", controllers: "Default")"})</li>
    <li>@Html.ActionLink("About", "About", "Default", null, new {@class="@Html.IsSelected(actions: "About", controllers: "Default")"})</li>
</ul>

登入後複製