¿Cuál es la forma más sencilla de agregar una clase css seleccionada a ActionLink si la url del enlace de acción coincide con la página que se muestra?ASP.NET MVC: Agregar la clase CSS seleccionada a ActionLink si url coincide con la url actual
Gracias!
Esta es una pregunta difícil, a primera vista, la única válida La respuesta que viene a mi mente es "depende". ¿Quiere decir simple como en simple de código o simple de entender o simple ...
Se puede hacer utilizando jquery y window.location.pathname de extracción y aplicación de clase basada en el controlador y/o acción (por lo general. substr (1 y/o 2)).
Se puede hacer utilizando MenuModel con el puntero SelectedItem, agregando clases basadas en él. Se puede hacer usando MenuItem [] con la propiedad seleccionada, agregando clases basadas en él.
Probablemente se puede hacer de varias maneras adicionales (se le ocurre a ViewBag). Cada uno consta de dos pasos: 1. Guardar/calcular el elemento de menú seleccionado 2. Establecer clase en función de esto.
En cuanto a lo que es más simple, creo que depende de sus preferencias y los requisitos en el sitio. El enfoque javascript podría no ser la mejor si va a apoyar a los usuarios no javascript ^^
Rant cabo
Fui con un enfoque similar al método del modelo. Terminé pasando el menú vista parcial de un elemento de modelo de vista que especificaba la sección del sitio en el que estábamos. Luego configuré la clase css en el menú en consecuencia. En otras áreas usé un pequeño JS y window.location para resaltar el enlace correcto. No me molesta que los usuarios de JS no obtengan un menú destacado :) – Sergio
Emparejamos la URL actual con una expresión regular para cada opción de navegación y la seleccionamos si hay una coincidencia.
Me gusta esta idea ... en lugar de una comparación directa de URL, una coincidencia de expresión regular funcionará mucho mejor – tobias86
Esto podría hacer el truco
var currentUrl = location.pathname; //spits out something like 'Home/About'
$('a').each(function() {
if ($(this).attr('href') == currentUrl) {
$(this).addClass('yourClassName');
}
});
Esto no manejará enlaces de mvc con identificadores en ellos o cadenas de consulta. –
@NickLarsen: Es cierto, no pensé en eso. Pero hice algunas pruebas, y con un enlace de acción como este 'Html.ActionLink (" Enlace "," Acción "," Controlador ", nuevo {id = 123}, nulo)' todavía funciona. Las llamadas jQuery 'attr ('href')' y 'location.pathname' devolvieron 'Controlador/Acción/Id'. Todavía quiero hacer más pruebas con una cadena de consulta, p. 'Controller/Action? Id = 123' – tobias86
@ tobias86: ¿realizó más pruebas? ¿Hay casos que son un problema para esta solución? – Matthieu
añadir una propiedad como LinkCssNaame a su modelo de vista y han establecido el controlador en el servidor
Puede utilizar este método de extensión.
public static MvcHtmlString ActionLinkWithSelection(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName)
{
const string action = "action";
const string controller = "controller";
const string selected = "selected";
var routeValues = htmlHelper.ViewContext.RouteData.Values;
var linkMatchesRoute = routeValues.ContainsKey(action) && routeValues.ContainsKey(controller) &&
actionName.Equals(routeValues[action]) && controllerName.Equals(routeValues[controller]);
return htmlHelper.ActionLink(linkText, actionName, controllerName, null, linkMatchesRoute ? new { @class = selected } : null);
}
La discusión de esta cuestión podría ayudar con su decisión http://stackoverflow.com/questions/2964520/how-would-you-show-which-tab-is-selected-on-a-website- built-from-a-template –