Asp.Net Mvc evidenziando la tecnica di collegamento della pagina corrente?

Question

Devo evidenziare il collegamento attivo nel menu. A proposito, il mio menu è nella pagina principale. Sto cercando il modo migliore per implementarlo? Qualche idea?

Answer 1

Il modo migliore per gestire questo è scrivere un helper HTML. È possibile utilizzare RouteData.Values["action"] per ottenere l'azione attualmente in esecuzione e confrontare con il nome del menu e, se corrispondono, applicare una classe CSS che la evidenzierà.

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()); 
} 

E poi usare questo helper per rendere le voci di menu:

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

Answer 2

Sono abbastanza sicuro che si può fare questo con CSS puro. Coinvolge i selettori di classe e fa i conti con il tag del corpo. Vorrei andare con il metodo di aiuto ogni giorno della settimana.

Answer 3

Io uso questa soluzione:

In primo luogo - aggiungere attributo data-menuPageId al menu collegamenti

<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> 

Avanti - aggiunge campo nascosto per la pagina corrente Id al Layout.cshtml

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

Aggiungi l'inizializzazione di ViewBag.Page alle tue pagine come Home o Prodotti

@{ 
    ViewBag.Page = "products"; 
} 

E ultima cosa che si dovrebbe fare riferimento a questo Javascipt da yor Layout.cshtml

$(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

Utilizzo sempre questa soluzione Html Parte

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

Helper Parte

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 provare come segue:

@{ 
    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

Se volete allegare anche le informazioni sul controller si prega di dare un'occhiata a questo link

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