作为讨论的基础。创建一个标准的ASP.NET MVC Web项目。
它将在母版页中包含两个菜单项:
<div id="menucontainer"> <ul id="menu"> <li> <%= Html.ActionLink("Home","Index","Home")%></li> <li> <%= Html.ActionLink("About","About","Home")%></li> </ul> </div>
如何设置指示当前页面的可视化CSS样式。
例如,在“关于”页面/控制器中,我本来希望这样做:
<%= Html.ActionLink("About","Home",new {class="current"})%></li>
当然,当在主页上:
<%= Html.ActionLink("Home",new {class="current"})%></li>
我可以将菜单div从主页面分解为内容占位符,但这意味着我必须将菜单放在每个页面上。
任何想法,是否有一个很好的解决方案?
解决方法
最简单的方法是从ViewContext的RouteData获取当前的控制器和操作。注意@的签名和使用的变化来转义关键字。
<% var controller = ViewContext.RouteData.Values["controller"] as string ?? "Home"; var action = ViewContext.RouteData.Values["action"] as string ?? "Index"; var page = (controller + ":" + action).ToLower(); %> <%= Html.ActionLink( "About",null,new { @class = page == "home:about" ? "current" : "" ) %> <%= Html.ActionLink( "Home",new { @class = page == "home:index" ? "current" : "" ) %>
请注意,您可以将这个HtmlHelper扩展名(如@ Jon)组合起来,使其更干净。
<%= Html.MenuLink( "About","current" ) %>
MenuActionLink在哪里
public static class MenuHelperExtensions { public static string MenuLink( this HtmlHelper helper,string text,string action,string controller,object routeValues,object htmlAttributes,string currentClass ) { RouteValueDictionary attributes = new RouteValueDictionary( htmlAttributes ); string currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home"; string currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index"; string page = string.Format( "{0}:{1}",currentController,currentAction ).ToLower(); string thisPage = string.Format( "{0}:{1}",controller,action ).ToLower(); attributes["class"] = (page == thisPage) ? currentClass : ""; return helper.ActionLink( text,action,new RouteValueDictionary( routeValues ),attributes ); } }