vistas - ¿Una manera fácil de configurar la pestaña activa usando controladores y un control de usuario en ASP.NET MVC?
multiples vistas en la misma pagina mvc (4)
Antes de MVC, miré la ruta del archivo y descubrí qué pestaña era actual. Ahora es mucho más fácil, puede asignar la pestaña actual basada en el controlador actual.
Echale un vistazo ...
La mayor parte del trabajo ocurre en el control de usuario.
public partial class AdminNavigation : ViewUserControl
{
/// <summary>
/// This hold a collection of controllers and their respective "tabs." Each Tab should have at least one controller in the collection.
/// </summary>
private readonly IDictionary<Type, string> dict = new Dictionary<Type, string>();
public AdminNavigation()
{
dict.Add(typeof(BrandController), "catalog");
dict.Add(typeof(CatalogController), "catalog");
dict.Add(typeof(GroupController), "catalog");
dict.Add(typeof(ItemController), "catalog");
dict.Add(typeof(ConfigurationController), "configuration");
dict.Add(typeof(CustomerController), "customer");
dict.Add(typeof(DashboardController), "dashboard");
dict.Add(typeof(OrderController), "order");
dict.Add(typeof(WebsiteController), "website");
}
protected string SetClass(string linkToCheck)
{
Type controller = ViewContext.Controller.GetType();
// We need to determine if the linkToCheck is equal to the current controller using dict as a Map
string dictValue;
dict.TryGetValue(controller, out dictValue);
if (dictValue == linkToCheck)
{
return "current";
}
return "";
}
}
Luego, en su parte .ascx de la llamada usercontol en el método SetClass para verificar el enlace contra el dict. Al igual que:
<li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li>
Todo lo que necesita ahora es el CSS para resaltar su pestaña actual. Hay varias maneras diferentes de hacerlo, pero puede comenzar con algunas ideas aquí: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ Ah, y no se olvide de poner el control de usuario en su página (o MasterPage) ...
<% Html.RenderPartial("AdminNavigation"); %>
¿Cómo creo una navegación con pestañas con la pestaña "Actual" resaltada en la IU?
Un método que estoy usando en un proyecto actual: esto también ayuda a otras necesidades de CSS específicas de la página.
En primer lugar, un helper HTML que devuelve una cadena que representa el controlador y la acción actuales:
public static string BodyClass(RouteData data) {
return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}
Luego, agrega una llamada a este ayudante en tu página maestra:
<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>
Ahora, puede orientar páginas específicas con su CSS. Para responder a su pregunta exacta sobre la navegación:
#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */
Escribí algunas clases simples de ayuda para resolver este problema. La solución se ve tanto en el controlador que se usa como en la acción del controlador.
public static string ActiveTab(this HtmlHelper helper, string activeController, string[] activeActions, string cssClass)
{
string currentAction = helper.ViewContext.Controller.
ValueProvider.GetValue("action").RawValue.ToString();
string currentController = helper.ViewContext.Controller.
ValueProvider.GetValue("controller").RawValue.ToString();
string cssClassToUse = currentController == activeController &&
activeActions.Contains(currentAction)
? cssClass
: string.Empty;
return cssClassToUse;
}
Puede llamar a este método de extensión con:
Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")
Esto devolverá "activo" si estamos en el HomeController en la acción "Índice" o "Inicio". También agregué algunas sobrecargas adicionales a ActiveTab para que sea más fácil de usar, puedes leer la publicación completa del blog en: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for- active-tab-in-tab-menu /
Espero que esto ayude a alguien.
Saludos, --Tomas
El Site.css predeterminado de Site.css viene con una clase llamada ''selectedLink'' que se debe usar para esto.
Agregue lo siguiente a su lista ul en _Layout.cshtml :
@{
var controller = @HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString();
}
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = controller == "Home" ? "selectedLink" : "" })</li>
...
</ul>
Sé que esto no está limpio. Pero solo una forma rápida y sucia de hacer que las cosas funcionen sin interferir con vistas parciales o algo por el estilo.