Question

我正在尝试找到一个解决方案（不使用javascript）来解决这个问题：

我有一个母版页，其中包含导航菜单。该菜单中的每个项目都是一个动作。

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

我可以为基本视图模型添加一个动作名称（从中获取所有其他视图模型）但是想知道是否有更好的方法。

（我已经可以看到，当这是MVC时会出现一些复杂性。对于给定的操作，可以返回任意数量的不同视图，因此所有这些视图都需要在导航菜单中突出显示相同的操作。行）。

思想？

P.S。我刚刚注意到stackoverflow与上面菜单上的橙色突出显示类似。我看到他们正在用“你在哪里”这个班级进行标记。他们采取了什么方法我不知道......

Answer 1

我做的是这样的：我创建了自己的助手RenderMenuLink，因此不是调用

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

我调用

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

反过来添加一个链接，如果用户正在访问此链接 [1]，则“selected”类将附加到列表项的“class”属性。

[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);
        }
    }

Answer 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>

Answer 3

当用户选择该动作时转到那个我要强调的观点导航菜单中的该项指示向用户提供他们目前的状态观看。

您可以使用html辅助方法生成菜单，在生成菜单时，您可以在相对于当前操作的菜单项中添加一个类。

可以使用参数或使用here描述的一些方法来完成。

但是我认为最有效的方法是使用javascript，而第二个最好的选择就是markt写的。

Answer 4

我建议你从mvc设计图库中获取“Orange tabs”模板并查看它。

如何将操作名称注入母版页以突出显示导航菜单中的当前操作？

4 个答案: