ASP.net MVC - Navegación y poner de relieve el vínculo "actual"

Question

Cuando se crea un nuevo proyecto MVC se crea un Site.Master con el siguiente marcado:

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

me gustaría poner el código que aquí resaltará el enlace actual si estoy en esa página.

Si añado otro enlace tales como:

<li><%: Html.ActionLink("Products", "Index", "Products")%></li> 

Me gustaría que el enlace de los productos a ser activa (utilizando una clase css como .active) si estoy en cualquier acción en el controlador los productos.

El enlace Acerca de debe estar activo si estoy en la acción Acerca de HomeController. El enlace de Inicio debe estar activo si estoy en la acción de índice del HomeController.

¿Cuál es la mejor manera de hacer esto en MVC?

Answer 1

Salida this blog post

Muestra cómo crear una extensión de HTML que se llama en lugar del habitual Html.ActionLink La extensión anexa entonces class="selected" al elemento de lista que está actualmente activo.

entonces usted puede poner lo formateo/destacando que desee en su CSS

EDITAR

Simplemente añadiendo algo de código para en lugar de sólo un enlace.

public static class HtmlHelpers 
{ 

    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 = "selected" }); 
     } 

     return htmlHelper.ActionLink(linkText, actionName, controllerName); 


    } 
} 

Ahora tiene que definir la clase selected en su CSS y luego en sus puntos de vista añadir una declaración using en la parte superior.

@using ProjectNamespace.HtmlHelpers

Y el uso de la MenuLink en lugar de ActionLink

@Html.MenuLink("Your Menu Item", "Action", "Controller")

Answer 2

que utiliza este enfoque con un HtmlHelper para el problema:

public static class HtmlHelpers 
{ 
    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.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase) && controllerName.Equals(currentController, StringComparison.InvariantCultureIgnoreCase)) 
     { 
      return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "active" }); 
     } 

     return htmlHelper.ActionLink(linkText, actionName, controllerName); 

    } 
} 

y para la vista

@Html.MenuLink"Linktext", "action", "controller") 

Answer 3

Es posible que desee echa un vistazo a mi serie de controles de navegación de MVC, que incluye la capacidad para resaltar automáticamente el enlace actual:

http://mvcquicknav.apphb.com/

Answer 4

Usted puede hacer esto mediante el uso de "Data-" atribuye a identificar el recipiente (s) a continuación, utilizando jQuery cambiar clase CSS del enlace, como la siguiente:

<div class="..." data-navigation="true"> 
        <ul class="..."> 
         <li>@Html.ActionLink("About", "About", "Home")</li> 
         <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
        </ul> 
</div> 

<script> 
    $(function() { 
     $("div[data-navigation='true']").find("li").children("a").each(function() { 
      if ($(this).attr("href") === window.location.pathname) { 
       $(this).parent().addClass("active"); 
      } 
     }); 
    }); 
</script> 

Answer 5

Aquí es una forma de implementar esto como un ayudante MVC:

@helper NavigationLink(string linkText, string actionName, string controllerName) 
{ 
    if(ViewContext.RouteData.GetRequiredString("action").Equals(actionName, StringComparison.OrdinalIgnoreCase) && 
     ViewContext.RouteData.GetRequiredString("controller").Equals(controllerName, StringComparison.OrdinalIgnoreCase)) 
    { 
     <span>@linkText</span> 
    } 
    else 
    { 
     @Html.ActionLink(linkText, actionName, controllerName); 
    } 
} 

A continuación, se puede utilizar similar al siguiente:

@NavigationLink("Home", "index", "home") 
@NavigationLink("About Us", "about", "home") 

Un buen artículo sobre ayudantes MVC se puede encontrar aquí: http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx

Answer 6

<div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
       <li>@Html.ActionLink("Products", "Index", "Products")</li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Archivo<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li>@Html.ActionLink("Document Type", "Index", "DocumentTypes")</li> 
         <li>@Html.ActionLink("Employee", "Index", "Employees")</li> 
         <li>@Html.ActionLink("Suppliers", "Index", "Suppliers")</li> 
        </ul> 
       </li>  
      </ul> 
      @Html.Partial("_LoginPartial") 
     </div> 

Answer 7

Gracias a @codingbadger para la solución.

Tuve que resaltar mis enlaces de navegación en varias acciones, así que decidí agregar algunos más parámetros que contienen los pares de acción de controlador y resaltará el enlace si se accede a cualquiera de esas combinaciones. Y, en mi caso, la clase de resaltado debía aplicarse a un elemento <li>.

estoy poniendo mi código aquí con la esperanza de que ayudará a alguien en el futuro:

• Aquí está el método de ayuda:

  /// <summary> 
  /// The link will be highlighted when it is used to redirect and also be highlighted when any action-controller pair is used specified in the otherActions parameter. 
  /// </summary> 
  /// <param name="selectedClass">The CSS class that will be applied to the selected link</param> 
  /// <param name="otherActions">A list of tuples containing pairs of Action Name and Controller Name respectively</param> 
  public static MvcHtmlString NavLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string parentElement, string selectedClass, IEnumerable<Tuple<string, string>> otherActions) 
  { 
      string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action"); 
      string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller"); 
  
      if ((actionName == currentAction && controllerName == currentController) || 
       (otherActions != null && otherActions.Any(pair => pair.Item1 == currentAction && pair.Item2 == currentController))) 
      { 
       return new MvcHtmlString($"<{parentElement} class=\"{selectedClass}\">{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>"); 
      } 
  
      return new MvcHtmlString($"<{parentElement}>{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>"); 
  } 
  

• Y, he aquí un ejemplo de cómo usarlo :

<ul> 
 
    @Html.NavLink("Check your eligibility", "CheckEligibility", "Eligibility", "li", "current-page", new Tuple<string, string>[] 
 
    { 
 
     new Tuple<string, string>("Index", "Eligibility"), 
 
     new Tuple<string, string>("RecheckEligibility", "Eligibility") 
 
    }) 
 
    @Html.NavLink("Apply for my loan", "Apply", "Loan", "li", "current-page") 
 
</ul>