Templates also provide the default tab menus (“Home” and “About”) and pretty nice CSS styles. If you look at the “Site.css” file, you can find the “ul#menu li.selected a” section, which styles the selected menu item. But the application template does not set the “selected” class to the selected menu item.
In this post, I will show you how to do this using the custom “Html Helper” method.
1. _Layout.cshtml
Menu items are defined in the layout file.
1
2
3
4
5
6
| <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul></nav> |
2. Site.css
The default style of the selected menu is like this:
1
2
3
4
| ul#menu li.selected a { background-color: #034af3; color: #e8eef4;} |
The style expects that the selected menu item has the “selected” class.
3. Creating Html Helper Method
- Create a “HtmlHelpers” folder in your project
- Create a static class
- Define a static method with the first parameter “this HtmlHelper helper“
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| using System;using System.Collections.Generic;using System.Web;using System.Web.Mvc;namespace MyWebApp.WebUI.HtmlHelpers{ public static class HtmlHelperExtensions { public static string ActivePage(this HtmlHelper helper, string controller, string action) { string classValue = ""; string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString(); string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString(); if (currentController == controller && currentAction == action) { classValue = "selected"; } return classValue; } }} |
4. Referring the Html Helper Method in a View
To refer to the helper method in a view, you need to include the namespace with the “using” statement
1
| @using MyWebApp.WebUI.HtmlHelpers |
Or you can modify the “Web.config” file in the “Views” folder. (Note that it is not the root config file.)
1
2
3
4
5
6
7
8
9
| <system.web.webPages.razor> <host ... /> <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> ... <add namespace="MyWebApp.WebUI.HtmlHelpers" /> </namespaces> </pages></system.web.webPages.razor> |
5. Modifying the View
Let’s change the menu.
1
2
3
4
5
6
| <nav> <ul id="menu"> <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li> <li class="@Html.ActivePage("Home", "About")">@Html.ActionLink("About", "About", "Home")</li> </ul></nav> |
If you want to add the “selected” class directly to the <a> element rather than <ul>element, you can do like this:
1
2
3
4
5
6
| <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = Html.ActivePage("Home", "Index") })</li> <li>@Html.ActionLink("About", "About", "Home", null, new { @class = Html.ActivePage("Home", "About") })</li> </ul></nav> |
