[Css] ASP.NET MVC에서 현재 페이지를 시각적으로 표시하는 방법은 무엇입니까?


Answers

가장 쉬운 방법은 ViewContext의 RouteData에서 현재 컨트롤러와 동작을 얻는 것입니다. 서명의 변경 및 @를 사용하여 키워드를 이스케이프 처리합니다.

<% var controller = ViewContext.RouteData.Values["controller"] as string ?? "Home";
   var action = ViewContext.RouteData.Values["action"] as string ?? "Index";
   var page = (controller + ":" + action).ToLower();
 %>

<%= Html.ActionLink( "About", "About", "Home", null,
                     new { @class = page == "home:about" ? "current" : "" ) %>
<%= Html.ActionLink( "Home", "Index", "Home", null,
                     new { @class = page == "home:index" ? "current" : "" ) %>

@ Jon 's와 같은 HtmlHelper 확장자를 조합하여 더 깨끗하게 만들 수 있습니다.

<%= Html.MenuLink( "About", "About", "Home", null, null, "current" ) %>

MenuActionLink는 어디에 있습니까?

public static class MenuHelperExtensions
{
     public static string MenuLink( this HtmlHelper helper,
                                    string text,
                                    string action,
                                    string controller,
                                    object routeValues,
                                    object htmlAttributes,
                                    string currentClass )
     {
         RouteValueDictionary attributes = new RouteValueDictionary( htmlAttributes );
         string currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
         string currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";
         string page = string.Format( "{0}:{1}", currentController, currentAction ).ToLower();
         string thisPage = string.Format( "{0}:{1}", controller, action ).ToLower();
         attributes["class"] = (page == thisPage) ? currentClass : "";
        return helper.ActionLink( text, action, controller, new RouteValueDictionary( routeValues ), attributes );
     }
}
Question

토론의 거점. 표준 ASP.NET MVC 웹 프로젝트를 만듭니다.

마스터 페이지에는 두 개의 메뉴 항목이 있습니다.

<div id="menucontainer">
  <ul id="menu">
    <li>
      <%= Html.ActionLink("Home", "Index", "Home")%></li>
    <li>
      <%= Html.ActionLink("About", "About", "Home")%></li>
  </ul>
</div>

현재 페이지를 나타내는 시각적 CSS 스타일을 어떻게 설정할 수 있습니까? 예를 들어 About 페이지 / 컨트롤러에서 본질적으로 이렇게하고 싶습니다.

<%= Html.ActionLink("About", "About", "Home", new {class="current"})%></li>

그리고, 물론, 홈 페이지에서 :

<%= Html.ActionLink("Home", "Index", "Home", new {class="current"})%></li>

(CSS 스타일 이름은 메뉴에서 현재 페이지임을 시각적으로 나타냅니다.)

마스터 페이지에서 콘텐츠 자리 표시 자로 메뉴 div를 나눌 수는 있지만 모든 페이지에 메뉴를 표시해야합니다.

어떤 아이디어라도 이것에 대한 좋은 해결책이 있습니까?




<script type="javascript/text">
$( document ).ready( function() {

        @if (Request.Url.AbsolutePath.ToLower() == "/") 
        {
            @Html.Raw("$('.navbar-nav li').eq(0).attr('class','active');")
        }

        @if (Request.Url.AbsolutePath.ToLower().Contains("details")) 
        {
            @Html.Raw("$('.navbar-nav li').eq(1).attr('class','active');")
        }

        @if (Request.Url.AbsolutePath.ToLower().Contains("schedule")) 
        {
            @Html.Raw("$('.navbar-nav li').eq(2).attr('class','active');")
        }

    });
</script>

이 작업을 5 분 안에 완료하면 아마도 리팩터링 할 수 있지만 기본적인 아이디어는 작은 사이트에서 가장 유용 할 것입니다.




나는 최근에 다음과 같은 HTML 도우미를 만들었습니다.

public static string NavigationLink(this HtmlHelper helper, string path, string text)
{
    string cssClass = String.Empty;
    if (HttpContext.Current.Request.Path.IndexOf(path) != -1)
    {
        cssClass = "class = 'selected'";
    }

    return String.Format(@"<li><a href='{0}' {1}>{2}</a></li>", path, cssClass, text);
}

구현은 다음과 같습니다.

  <ul id="Navigation">
  <%=Html.NavigationLink("/Path1", "Text1")%>
  <%=Html.NavigationLink("/Path2", "Text2")%>
  <%=Html.NavigationLink("/Path3", "Text3")%>
  <%=Html.NavigationLink("/Path4", "Text4")%>
  </ul>



T4MVC를 사용하는 경우 다음을 사용할 수 있습니다.

        public static HtmlString MenuLink(
        this HtmlHelper helper,
        string text,
        IT4MVCActionResult action,
        object htmlAttributes = null)
    {
        var currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
        var currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";

        var attributes = new RouteValueDictionary(htmlAttributes);
        var cssClass = (attributes.ContainsKey("class"))
                           ? attributes["class"] + " "
                           : string.Empty;

        string selectedClass;
        if(action.Controller.Equals(currentController, StringComparison.InvariantCultureIgnoreCase)
        {
            selectedClass = "selected-parent";
            if(action.Action.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase))
                selectedClass = "selected";
        }
        cssClass += selectedClass;

        attributes["class"] = cssClass;

        return helper.ActionLink(text, (ActionResult)action, attributes);
    }



그것은 단지 그것이 5 번째 매개 변수 일 수 있으므로 html 속성 앞에 null을 삽입하십시오. 이 게시물은 여기에 설명되어 있습니다. 비록 네 번째 논점에서 몇 가지를 전달할 수 있지만, 다섯째는 특히 HTMLattributes