Integrate a general menu in my asp.net mvc solution - asp.net

Question

For my learning, I'm building a document management solution with ASP.NET MVC3. Below are pages I manage:
a search/result page (list of items)
a favorite page (list of items)
an edit page
a create page
I also have a Site.Master page where I show a treeview menu on the left side of the screen. So wherever the user is located in the website, the treeview menu is showing his location by underlining his location in the menu.
For building the treeview menu, I use the code below (cleaned for easy reading):
<ul id="treemenu1" class="treeview">
<li>Documents
<ul>
<%= Html.TreeviewMenu(TreeMenu.Create("Search", "Search", "Affaires", null))%>
<%= Html.TreeviewMenu(TreeMenu.Create("Favorite", "Favorite", "Affaires", null))%>
<%= Html.TreeviewMenu(TreeMenu.Create("New", "Create", "Affaires", null))%>
</ul>
</li>
</ul>
The problem is that I need to underline the active item in my menu. So if user is displaying the search page, my search menu entry must be underlined. How can I proceed? I was thinking about the integration of this information in the strongly typed viewmodel passed to each viewpage but it failed because each page is using a different viewmodel. I prefer not using a session variable because it is not a clean solution.
Any ideas?
A solution with a session variable: I save the "current menu item" in a session variable (from my controller). So, whenever the Site.Master page is reloaded, it recreate every treeview menu item. For each one, it checks if the item is equal to the session variable. If yes, the class "selected" is added to the item (css highlighted with blue).
I don't really like using session variables. Maybe there are more elegant solutions?

Answer 1

How about using a helper:
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string text,
string action,
string controller
)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}
li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
return MvcHtmlString.Create(li.ToString());
}
and then:
<ul>
<%= Html.MenuItem("Search", "Search", "Affaires") %>
<%= Html.MenuItem("Favorite", "Favorite", "Affaires") %>
<%= Html.MenuItem("New", "Create", "Affaires") %>
</ul>
which could yield the following if you navigate to /Affaires/Favorite:
<ul>
<li>Search</li>
<li class="active">Favorite</li>
<li>New</li>
</ul>

Answer 2

Well, there is one easy and effective solution: let each page signal whether it's the active page and set a css class with jQuery.
Assuming your rendered html looks like:
<ul id="treemenu1" class="treeview">
<li>Documents
<ul>
<li class="search"></li>
<li class="favorite"></li>
</ul>
</li>
</ul>
At the bottom of each page, do something like (this would sit on the search view):
<script type="text/javascript">
$(document).ready(function () {
// Set active nav
$('#treemenu1 li.search').addClass('selected');
});
</script>
UPDATE based on new info
A little cleaner than a session vraiable could be to use the ViewBag property from the controller.
public ActionResult Search(/*whatever*/)
{
// do things
// set the selevted view
ViewBag.SelectedMenuItem = "search";
return View();
}
Then in your master page you can check against <%: ViewBag.SelectedMenuItem %>
Note that SelectedMenuItem is a random name. The ViewBag property is of type dynamic so you can use any property name you like.