Shaun Xu

The Sheep-Pen of the Shaun


News

logo

Shaun, the author of this blog is a semi-geek, clumsy developer, passionate speaker and incapable architect with about 10 years’ experience in .NET and JavaScript. He hopes to prove that software development is art rather than manufacturing. He's into cloud computing platform and technologies (Windows Azure, Amazon and Aliyun) and right now, Shaun is being attracted by JavaScript (Angular.js and Node.js) and he likes it.

Shaun is working at Worktile Inc. as the chief architect for overall design and develop worktile, a web-based collaboration and task management tool, and lesschat, a real-time communication aggregation tool.

MVP

My Stats

  • Posts - 122
  • Comments - 574
  • Trackbacks - 0

Tag Cloud


Recent Comments


Recent Posts


Article Categories


Archives


Post Categories


Image Galleries


.NET


 

I just found a free 96 pages ebook available from Eric Nelson about the windows azure platform. Looked through it very quickly and I thought it would be a very good book to learn the overall of Windows Azure, SQL Azure and the software archtecture which will be deployed on Azure. You can download it here.

azure 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.

 

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.

image When the home page was shown the Home menu was highlighted since at this moment it was controller = Home and action = Index.

image

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.

image

 

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.


 

The Windows Azure team had just announced the release of the latest version of its tools and SDK (v1.2) at the TechED 2010 New Orleans. You can download it here.

The biggest new feature/improvement of this version of the SDK would be Visual Studio 2010 RTM and .NET 4.0 support. It gives us the facilities to build our azure-based applications on top of .NET 3.5 and 4.0 as well. So the guys who is working on, like me, or is going to be working on .NET 4 would better to have this SDK installed I think.

Also there are some other information about the envolution of the Windows Azure at this TechED session you can find here.

 

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.