首頁 web前端 css教學 如何有效率地將「Active」類別新增至 ASP.NET MVC 導覽連結?

如何有效率地將「Active」類別新增至 ASP.NET MVC 導覽連結?

Dec 31, 2024 pm 09:49 PM

How to Efficiently Add the

將Active 類別加入Html.ActionLink

在ASP.NET MVC 中,通常會在導航元素上設定「active」類別指示目前活動頁面。但是,將類別直接新增到 中會導致錯誤。

Bootstrap 注意事項

對於 Bootstrap,活動類別通常會應用於

  • 標籤。元素而不是 標籤。因此,您應該將程式碼修改為類似於以下內容:
    <ul>
    登入後複製
    登入後複製

    動態類別分配

    要自動執行基於目前頁面分配活動類別的過程,您可以使用以下方法:

    <ul>
    登入後複製
    登入後複製

    透過使用ViewContext.RouteData.Values屬性,您可以自動確定目前的操作和控制器。三元運算子可讓您根據正在執行的操作有條件地新增活動類別。

    HtmlHelper 擴充

    為了更乾淨、更優雅的解決方案,您可以建立一個HtmlHelper 擴充方法:

    public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
    {
      // Get the current action and controller
      string currentAction = html.ViewContext.RouteData.Values["action"].ToString();
      string currentController = html.ViewContext.RouteData.Values["controller"].ToString();
    
      // Create arrays of accepted actions and controllers
      string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
      string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();
    
      // Check if the current action and controller match any of the accepted values
      return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : string.Empty;
    }
    登入後複製

    此擴充方法讓您可以使用以下方式輕鬆指派活動類別語法:

    <li>
    登入後複製
  • 以上是如何有效率地將「Active」類別新增至 ASP.NET MVC 導覽連結?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱門文章

    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章

    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    1 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章標籤

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    將框陰影添加到WordPress塊和元素 將框陰影添加到WordPress塊和元素 Mar 09, 2025 pm 12:53 PM

    將框陰影添加到WordPress塊和元素

    使用智能表單框架創建JavaScript聯繫表格 使用智能表單框架創建JavaScript聯繫表格 Mar 07, 2025 am 11:33 AM

    使用智能表單框架創建JavaScript聯繫表格

    創建一個具有可滿足屬性的內聯文本編輯器 創建一個具有可滿足屬性的內聯文本編輯器 Mar 02, 2025 am 09:03 AM

    創建一個具有可滿足屬性的內聯文本編輯器

    使用GraphQL緩存 使用GraphQL緩存 Mar 19, 2025 am 09:36 AM

    使用GraphQL緩存

    揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐 揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐 Mar 08, 2025 am 09:45 AM

    揭開屏幕讀取器的神秘面紗:可訪問的表格和最佳實踐

    使您的第一個自定義苗條過渡 使您的第一個自定義苗條過渡 Mar 15, 2025 am 11:08 AM

    使您的第一個自定義苗條過渡

    比較5個最佳的PHP形式構建器(和3個免費腳本) 比較5個最佳的PHP形式構建器(和3個免費腳本) Mar 04, 2025 am 10:22 AM

    比較5個最佳的PHP形式構建器(和3個免費腳本)

    在node.js中使用multer上傳並上傳express 在node.js中使用multer上傳並上傳express Mar 02, 2025 am 09:15 AM

    在node.js中使用multer上傳並上傳express

    See all articles