tag - elemento de menú activo-asp.net mvc3 página maestra

razor vs mvc

Question

He estado explorando tratando de encontrar una solución adecuada para asignar clases "activas / actuales" a los elementos del menú de la página maestra. La línea se divide en el medio con respecto a si hacer este lado del cliente vs servidor.

A decir verdad, soy nuevo en JavaScript y MVC, así que no tengo una opinión. Preferiría hacer esto de la manera "más limpia" y más apropiada.

Tengo el siguiente código jQuery para asignar la clase "activa" al elemento <li> ... el único problema es que al elemento de menú "vista previa" o "índice" siempre se le asignará la clase activa, porque la URL siempre es una subcadena de los otros enlaces de menú:

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

¿Hay una mejor manera de hacer esto, chicos? Al menos alguien me ayudaría a obtener la versión del cliente a prueba de balas? ¿Para que el "índice" o enlace predeterminado siempre esté "activo"? ¿Hay alguna forma de asignar una extensión falsa al método de índice? como en lugar de solo la URL base, ¿sería localhost/home/dashboard para que no sea una subcadena de cada enlace?

A decir verdad, realmente no sigo los métodos de hacer este lado del servidor, y es por eso que trato de hacerlo desde el lado del cliente con jQuery ... cualquier ayuda sería apreciada.

Answer 1

A través de JQuery puedes hacer esto:

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

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

Answer 2

Aquí está mi solución de este problema.

Creé el siguiente método de extensión de la clase 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";
    }

Entonces tengo mi menublock. Se parece a esto:

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

Entonces mi método devuelve el nombre de la clase a cada div según la acción actual del controlador Home. Puede profundizar y agregar al método un parámetro, que especifica el nombre del controlador para evitar problemas, cuando tiene acciones con el mismo nombre pero con diferentes controladores.

Answer 3

Lo que suelo hacer es asignar una clase a la etiqueta corporal que se basa en las partes de la ruta. Entonces, si haces un String, reemplaza la ruta para convertir / blogs / posts / 1 a class = "blogs posts 1".

Luego, puede asignar reglas CSS para manejar eso. Por ejemplo, si tiene un elemento de menú para "blogs", puede hacer una regla como

BODY.blogs li.blogs { /* your style */}

o si quieres un estilo particular si estás en una publicación solo vicio si estás en la página raíz del blog

BODY.blogs.posts li.blogs {/* your style */}

Answer 4

Se agregó soporte para las áreas:

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

Answer 5

Un asistente HTML personalizado generalmente hace bien el trabajo:

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

y en tu página maestra:

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

Ahora todo lo que queda es definir la clase actual de CSS.