How can i highlight the current page on menu when using OutputCache with ASP.Net MVC 2 ?

Question

Hi,

I have a menu which is created from the database. When the users navigate through pages the current page is highlighted with the css class.

Menu is rendered with the Html.RenderAction("Menu","Home");

Because of being datadriven menu i use the new ChildActionCache attribute which is in the ASP.NET MVC 2 Futures project to cache the menu.

This is where the problem starts, because of displaying the menu from cache "highlight current page" doesn't work anymore.

How can i fix this ?

Thanks in advance

Answer 1

The primary way to fix it is to stop caching the menu. :-P

Alternatively, don't indicate the current page from the server, but do it instead with some jQuery goodness on the client-side; that way the server can still cache the menu, and the client would change the appearance of the link on the menu to the current page.

Of course, that second solution would not work on browsers without JS enabled, but IMO that's a fair trade off.

Answer 2

I came up with this solution yesterday.

$("#nav-side,#nav-footer").find("a[href='" + window.location.pathname + "']").each(function () {
        $(this).addClass("current");
});