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.
Bootstrap memerlukan kelas "aktif" untuk digunakan pada
<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>
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 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!