Css 如何在ASP.NET MVC中直观地显示当前页面？

作为讨论的基础。创建标准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", "About", "Home", new {class="current"})%></li>

当然，在主页上：

<%= Html.ActionLink("Home", "Index", "Home", new {class="current"})%></li>

（CSS样式名称为当前，在菜单中直观地指示这是当前页面。）

我可以将母版页中的menu div拆分为内容占位符，但这意味着我必须将菜单放在每一页上

---

有什么好办法吗？

可能只是因为它是第5个参数，所以在html属性之前插入一个null。这篇文章就是这样描述的，虽然你可以在第四个论点中传递一些东西，但第五个论点是专门针对HTMLattributes的。最简单的方法是从ViewContext的RoutedData中获取当前控制器和操作。注意签名的变化，并使用@来转义关键字

<% 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", "About", "Home", null,
                     new { @class = page == "home:about" ? "current" : "" ) %>
<%= Html.ActionLink( "Home", "Index", "Home", null,
                     new { @class = page == "home:index" ? "current" : "" ) %>

---

我最近为此创建了一个HTML帮助程序，如下所示：

public static string NavigationLink(this HtmlHelper helper, string path, string text)
{
    string cssClass = String.Empty;
    if (HttpContext.Current.Request.Path.IndexOf(path) != -1)
    {
        cssClass = "class = 'selected'";
    }

    return String.Format(@"<li><a href='{0}' {1}>{2}</a></li>", path, cssClass, text);
}

publicstaticstringnavigationlink（此HtmlHelper帮助程序、字符串路径、字符串文本）
{
string cssClass=string.Empty；
if（HttpContext.Current.Request.Path.IndexOf（Path）！=-1）
{
cssClass=“class=”所选“；
}
返回String.Format（@“
”，路径，cssClass，文本）；
}

实现如下所示：

  <ul id="Navigation">
  <%=Html.NavigationLink("/Path1", "Text1")%>
  <%=Html.NavigationLink("/Path2", "Text2")%>
  <%=Html.NavigationLink("/Path3", "Text3")%>
  <%=Html.NavigationLink("/Path4", "Text4")%>
  </ul>

如果您使用的是T4MVC，您可以使用：

        public static HtmlString MenuLink(
        this HtmlHelper helper,
        string text,
        IT4MVCActionResult action,
        object htmlAttributes = null)
    {
        var currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
        var currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";

        var attributes = new RouteValueDictionary(htmlAttributes);
        var cssClass = (attributes.ContainsKey("class"))
                           ? attributes["class"] + " "
                           : string.Empty;

        string selectedClass;
        if(action.Controller.Equals(currentController, StringComparison.InvariantCultureIgnoreCase)
        {
            selectedClass = "selected-parent";
            if(action.Action.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase))
                selectedClass = "selected";
        }
        cssClass += selectedClass;

        attributes["class"] = cssClass;

        return helper.ActionLink(text, (ActionResult)action, attributes);
    }

$（文档）.ready（函数（）{
@if（Request.Url.AbsolutePath.ToLower（）=“/”）
{
@Html.Raw（$（'.navbar nav li'）.eq（0.attr（'class'，'active'）；）
}
@if（Request.Url.AbsolutePath.ToLower（）包含（“详细信息”））
{
@Html.Raw（$（'.navbar nav li'）.eq（1.attr（'class'，'active'）；）
}
@if（Request.Url.AbsolutePath.ToLower（）包含（“计划”））
{
@Html.Raw（$（'.navbar nav li'）.eq（2.attr（'class'，'active'）；）
}
});

---

用5分钟的时间把它组合起来，我可能会对它进行重构，但应该给你一个基本的想法，它可能对较小的站点最有用。

不是一个好的解决方案。视图不应了解控制器和操作。要显示的数据应该只由模型提供。这只是获取URL的捷径——您可以使用请求的URL执行相同的操作，但随后必须对其进行解析。我很满意这个机制没有破坏模式。语法正确吗？我得到“无法将[]索引应用于'System.Web.Routing.RoutedData'类型的表达式”我忘记了您实际上需要查看RoutedData对象上的值集合。修正了，很抱歉我是个讨厌的新手。。。但这将使下面的html成为一个标记：我对此有一些问题。首先，它不处理字符串大小写，如果您在url中提供不同的大小写，它将断开（请记住，用户可以直接键入这些大小写）。其次，考虑到对静态HttpContext.Current的依赖，单元测试将很难进行。第三，如果您选择了多个级别的操作/菜单，“顶部”级别将与所有子级别匹配，则会出现故障。当然，我的解决方案也有第三个问题，但由于它不依赖于字符串匹配，因此修改它以适应多个级别会更容易一些……我非常喜欢，并且借用了这个想法——谢谢——将其作为一个扩展方法以使视图代码更整洁的想法。感谢您的反馈！我在这方面还是个新手，一直在寻找改进代码的方法。

  <ul id="Navigation">
  <%=Html.NavigationLink("/Path1", "Text1")%>
  <%=Html.NavigationLink("/Path2", "Text2")%>
  <%=Html.NavigationLink("/Path3", "Text3")%>
  <%=Html.NavigationLink("/Path4", "Text4")%>
  </ul>

        public static HtmlString MenuLink(
        this HtmlHelper helper,
        string text,
        IT4MVCActionResult action,
        object htmlAttributes = null)
    {
        var currentController = helper.ViewContext.RouteData.Values["controller"] as string ?? "home";
        var currentAction = helper.ViewContext.RouteData.Values["action"] as string ?? "index";

        var attributes = new RouteValueDictionary(htmlAttributes);
        var cssClass = (attributes.ContainsKey("class"))
                           ? attributes["class"] + " "
                           : string.Empty;

        string selectedClass;
        if(action.Controller.Equals(currentController, StringComparison.InvariantCultureIgnoreCase)
        {
            selectedClass = "selected-parent";
            if(action.Action.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase))
                selectedClass = "selected";
        }
        cssClass += selectedClass;

        attributes["class"] = cssClass;

        return helper.ActionLink(text, (ActionResult)action, attributes);
    }

<script type="javascript/text">
$( document ).ready( function() {

        @if (Request.Url.AbsolutePath.ToLower() == "/") 
        {
            @Html.Raw("$('.navbar-nav li').eq(0).attr('class','active');")
        }

        @if (Request.Url.AbsolutePath.ToLower().Contains("details")) 
        {
            @Html.Raw("$('.navbar-nav li').eq(1).attr('class','active');")
        }

        @if (Request.Url.AbsolutePath.ToLower().Contains("schedule")) 
        {
            @Html.Raw("$('.navbar-nav li').eq(2).attr('class','active');")
        }

    });
</script>