it-swarm-ko.tech

활성 메뉴 항목-asp.net mvc3 마스터 페이지

마스터 페이지의 메뉴 항목에 "활성/현재"클래스를 할당하기위한 적절한 솔루션을 찾으려고 노력하고 있습니다. 이 클라이언트 대 서버 쪽을 수행할지 여부와 관련하여 줄이 중간으로 분할됩니다.

사실 나는 JavaScript와 MVC를 처음 사용하므로 의견이 없습니다. "가장 깨끗하고"가장 적절한 방법으로이 작업을 수행하고 싶습니다.

"활성"클래스를 <li> 항목에 지정하는 다음 jQuery 코드가 있습니다. 유일한 문제는 "인덱스"또는 기본보기 메뉴 항목에 항상 활성 클래스가 지정됩니다. URL은 항상 하위 문자열이므로 다른 메뉴 링크 중

(default) index = localhost/
link 1 = localhost/home/link1
link 2 = localhost/home/link1

$(function () {
 var str = location.href.toLowerCase();
  $('#nav ul li a').each(function() {
   if (str.indexOf(this.href.toLowerCase()) > -1) {
    $(this).parent().attr("class","active"); //hightlight parent tab
   }
});

더 좋은 방법이 있습니까? 누군가 클라이언트 쪽 버전을 방탄하는 데 도움이 될까요? "index"또는 기본 링크가 항상 "active"입니까? 색인 방법에 가짜 확장명을 할당하는 방법이 있습니까? 기본 URL 대신 localhost/home/dashboard 모든 링크의 하위 문자열이되지 않습니까?

사실, 나는이 서버 측을 수행하는 방법을 실제로 따르지 않기 때문에 jQuery로 클라이언트 측에서 시도하고 있습니다 ... 어떤 도움을 주시면 감사하겠습니다.

65
Michael

사용자 정의 HTML 도우미는 일반적으로 잘 작동합니다.

public static MvcHtmlString MenuLink(
    this HtmlHelper htmlHelper, 
    string linkText, 
    string actionName, 
    string controllerName
)
{
    string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
    string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
    if (actionName == currentAction && controllerName == currentController)
    {
        return htmlHelper.ActionLink(
            linkText,
            actionName,
            controllerName,
            null,
            new {
                @class = "current"
            });
    }
    return htmlHelper.ActionLink(linkText, actionName, controllerName);
}

마스터 페이지에서 :

<ul>
    <li>@Html.MenuLink("Link 1", "link1", "Home")</li>
    <li>@Html.MenuLink("Link 2", "link2", "Home")</li>
</ul> 

이제 남은 것은 .current CSS 클래스를 정의하는 것입니다.

114
Darin Dimitrov

영역에 대한 지원이 추가되었습니다.

public static class MenuExtensions
{
    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper, string text, string action, string controller, string area = null)
    {

        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;

        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        var currentArea = routeData.DataTokens["area"] as string;

        if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentArea, area, StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("active");
        }
        li.InnerHtml = htmlHelper.ActionLink(text, action, controller, new {area}, null).ToHtmlString();
        return MvcHtmlString.Create(li.ToString());
    }
}
5
Ronnie Overby

이 문제에 대한 나의 해결책은 다음과 같습니다.

HtmlHelpers 클래스의 다음 확장 메서드를 만들었습니다.

public static class HtmlHelpers
{
    public static string SetMenuItemClass(this HtmlHelper helper, string actionName)
    {
        if (actionName == helper.ViewContext.RouteData.Values["action"].ToString())
            return "menu_on";
        else
            return "menu_off";
    }

그런 다음 메뉴 블록이 있습니다. 다음과 같이 보입니다 :

<div id="MenuBlock">
    <div class="@Html.SetMenuItemClass("About")">
        <a>@Html.ActionLink("About", "About", "Home")</a></div>
    <img height="31" width="2" class="line" alt="|" src="@Url.Content("~/Content/theme/images/menu_line.gif")"/>
    <div class="@Html.SetMenuItemClass("Prices")">
        <a>@Html.ActionLink("Prices", "Prices", "Home")</a></div>
</div>

따라서 내 메서드는 홈 컨트롤러의 현재 작업에 따라 클래스 이름을 모든 div에 반환합니다. 이름이 같지만 컨트롤러가 다른 작업이있을 때 문제를 피하기 위해 컨트롤러 이름을 지정하는 매개 변수 하나를 매개 변수에 더 깊이 추가 할 수 있습니다.

4
Tim Gim

JQuery를 통해 u는 다음과 같이 할 수 있습니다.

$(document).ready(function () {
    highlightActiveMenuItem();
});

highlightActiveMenuItem = function () {
    var url = window.location.pathname;
    $('.menu a[href="' + url + '"]').addClass('active_menu_item');
};

.active_menu_item {
    color: #000 !important;
    font-weight: bold !important;
}

원본 : http://www.paulund.co.uk/use-jquery-to-highlight-active-menu-item

2
oyaebunterkrah