首頁 > web前端 > css教學 > 如何有效率地將「Active」類別新增至 ASP.NET MVC 的 Html.ActionLink 以進行 Bootstrap 導覽?

如何有效率地將「Active」類別新增至 ASP.NET MVC 的 Html.ActionLink 以進行 Bootstrap 導覽?

DDD
發布: 2024-12-13 01:42:08
原創
626 人瀏覽過

How to Efficiently Add the

在ASP.NET MVC 中將「Active」類別新增至Html.ActionLink

在ASP.NET MVC 中,將「active」類是基本的。然而,將其加入 的常見方法是:

Bootstrap 方式

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>
    登入後複製

    自動類別應用程式

    而不是手動將「活動」類別新增至每個

  • ;,你可以使用ViewContext.RouteData自動判斷目前頁面並套用對應的類別:
    <ul class="nav navbar-nav">
        <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "About" ? "active" : "")">@Html.ActionLink("About", "About", "Home")</li>
        <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Contact" ? "active" : "")">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
    登入後複製

    更優雅解決方案(HtmlHelper擴充功能)

    更優雅的解決方案是建立一個HtmlHelper擴充方法:

    public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
    {
        var viewContext = html.ViewContext;
        var isChildAction = viewContext.Controller.ControllerContext.IsChildAction;
    
        if (isChildAction)
            viewContext = html.ViewContext.ParentActionViewContext;
    
        var routeValues = viewContext.RouteData.Values;
        var currentAction = routeValues["action"].ToString();
        var currentController = routeValues["controller"].ToString();
    
        var acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
        var acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();
    
        return (acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController)) ? cssClass : "";
    }
    登入後複製

    用法:

    <ul>
        <li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
            <a href="@Url.Action("Home", "Default")">Home</a>
        </li>
        <li class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")">
            <a href="@Url.Action("List", "Default")">List</a>
        </li>
    </ul>
    登入後複製
  • 以上是如何有效率地將「Active」類別新增至 ASP.NET MVC 的 Html.ActionLink 以進行 Bootstrap 導覽?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板