如何將「活動」類別新增至 ASP.NET MVC 中的 Html.ActionLink 以進行 Bootstrap 導覽？-css教學-PHP中文網

如何將「活動」類別新增至 ASP.NET MVC 中的 Html.ActionLink 以進行 Bootstrap 導覽？

Mary-Kate Olsen

發布： 2024-12-19 01:00:10

原創

531 人瀏覽過

How to Add the

將「active」類別加入ASP.NET MVC 中的Html.ActionLink

Context

將「active」類別導覽至Bootstrap 導覽欄是向目前頁面上的使用者提供視覺回饋的重要步驟。當使用 Html.ActionLink 產生導航連結時，您可能想要將該類別指派給連結本身。然而，為了獲得正確的功能，該類別必須應用於

。

解決方案

要滿足此要求，請如下修改程式碼：

<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>

登入後複製

透過將「active」類別套用於

元素。元素，Bootstrap 將正確設定連結的樣式以指示活動頁面。

高級注意事項

對於多個操作或控制器可以觸發所選行為的場景，請考慮使用HtmlHelper 擴展方法：

public static string IsSelected(this IHtmlHelper htmlHelper, string controllers, string actions, string cssClass = "selected")
{
    string currentAction = htmlHelper.ViewContext.RouteData.Values["action"] as string;
    string currentController = htmlHelper.ViewContext.RouteData.Values["controller"] as string;

    IEnumerable<string> acceptedActions = (actions ?? currentAction).Split(',');
    IEnumerable<string> acceptedControllers = (controllers ?? currentController).Split(',');

    return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ?
        cssClass : String.Empty;
}

登入後複製

通過此擴展，現在您可以使用以下語法：

<li class="@Html.IsSelected(actions: "Home", controllers: "Default")">
    <a href="@Url.Action("Home", "Default")">Home</a>
</li>

登入後複製

以上是如何將「活動」類別新增至 ASP.NET MVC 中的 Html.ActionLink 以進行 Bootstrap 導覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！