아래는 이 문서의 예상 출력입니다.

나쁜 습관:

각 페이지에 JavaScript 코드를 작성하여 탐색 모음의 해당 링크에 활성 클래스를 추가/제거합니다

.

탐색 모음에서 활성 페이지를 강조 표시하기 위해 각 페이지가 아닌 마스터 레이아웃 페이지에 JavaScript 코드를 작성합니다

.

nav-bar의 해당 링크에 활성 클래스를 추가/제거하기 위해 각 페이지에 JavaScript 코드를 작성합니다.

나쁜 습관: nav-bar의 해당 링크에 활성 클래스를 추가/제거하기 위해 각 페이지에 JavaScript 코드를 작성합니다.

세 페이지가 있다고 가정합니다. Home, About, Contact 그리고 nav-bar에서 하이라이트 활성 클래스를 관리하기 위해 아래와 같은 잘못된 코드를 작성했습니다.

홈페이지:

  $('#lnkHome').addClass('active');

  $('#lnkAbout').removeClass('active');

  $('#lnkContact').removeClass('active');

페이지 정보:

  $('#lnkHome').removeClass('active');

  $('#lnkAbout').addClass('active');

  $('#lnkContact').removeClass('active');

연락처 페이지:

  $('#lnkHome').removeClass('active');

  $('#lnkAbout').removeClass('active');

  $('#lnkContact').addClass('active');

나쁜 습관: 탐색 모음에서 활성 페이지를 강조 표시하기 위해 각 페이지가 아닌 마스터 레이아웃 페이지에 JavaScript 코드를 작성합니다.

세 페이지가 있다고 가정합니다. Home, About, Contact 그리고 마스터 레이아웃 페이지에 아래의 잘못된 코드를 작성하여 nav-bar에서 하이라이트 활성 클래스를 관리합니다.

var currentActionName = ViewContext.RouteData.Values["action"].ToString();

$(document).ready(function () {
    //remove the active class in each pages
    $('.lnk').each(function () {
        $(this).removeClass('active');
    });


    //assign the active class to active page only
    if ('@currentActionName' === 'Index') {
        $('#lnkHome').addClass('active');
    } else if ('@currentActionName' === "About") {
        $('#lnkHome').addClass('lnkAbout');
    } else if ('@currentActionName' === "Contact") {
        $('#lnkHome').addClass('lnkContact');
    }
});

좋은 연습:

JavaScript 코드를 작성하는 대신 C#에서 Html 도우미를 만들고 해당 코드에서 활성 클래스를 관리합니다.

아래 코드를 참조하십시오. 탐색 모음에서 활성 클래스를 관리하기 위해 IsSelected() 메서드를 사용하여 Html 도우미를 만들었습니다.

`
공개 정적 클래스 HtmlHelperExtensions

{

    public static string IsSelected(this HtmlHelper html, string controller = null, string action = null,

        string cssClass = null)

    {

        if (string.IsNullOrEmpty(cssClass))

            cssClass = "active";



        var currentAction = (string)html.ViewContext.RouteData.Values["action"];

        var currentController = (string)html.ViewContext.RouteData.Values["controller"];



        if (string.IsNullOrEmpty(controller))

            controller = currentController;



        if (string.IsNullOrEmpty(action))

            action = currentAction;



        return controller == currentController && action == currentAction ? cssClass : string.Empty;

    }



    public static string PageClass(this HtmlHelper html)

    {

        var currentAction = (string)html.ViewContext.RouteData.Values["action"];

        return currentAction;

    }

}
`

위의 C# 코드를 작성한 후 다음과 같이 각 메뉴 링크에 이 메소드를 생성합니다. [@Html.IsSelected()]

@Html.ActionLink("Home", "Index", "Home") @Html.ActionLink("About", "About", "Home") @Html.ActionLink("Contact", "Contact", "Home")

다음은 위 코드의 장점입니다.

사용 용이성

대규모 응용 프로그램에서 하이라이트 페이지 기능을 쉽게 관리

여러 페이지에 대해 강조 표시된 단일 메뉴 항목 표시

각 메뉴 항목에 대한 동적 하이라이트 클래스 이름을 관리합니다

.

가장 중요한 점은 사용자 정의 작성 코드이므로 필요에 따라 사용자 정의할 수 있습니다

.

읽어 주셔서 감사합니다.

행복한 코딩 :)