2009-04-16 59 views
1

我试图找到一个解决方案(即不使用JavaScript)这个问题:如何将动作名称注入到主页面以突出显示导航菜单中的当前动作?

我有一个母版页包括导航菜单。该菜单中的每个项目都是一个操作。

当用户选择该动作并转到该视图时,我想在导航菜单中突出显示该项目以向用户指示他们当前正在查看的内容。

我可以添加一个动作名称到基本视图模型(派生所有我的其他视图模型),但不知道是否有更好的方法。我已经可以看到,当这是MVC时,有一些复杂性会蔓延,对于给定的动作,可以返回任意数量的不同视图,因此所有这些视图都需要在导航菜单中突出显示相同的动作。 好)。

想法?

P.S.我只注意到,stackoverflow与上面的菜单中的橙色突出显示有类似之处。我看到他们正在与“你在哪里”的班级打分。他们采取什么方法我想知道...

+0

“JavaScript的自由” 是指未经JavaScript的? – eKek0 2009-04-16 03:23:52

回答

2

您可以使用CSS来实现这一点。如果你知道你要突出项目的ID,添加一个CSS规则,你的看法......

#MenuId 
{ 
color: ...; 
etc... 
} 

澄清:
添加一个占位符在母版页的头部,然后添加一个样式部分动态在你看来...

在母版页:

<head id="Head1" runat="server"> 
<asp:ContentPlaceHolder ID="head" runat="server"> 

</asp:ContentPlaceHolder> 
</head> 

在查看

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<style type="text/css"> 
    #<%= Model.IdToHighlight %> 
    { 
     color:Blue;//or something 
    } 
</style> 
</asp:Content> 
+0

是的,我意识到效果将用CSS完成。问题是我需要在masterpage中设置一个类,具体取决于设置的操作。寻找一个优雅的方式... – Schneider 2009-04-16 03:14:22

+0

为什么它必须在主页面?将一个占位符添加到您的母版页并动态填充到视图中。这不是优雅的? – markt 2009-04-16 03:15:25

+0

您的澄清使我意识到您正在有效地提示我做了同样的事情(几分钟后)。 +1 – 2009-04-16 03:21:31

1

当用户选择了动作和 去这个观点我想强调 在导航菜单该项目,以指示 用户,他们目前有什么 观看。

你可以使用html helper方法生成你的菜单,当你生成它时,你可以添加一个类到相对于当前操作的菜单项。

它可以用一个参数完成,或者使用一些描述的方法here

我认为最有效的方法是使用javascript,而第二个最佳选项是markt写的。

1

我建议你从mvc设计库中获取“橙色标签”模板并检查出来。

4

我所做的是这样的: 我创建了自己的助手叫RenderMenuLink,所以不是调用

<li><%= Html.ActionLink("Home", "index", "home")%></li> 

我调用

<%= Html.RenderMenuLink("Home", "index", "home")%> 

这又增加了一个链接,以防用户正在访问此链接 [1]“选定”类被附加到列表项的“类”属性。

[1]:我通过嘲笑用户所在的URL是否与此链接生成的URL匹配来实现此功能。该代码粘贴如下:


public static class HtmlMenu 
    { 
     public static string RenderMenuLink(this HtmlHelper html, string title, string action, string controller) 
     { 
      UrlHelper url = new UrlHelper(html.ViewContext.RequestContext); 
      string link = url.Action(action, controller); 
      if(String.IsNullOrEmpty(link)) 
      { 
       throw new ArgumentException("No appropriate route found!"); 
      } 

      var cssClass = String.Empty; 
      var uriPath = html.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; 
      if((link != "/" && uriPath.StartsWith(link)) || (uriPath == link)) 
      { 
       cssClass = "selected"; 
      } 
      return String.Format("<li class=\"{0}\"><a href=\"{1}\">{2}</a></li>", cssClass, link, title); 
     } 
    }