Asp.Net Mvc resaltando la técnica de enlace de página actual?

Question

Necesito resaltar el enlace activo en el menú. Mi menú está en la página maestra por cierto. Estoy buscando la mejor manera de implementar esto? ¿Algunas ideas?

Answer 1

La mejor manera de manejar esto es escribiendo un ayudante de HTML. Puede usar RouteData.Values["action"] para obtener la acción que se está ejecutando actualmente y compararla con el nombre del menú, y si coinciden, aplique una clase de CSS que lo resalte.

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

y luego utilizar esta ayuda para hacer que los elementos del menú:

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

Answer 2

Estoy bastante seguro de que usted puede hacer esto con CSS puro. Involucra selectores de clases y se daña con la etiqueta corporal. Me gustaría ir con el método de ayuda todos los días de la semana.

Answer 3

que utilizan esta solución:

Primera - añadir los datos de atributo-menuPageId a su menú de enlaces

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

Siguiente - añadir campo oculto de la página actual Id a Layout.cshtml

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

Agregue la inicialización de ViewBag.Page en sus páginas como Inicio o Productos

@{ 
    ViewBag.Page = "products"; 
} 

y lo último que debe hacer referencia a este javascipt de 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

Siempre estoy usando esta solución HTML Parte

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

ayudante 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

En diseño intente lo siguiente:

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

Si desea adjuntar también la información del controlador favor echar un vistazo a este enlace

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