Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menambah Kelas 'Aktif' dengan Cekap pada Html.ActionLink ASP.NET MVC untuk Navigasi Bootstrap?

Bagaimana untuk Menambah Kelas 'Aktif' dengan Cekap pada Html.ActionLink ASP.NET MVC untuk Navigasi Bootstrap?

DDD
Lepaskan: 2024-12-13 01:42:08
asal
626 orang telah melayarinya

How to Efficiently Add the

Menambah Kelas "Aktif" pada Html.ActionLink dalam ASP.NET MVC

Dalam ASP.NET MVC, menambah kelas "aktif" pada navbar bootstrap ialah penting. Walau bagaimanapun, pendekatan biasa untuk menambahkannya pada elemen tidak sejajar dengan garis panduan Bootstrap.

Cara Bootstrap

Bootstrap memerlukan kelas "aktif" untuk digunakan pada

  • elemen, bukan unsur. Ini memastikan kelas aktif sentiasa kelihatan, tanpa mengira elemen yang dilegarkan.

    <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>
    Salin selepas log masuk

    Aplikasi Kelas Automatik

    Daripada menambah kelas "aktif" secara manual pada setiap

    <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>
    Salin selepas log masuk

    Penyelesaian yang Lebih Elegan (HtmlHelper Extension)

    Penyelesaian yang lebih elegan ialah mencipta kaedah sambungan 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 : "";
    }
    Salin selepas log masuk

    Penggunaan:

    <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>
    Salin selepas log masuk

    Atas ialah kandungan terperinci Bagaimana untuk Menambah Kelas 'Aktif' dengan Cekap pada Html.ActionLink ASP.NET MVC untuk Navigasi Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

  • sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan