부트스트랩 탐색을 위해 ASP.NET MVC의 Html.ActionLink에 'Active' 클래스를 효율적으로 추가하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

부트스트랩 탐색을 위해 ASP.NET MVC의 Html.ActionLink에 'Active' 클래스를 효율적으로 추가하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-12-13 01:42:08

원래의

647명이 탐색했습니다.

How to Efficiently Add the

ASP.NET MVC의 Html.ActionLink에 "Active" 클래스 추가

ASP.NET MVC에서 부트스트랩 탐색 모음에 "active" 클래스를 추가하는 것은 필수적인. 그러나 이를 요소가 Bootstrap의 지침과 일치하지 않습니다.

Bootstrap 방식

Bootstrap에서는

요소가 아니라 요소. 이렇게 하면 어떤 요소 위에 마우스를 올려도 활성 클래스가 항상 표시됩니다.

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

로그인 후 복사

자동 클래스 적용

각

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

로그인 후 복사

위 내용은 부트스트랩 탐색을 위해 ASP.NET MVC의 Html.ActionLink에 'Active' 클래스를 효율적으로 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!