.net - net - css mvc c#
asp.net mvc y css: tener la pestaña del menú permaneciendo resaltada en la selección (4)
Este enfoque lo uso en uno de mis proyectos y funciona bastante bien. Asigné en cada controlador ViewData ["Home"] = "activeTab" clase, y uso en la vista un valor predeterminado de cadena vacía, como se muestra a continuación. Esto activará la pestaña si se toma el valor de ese diccionario viewData. Es simple y muy limpio.
El controlador de tu casa se verá así:
ViewData["Home"] = "activeTab";
return View("Index");
}
La vista se verá así:
<li class="<%= ((string)ViewData["Home"] ?? "") %>"><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li class="<%= ((string)ViewData["About"] ?? "") %>"><%= Html.ActionLink("About", "About", "Home")%></li>
¿Hay una mejor manera de hacer esto?
Tengo un método de extensión de ayuda de HTML que comprueba si el menú de la pestaña actual es el seleccionado y luego elige la clase .selected css o no. Puse el enlace html.IsSelected en cada li como
<li class="<%=Html.IsSelected(string a, string b)%>" >
donde a es el nombre de la pestaña yb es ViewData asignado.
¿Está esto limpio o hay una mejor manera?
Intenté hacer que esto funcionara sin suerte.
¿Cómo es tu CSS? El mío está abajo.
.activeTab {background: #FFFFFF; color: # 000000; }
Estoy usando esto con la página maestra y no con la vista inicial, no estoy seguro de si eso lo está afectando.
Si puede vivir con una solución de javascript, mire cómo el complemento jQuery UI Accordion maneja esto. Esencialmente, puede elegir la pestaña resaltada basada en el controlador examinando la url de solicitud cuando se carga la página.
De forma alternativa, puede establecer un elemento ViewBag para cada pestaña que corresponda al valor de clase de la pestaña. Establezca el valor de la pestaña actual en la clase CSS activa y los demás en vaciar (o sus valores predeterminados). Entonces puedes usar:
<li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" />
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" />
En su controlador, entonces configuraría los valores adecuados para las variables ViewData.
ViewBag.HomeTabClass = "tab activeTab";
ViewBag.OtherTabClass = "tab";
También puedes echarle un vistazo a una sugerencia anterior: