asp.net mvc y css: Tener la pestaña del menú permaneciendo resaltada en la selección

Question

¿Hay una manera mejor de hacer esto?

Tengo un método de extensión de ayuda HTML que comprueba si el menú de la pestaña actual es el seleccionado y luego elige la clase .selected css o no. Pongo el enlace html.IsSelected en cada li como

<li class="<%=Html.IsSelected(string a, string b)%>" > 

donde a es el nombre de la ficha y B se asigna ViewData.

¿Está limpio o hay una manera mejor?

Answer 1

Si puede vivir con una solución javascript, mire cómo funciona el complemento jQuery UI Accordion. Esencialmente, puede elegir la pestaña resaltada basada en el controlador examinando la url de solicitud cuando se carga la página.

Como 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). Luego puede usar:

<li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" /> 
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" /> 

En su controlador, debe configurar los valores adecuados para las variables ViewData.

ViewBag.HomeTabClass = "tab activeTab"; 
ViewBag.OtherTabClass = "tab"; 

Answer 2

También puede echar un vistazo a una sugerencia anterior:

An easy way to set the active tab using controllers and a user control in ASP.NET MVC?

Answer 3

Este enfoque que estoy usando en uno de mis proyectos y está trabajando muy 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.

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

Answer 4

He tratado de conseguir que esto funcione 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 si eso lo está afectando.