When I was working on
the TalentOn project (Promotion in MSDN Chinese) I was asked to implement a functionality that makes
the top menu items highlighted when
the currently viewing page was in that section. This might be a common scenario in
the web application development I think. Simple Example When thinking about
the solution of
the highlighted menu items
the biggest problem would be how to define
the sections (menu item) and
the pages it belongs to rather than making
the menu highlighted. With
the ASP.NET MVC framework we can use
the controller – action infrastructure for us to achieve it. Each controllers would have a related menu item on
the master page normally.
The menu item would be highlighted if any of
the views under this controller are being shown. Some specific menu items would be highlighted of that action was invoked, for example
the home page,
the about page, etc.
The check rule can be specified on-demand. For example I can define
the action LogOn and Register of Account controller should make
the Account menu item highlighted while
the ChangePassword should make
the Profile menu item highlighted. I’m going to use
the HtmlHelper to render
the highlight-able menu item.
The key point is that I need to pass
the predication to check whether
the current view belongs to this menu item which means this menu item should be highlighted or not. Hence I need a delegate as its parameter.
The simplest code would be like this. 1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Mvc;
6: using System.Web.Mvc.Html;
7:
8: namespace ShaunXu.Blogs.HighlighMenuItem
9: {
10: public static class HighlightMenuItemHelper
11: {
12: public static MvcHtmlString HighlightMenuItem(this HtmlHelper helper,
13: string text, string controllerName, string actionName, object routeData, object htmlAttributes,
14: string highlightText, object highlightHtmlAttributes,
15: Func<HtmlHelper, bool> highlightPredicate)
16: {
17: var shouldHighlight = highlightPredicate.Invoke(helper);
18: if (shouldHighlight)
19: {
20: return helper.ActionLink(string.IsNullOrWhiteSpace(highlightText) ? text : highlightText,
21: actionName, controllerName, routeData, highlightHtmlAttributes == null ? htmlAttributes : highlightHtmlAttributes);
22: }
23: else
24: {
25: return helper.ActionLink(text, actionName, controllerName, routeData, htmlAttributes);
26: }
27: }
28: }
29: }
There are 3 groups of
the parameters:
the first group would be
the same as
the in-build ActionLink method parameters. It has
the link text, controller name and action name, etc passed in so that I can render a valid linkage for
the menu item.
The second group would be more focus on
the highlight link text and Html attributes. I will use them to render
the highlight menu item.
The third group, which contains one parameter, would be a predicate that tells me whether this menu item should be highlighted or not based on
the user’s definition.
And then I changed my master page of
the sample MVC application. I let
the Home and About menu highlighted only when
the Index and About action are invoked. And I added a new menu named Account which should be highlighted for all actions/views under its Account controller. So my master would be like this.
1: <div id="menucontainer">
2:
3: <ul id="menu">
4: <li><% 1: : Html.HighlightMenuItem( 2: "Home", "Home", "Index", null, null, 3: "[Home]", null, 4: helper => helper.ViewContext.RouteData.Values["controller"].ToString() == "Home" 5: && helper.ViewContext.RouteData.Values["action"].ToString() == "Index")%></li>
5:
6: <li><% 1: : Html.HighlightMenuItem( 2: "About", "Home", "About", null, null, 3: "[About]", null, 4: helper => helper.ViewContext.RouteData.Values["controller"].ToString() == "Home" 5: && helper.ViewContext.RouteData.Values["action"].ToString() == "About")%></li>
7:
8: <li><% 1: : Html.HighlightMenuItem( 2: "Account", "Account", "LogOn", null, null, 3: "[Account]", null, 4: helper => helper.ViewContext.RouteData.Values["controller"].ToString() == "Account")%></li>
9:
10: </ul>
11:
12: </div>
Note: You need to add
the import section for
the namespace “ShaunXu.Blogs.HighlighMenuItem” to make
the extension method I created below available.
So let’s see
the result.
When
the home page was shown
the Home menu was highlighted since at this moment it was controller = Home and action = Index.
And if I clicked
the About menu you can see it turned highlighted as now
the action was About.
And if I navigated to
the register page
the Account menu was highlighted since it should be like that when any actions under
the Account controller was invoked.
Fluently Language
Till now it’s a fully example for
the highlight menu item but not perfect yet. Since
the most common scenario would be: highlighted when
the action invoked, or highlighted when any action was invoked under this controller, we can created 2 shortcut method so for them so that normally
the developer will be no need to specify
the delegation.
Another place we can improve would be, to make
the method more user-friendly, or I should say developer-friendly. As you can see when we want to add a highlight menu item we need to specify 8 parameters and we need to remember what they mean. In fact we can make
the method more “fluently” so that
the developer can have
the hints when using it by
the Visual Studio IntelliSense. Below is
the full code for it.
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Web;
5: using System.Web.Mvc;
6: using System.Web.Mvc.Html;
7:
8: namespace Ethos.Xrm.HR
9: {
10: #region Helper
11:
12: public static class HighlightActionMenuHelper
13: {
14: public static IHighlightActionMenuProviderAfterCreated HighlightActionMenu(this HtmlHelper helper)
15: {
16: return new HighlightActionMenuProvider(helper);
17: }
18: }
19:
20: #endregion
21:
22: #region Interfaces
23:
24: public interface IHighlightActionMenuProviderAfterCreated
25: {
26: IHighlightActionMenuProviderAfterOn On(string actionName, string controllerName);
27: }
28:
29: public interface IHighlightActionMenuProviderAfterOn
30: {
31: IHighlightActionMenuProviderAfterWith With(string text, object routeData, object htmlAttributes);
32: }
33:
34: public interface IHighlightActionMenuProviderAfterWith
35: {
36: IHighlightActionMenuProviderAfterHighlightWhen HighlightWhen(Func<HtmlHelper, bool> predicate);
37: IHighlightActionMenuProviderAfterHighlightWhen HighlightWhenControllerMatch();
38: IHighlightActionMenuProviderAfterHighlightWhen HighlightWhenControllerAndActionMatch();
39: }
40:
41: public interface IHighlightActionMenuProviderAfterHighlightWhen
42: {
43: IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(object highlightHtmlAttributes, string highlightText);
44: IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(object highlightHtmlAttributes);
45: IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(string cssClass, string highlightText);
46: IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(string cssClass);
47: }
48:
49: public interface IHighlightActionMenuProviderAfterApplyHighlightStyle
50: {
51: MvcHtmlString ToActionLink();
52: }
53:
54: #endregion
55:
56: public class HighlightActionMenuProvider :
57: IHighlightActionMenuProviderAfterCreated,
58: IHighlightActionMenuProviderAfterOn, IHighlightActionMenuProviderAfterWith,
59: IHighlightActionMenuProviderAfterHighlightWhen, IHighlightActionMenuProviderAfterApplyHighlightStyle
60: {
61: private HtmlHelper _helper;
62:
63: private string _controllerName;
64: private string _actionName;
65: private string _text;
66: private object _routeData;
67: private object _htmlAttributes;
68:
69: private Func<HtmlHelper, bool> _highlightPredicate;
70:
71: private string _highlightText;
72: private object _highlightHtmlAttributes;
73:
74: public HighlightActionMenuProvider(HtmlHelper helper)
75: {
76: _helper = helper;
77: }
78:
79: public IHighlightActionMenuProviderAfterOn On(string actionName, string controllerName)
80: {
81: _actionName = actionName;
82: _controllerName = controllerName;
83: return this;
84: }
85:
86: public IHighlightActionMenuProviderAfterWith With(string text, object routeData, object htmlAttributes)
87: {
88: _text = text;
89: _routeData = routeData;
90: _htmlAttributes = htmlAttributes;
91: return this;
92: }
93:
94: public IHighlightActionMenuProviderAfterHighlightWhen HighlightWhen(Func<HtmlHelper, bool> predicate)
95: {
96: _highlightPredicate = predicate;
97: return this;
98: }
99:
100: public IHighlightActionMenuProviderAfterHighlightWhen HighlightWhenControllerMatch()
101: {
102: return HighlightWhen((helper) =>
103: {
104: return helper.ViewContext.RouteData.Values["controller"].ToString().ToLower() == _controllerName.ToLower();
105: });
106: }
107:
108: public IHighlightActionMenuProviderAfterHighlightWhen HighlightWhenControllerAndActionMatch()
109: {
110: return HighlightWhen((helper) =>
111: {
112: return helper.ViewContext.RouteData.Values["controller"].ToString().ToLower() == _controllerName.ToLower() &&
113: helper.ViewContext.RouteData.Values["action"].ToString().ToLower() == _actionName.ToLower();
114: });
115: }
116:
117: public IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(object highlightHtmlAttributes, string highlightText)
118: {
119: _highlightText = highlightText;
120: _highlightHtmlAttributes = highlightHtmlAttributes;
121: return this;
122: }
123:
124: public IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(object highlightHtmlAttributes)
125: {
126: return ApplyHighlighStyle(highlightHtmlAttributes, _text);
127: }
128:
129: public IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(string cssClass, string highlightText)
130: {
131: return ApplyHighlighStyle(new { @class = cssClass }, highlightText);
132: }
133:
134: public IHighlightActionMenuProviderAfterApplyHighlightStyle ApplyHighlighStyle(string cssClass)
135: {
136: return ApplyHighlighStyle(new { @class = cssClass }, _text);
137: }
138:
139: public MvcHtmlString ToActionLink()
140: {
141: if (_highlightPredicate.Invoke(_helper))
142: {
143: // should be highlight
144: return _helper.ActionLink(_highlightText, _actionName, _controllerName, _routeData, _highlightHtmlAttributes);
145: }
146: else
147: {
148: // should not be highlight
149: return _helper.ActionLink(_text, _actionName, _controllerName, _routeData, _htmlAttributes);
150: }
151: }
152: }
153: }
So in
the master page when I need
the highlight menu item I can “tell”
the helper how it should be, just like this.
1: <li>
2: <% 1: : Html.HighlightActionMenu() 2: .On("Index", "Home") 3: .With(SiteMasterStrings.Home, null, null) 4: .HighlightWhenControllerMatch() 5: .ApplyHighlighStyle(new { style = "background:url(../../Content/Images/topmenu_bg.gif) repeat-x;text-decoration:none;color:#feffff;" }) 6: .ToActionLink() %>
3: </li>
While I’m typing
the code
the IntelliSense will advise me that I need a highlight action menu, on
the Index action of
the Home controller, with
the “Home” as its link text and no need
the additional route data and Html attributes, and it should be highlighted when
the controller was “Home”, and if it’s highlighted
the style should be like this and finally render it to me.
This is something we call “Fluently Language”. If you had been using Moq you will see that’s very development-friendly, document-ly and easy to read.
Summary
In this post I demonstrated how to implement a highlight menu item in ASP.NET MVC by using its controller – action infrastructure. We can see
the ASP.NET MVC helps us to organize our web application better. And then I also told a little bit more on
the “Fluently Language” and showed how it will make our code better and easy to be used.
Hope this helps,
Shaun
All documents and related graphics, codes are provided "AS IS" without warranty of any kind.
Copyright © Shaun Ziyan Xu. This work is licensed under
the Creative Commons License.
