Soy un estudiante y bastante nuevo en ASP.NET MVC y vengo de ASP.NET Web Form. (Acostumbrado)
Tengo una lista:
<ul class="sidebar bg-grayDark"> <li class="active"> <a href="@Url.Action("Index", "Home")"> <span class="mif-home icon"></span> <span class="title">Home</span> </a> </li> <li class="bg-hover-black"> <a href="@Url.Action("Index", "Product")"> <span class="mif-shop icon"></span> <span class="title">Products</span> <span class="counter">14</span> </a> </li> <li class="bg-hover-black"> <a href="@Url.Action("Index", "Category")"> <span class="mif-flow-cascade icon"></span> <span class="title">Categories</span> <span class="counter">9</span> </a> </li> <li class="bg-hover-black"> <a href="@Url.Action("Index", "User")"> <span class="mif-users icon"></span> <span class="title">Users</span> <span class="counter">1</span> </a> </li> </ul>Mi objetivo: por qué vista se representa, quiero agregar "activo" a la en el que se ha hecho clic. Ejemplo: hago clic en "Categoría", luego Inicio pierde su clase activa y Categoría tiene "activo" agregado a su clase. (y lo contrario con "bg-hover-black" )
Pensé que podría hacerlo comprobando la vista realmente renderizada, pero no sé cómo hacerlo. (No sé cómo verificar la vista real representada, pero está bien usar Razor para verificar las condiciones)
Probé con JavaScript primero:
$(function () { $('.sidebar').on('click', 'li', function () { if (!$(this).hasClass('active')) { $('.sidebar li').removeClass('active'); $(this).addClass('active'); } }) })Pero no funciona porque cuando se carga la página, el html se vuelve a representar con "activo" para la parte de Inicio. (Si elimino "activo" para Inicio, nada estará activo al hacer clic, excepto entre el clic y la carga de la página).
¿Tienes alguna solución? Busqué mucho en la web pero no encontré nada que me ayudara.
Perdón por cualquier error en inglés, todavía lo estoy aprendiendo :).
Gracias,
Hellcat8.
Dado que está utilizando la convención en la que su página lleva el nombre del controlador, puede hacer esto en razor para obtener el nombre del controlador/página:
@{ var pageName = ViewContext.RouteData.Values["controller"].ToString(); } <ul class="sidebar bg-grayDark"> <li class="@(pageName == "Home" ? "active" : "")"> <a href="@Url.Action("Index", "Home")"> <span class="mif-home icon"></span> <span class="title">Home</span> </a> </li> <li class="bg-hover-black @(pageName == "Product" ? "active" : "")"> <a href="@Url.Action("Index", "Product")"> <span class="mif-shop icon"></span> <span class="title">Products</span> <span class="counter">14</span> </a> </li> <li class="bg-hover-black @(pageName == "Category" ? "active" : "")"> <a href="@Url.Action("Index", "Category")"> <span class="mif-flow-cascade icon"></span> <span class="title">Categories</span> <span class="counter">9</span> </a> </li> <li class="bg-hover-black @(pageName == "User" ? "active" : "")"> <a href="@Url.Action("Index", "User")"> <span class="mif-users icon"></span> <span class="title">Users</span> <span class="counter">1</span> </a> </li> </ul>Esto configurará su clase activa en el lado del servidor de la página, eliminando la necesidad de hacer este lado del cliente con javascript.
Este es mi enfoque para un submenú desplegable de Bootstrap en cascada, decorado con clases active en el archivo _layout.cshtml de un proyecto de Razor Pages.
Elementos principales de esta solución:
ViewContext.RouteData.Values["page"] .@Url.Action() .Código:
<ul class="nav navbar-nav"> @{ String pageRoute = ViewContext.RouteData.Values["page"].ToString(); } <li class="dropdown @( pageRoute.Contains("/CustomerModel/") ? "active" : "" )"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Customer-Model <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="@( pageRoute.Contains("/Customers/") ? "active" : "" )"><a asp-page="/CustomerModel/Customers/Index">Customers</a></li> <li class="@( pageRoute.Contains("/Partners/") ? "active" : "" )"><a asp-page="/CustomerModel/CustomerPermissions/Index">CustomerPermissions</a></li> </ul> </li> <li class="dropdown @( pageRoute.Contains("/StaffModel/") ? "active" : "" )"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Staff-Model <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="@( pageRoute.Contains("/Staff/") ? "active" : "" )"><a asp-page="/StaffModel/Staff/Index">Staff</a></li> <li class="@( pageRoute.Contains("/StaffGroups/") ? "active" : "" )"><a asp-page="/StaffModel/StaffGroups/Index">StaffGroups</a></li> <li class="@( pageRoute.Contains("/PermissionsGroups/") ? "active" : "" )"><a asp-page="/StaffModel/PermissionsGroups/Index">PermissionsGroups</a></li> <li class="@( pageRoute.Contains("/AllowedModules/") ? "active" : "" )"><a asp-page="/StaffModel/AllowedModules/Index">AllowedModules</a></li> <li class="@( pageRoute.Contains("/AllowedServices/") ? "active" : "" )"><a asp-page="/StaffModel/AllowedServices/Index">AllowedServices</a></li> </ul> </li> </ul>Para obtener el nombre de la acción activa o del controlador, use lo siguiente
var controllerName = ViewContext.RouteData.Values["controller"].ToString(); var actionName = ViewContext.RouteData.Values["action"].ToString();y luego puedes dar la clase para un li usando el siguiente código:
<li class="@(actionName == "HomePage" ? "active":"")"><a href="~/Account/HomePage">Home</a></li>o puede verificar ambos de la siguiente manera:
<li class="@(controllerName =="Account" && actionName == "HomePage" ? "active":"")"><a href="~/Account/HomePage">Home</a></li>