Asp.Net Mvc Hervorhebung aktuelle Seite Link-Technik?

Question

Ich muss aktiven Link im Menü markieren. Mein Menü befindet sich übrigens auf der Masterseite. Ich suche den besten Weg, dies zu implementieren? Irgendwelche Ideen?

Answer 1

Der beste Weg, dies zu umgehen, ist ein HTML-Helfer zu schreiben. Sie könnten RouteData.Values["action"] verwenden, um die aktuell ausgeführte Aktion abzurufen und mit dem Menünamen zu vergleichen. Wenn sie übereinstimmen, wenden Sie eine CSS-Klasse an, die sie hervorhebt.

public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper, 
    string action, 
    string text 
) 
{ 
    var menu = new TagBuilder("div"); 
    var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"]; 
    if (string.Equals(
      currentAction, 
      action, 
      StringComparison.CurrentCultureIgnoreCase) 
    ) 
    { 
     menu.AddCssClass("highlight"); 
    } 
    menu.SetInnerText(text); 
    return MvcHtmlString.Create(menu.ToString()); 
} 

Und dann diese Helfer verwenden, um die Menüpunkte zu machen:

<%: Html.MenuItem("about", "About us") %> 
<%: Html.MenuItem("contact", "Contact us") %> 
... 

Answer 2

Ich bin mir ziemlich sicher, dass Sie dies mit reinem CSS tun können. Es beinhaltet Klassenselektoren und das Faffing mit dem Body-Tag. Ich würde jeden Tag in der Woche mit der Helfer-Methode gehen.

Answer 3

Ich benutze diese Lösung:

Erste - fügen Sie Attributdaten-menuPageId zu Ihrem Menü verbindet

<ul class="menu"> 
    <li data-menuPageId="home"> 
      @(Html.Link<HomeController>(x => x.Index(), "Home")) 
    </li> 
    <li data-menuPageId="products"> 
      @(Html.Link<ProductsController>(x => x.Index(), "Products")) 
    </li> 
</li> 

Next - für die aktuelle Seite verstecktes Feld hinzufügen Id

<input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" /> 

Layout.cshtml

Fügen Sie ViewBag.Page initialization auf Ihren Seiten hinzu, wie Home oder Produkte

@{ 
    ViewBag.Page = "products"; 
} 

Und letzte, was sollten Sie diese JavaScipt von Yor Layout.cshtml Referenz

$(function() { 
    var pageIdAttr = "data-menuPageId"; 
    var currentPage = $("#currentPageId").attr("value"); 

    var menu = $(".menu"); 

    $("a[" + pageIdAttr + "]").removeClass("selected"); 
    $("a[" + pageIdAttr + "=\"" + currentPage + "\"]", menu).addClass("selected"); 
}); 

Answer 4

ich immer diese Lösung bin mit Html Teil

<ul> 
    @Html.ListItemAction("Home Page","Index","Home") 
    @Html.ListItemAction("Manage","Index","Home") 
</ul> 

Helper Teil

public static class ActiveLinkHelper 
    { 
     public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName) 
     { 
     var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"]; 
     var currentActionName = (string)helper.ViewContext.RouteData.Values["action"]; 
     var sb = new StringBuilder(); 
     sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) && 
              currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase) 
               ? " class=\"active\">" : ">")); 
     var url = new UrlHelper(HttpContext.Current.Request.RequestContext); 
     sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name); 
     sb.Append("</li>"); 
     return new MvcHtmlString(sb.ToString()); 
    } 
} 

Answer 5

In Layout versuchen wie folgt:

@{ 
    string url = Request.RawUrl; 
} 
@switch (url) 
{ 
    case "/home/":     
     @Html.ActionLink("Home", "../home/", null, new { @style = "background:#00bff3;" }) 
     @Html.ActionLink("Members", "../home/MembersList/") 
    break; 
    case "/home/MembersList/": 
     @Html.ActionLink("Home", "../home/") 
     @Html.ActionLink("Members", "../home/MembersList/", null, new { @style = "background:#00bff3;" }) 
    break; 
    default: 
      @Html.ActionLink("Home", "../home/") 
      @Html.ActionLink("Members", "../home/MembersList/") 
    break; 
} 

Answer 6

Wenn Sie möchten auch die Informationssteuerung fügen Sie bitte einen Blick auf diesen Link

https://stackoverflow.com/a/20411015/875708 Artikel