Wie erstelle ich eine Navigation mit Registerkarten, wobei die Registerkarte "Aktuell" auf der Benutzeroberfläche hervorgehoben ist?Eine einfache Möglichkeit zum Festlegen der aktiven Registerkarte mit Controllern und einer Benutzersteuerung in ASP.NET MVC?
Vor MVC habe ich mir den Dateipfad angeschaut und herausgefunden, welcher Tab gerade läuft. Jetzt ist es viel einfacher, Sie können die aktuelle Registerkarte basierend auf dem aktuellen Controller zuweisen.
Check it out ...
Die meiste Arbeit geschieht in der Usercontrol.
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 "";
}
}
Dann in Ihrem .ascx Teil des usercontol Anruf in die setClass Methode, um die Verbindung gegen die dict zu überprüfen. Wie so:
<li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li>
Alles, was Sie jetzt brauchen, ist das CSS, um Ihre aktuelle Registerkarte hervorzuheben. Es gibt eine Reihe von verschiedenen Möglichkeiten, dies zu tun, aber man kann hier mit ein paar Ideen loszulegen: http://webdeveloper.econsultant.com/css-menus-navigation-tabs/ Oh, und vergessen Sie nicht die Usercontrol auf Ihrer Seite (oder Masterpage) zu setzen ...
<% Html.RenderPartial("AdminNavigation"); %>
Funktioniert IDictionary? Es sieht so aus, als sollte es stattdessen Wörterbuch sein. –
Was ist, wenn ein Controller zwei Aktionen hat? –
@Anthony - dieser Code funktioniert, er ist jetzt in Produktion. @ Anthony2 - Sie meinen, Sie möchten eine andere Registerkarte pro Controller Aktion hervorgehoben? Das wird nicht helfen. Ich würde vorschlagen, Ihr Controller-spezifisches Nav in ein Benutzersteuerelement zu setzen und zu deklarieren, welche Registerkarte aktiviert werden soll, wenn das UC in die Seite eingebettet wird. –
Eine Methode, die ich in einem aktuellen Projekt verwende - dies hilft auch bei anderen seitenspezifischen CSS-Anforderungen.
Zuerst wird ein HTML-Helfer, der eine Zeichenfolge, die den aktuellen Controller und die Aktion repräsentiert zurückgibt:
public static string BodyClass(RouteData data) {
return string.Format("{0}-{1}", data.Values["Controller"], data.Values["Action"]).ToLower();
}
Dann fügen Sie einen Anruf an diese Helfer in der Masterseite:
<body class="<%=AppHelper.BodyClass(ViewContext.RouteData) %>">
...
</body>
Jetzt, Sie können bestimmte Seiten mit Ihrem CSS ausrichten. Um Ihre genaue Frage über die Navigation zu beantworten:
#primaryNavigation a { ... }
.home-index #primaryNavigation a#home { ... }
.home-about #primaryNavigation a#about { ... }
.home-contact #primaryNavigation a#contact { ... }
/* etc. */
Ich schrieb einige einfache Hilfsklassen, um dieses Problem zu lösen. Die Lösung sieht sowohl den Controller vor, der verwendet wird, als auch welche Aktion in der Steuerung.
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;
}
Sie können das Gespräch diese Erweiterungsmethode mit:
Html.ActiveTab("Home", new string[] {"Index", "Home"}, "active")
Dies wird wieder „aktiv“, wenn wir auf dem Homecontroller in entweder der „Index“ oder „Home“ Aktion. Ich fügte auch einige zusätzliche Überbelastungen zu ActiveTab hinzu, um es einfacher zu machen, Sie können den ganzen Blogbeitrag lesen auf: http://www.tomasjansson.com/blog/2010/05/asp-net-mvc-helper-for-active-tab-in-tab-menu/
Hoffe, dass dies jemandem helfen wird.
Grüße, --Tomas
MVC-Standard Site.css kommt mit einer Klasse mit dem Namen 'selectedLink', die dafür verwendet werden soll.
folgendes auf Ihre ul Liste in _Layout.cshtml hinzufügen:
@{
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>
Ich weiß, das ist nicht sauber. Aber nur ein schneller und schmutziger Weg, Dinge in Gang zu bringen, ohne mit Teilansichten oder dergleichen zu verwirren.
Bitte formulieren Sie diese zuerst in Form einer Frage und geben Sie die Antwort dann als separaten Beitrag an. Ich werde meinen Downvote entfernen, wenn ich sehe, dass Sie ihn behoben haben. Ansonsten muss ich es als "keine echte Frage" schließen. –
Problem für ihn behoben. – FlySwat
Die Frage war so groß und jetzt so klein: P haha –