ASP.NET MVC에서 활성 탐색 링크의 스타일을 효과적으로 지정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

ASP.NET MVC에서 활성 탐색 링크의 스타일을 효과적으로 지정하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-17 13:42:18

원래의

154명이 탐색했습니다.

How to Effectively Style Active Navigation Links in ASP.NET MVC?

ASP.NET MVC에서 "active" 클래스를 사용하여 탐색 요소 스타일 지정

소개

ASP.NET MVC 애플리케이션에서 Html.ActionLink 도우미 일반적으로 탐색 링크를 만드는 데 사용됩니다. Bootstrap 스타일을 통합할 때 해당 탐색 요소에 "active" 클래스를 적용하는 것이 중요합니다. 이 문서에서는 Html.ActionLink 도우미를 사용하여 탐색 링크에 "활성" 클래스를 추가하는 방법을 안내하고 HTML 도우미 확장을 사용하여 보다 우아한 솔루션을 제공합니다.

Html.ActionLink로 "활성" 클래스 적용

다음 시나리오를 고려해보세요.

<ul class="nav navbar-nav">
  <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

로그인 후 복사

이 코드는 탐색 링크를 생성하지만 "active" 클래스는 태그로 인해 잘못된 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>

로그인 후 복사

이렇게 하면 활성 페이지를 기반으로 현재 탐색 요소에 "활성" 클래스가 올바르게 적용됩니다.

동적 스타일 지정을 위해 HTML 도우미 확장 사용

보다 유연하고 재사용 가능한 솔루션을 제공하려면 다음과 같은 HTML 도우미 확장을 만들 수 있습니다.

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "selected")
{
    ViewContext viewContext = html.ViewContext;
    bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;

    if (isChildAction)
        viewContext = html.ViewContext.ParentActionViewContext;

    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentAction = routeValues["action"].ToString();
    string currentController = routeValues["controller"].ToString();

    if (String.IsNullOrEmpty(actions))
        actions = currentAction;

    if (String.IsNullOrEmpty(controllers))
        controllers = currentController;

    string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray();
    string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray();

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

로그인 후 복사

이것은 확장 메서드에는 컨트롤러, 작업 및 선택적 CSS 클래스라는 세 가지 매개 변수가 필요합니다. 현재 작업과 컨트롤러가 지정된 값과 일치하는지 확인하고 일치하는 경우 cssClass를 반환하고, 그렇지 않으면 빈 문자열을 반환합니다.

HTML 도우미 확장 사용

이 확장을 사용하려면 페이지에 명령문 사용:

@using YourNamespace;

로그인 후 복사

그런 다음 뷰에서 "active" 클래스를 다음과 같이 적용할 수 있습니다. 다음과 같습니다:

<ul>
    <li>@Html.ActionLink("Home", "Home", "Default", null, new {@class="@Html.IsSelected(actions: "Home", controllers: "Default")"})</li>
    <li>@Html.ActionLink("About", "About", "Default", null, new {@class="@Html.IsSelected(actions: "About", controllers: "Default")"})</li>
</ul>

로그인 후 복사