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

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>

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>

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 : "";
}

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>

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!