StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Before MVC I looked at the file path and figured out which tab was currrent. Now it's a lot easier, you can assign the current tab based on the current controller.</p> <p>Check it out ...</p> <p>Most of the work happens in the usercontrol. </p> <pre><code>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 ""; } } </code></pre> <p>Then in your .ascx part of the usercontol call into the SetClass method to check the link against the dict. Like so:</p> <pre><code><li class="<%= SetClass("customer") %>"><%= Html.ActionLink<CustomerController>(c=>c.Index(),"Customers",new{@class="nav_customers"}) %></li> </code></pre> <p>All you need now is the CSS to highlight your current tab. There are a bunch of different ways to do this, but you can get started with some ideas here: <a href="http://webdeveloper.econsultant.com/css-menus-navigation-tabs/" rel="noreferrer">http://webdeveloper.econsultant.com/css-menus-navigation-tabs/</a> Oh, and don't forget to put the usercontrol on your page (or MasterPage) ...</p> <pre><code><% Html.RenderPartial("AdminNavigation"); %> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload