【问题标题】:Asp.Net Mvc highlighting current page link technique?Asp.Net Mvc 突出显示当前页面链接技术?
【发布时间】:2011-04-08 07:13:54
【问题描述】:

我需要突出显示菜单中的活动链接。顺便说一句,我的菜单在母版页中。我正在寻找实现这一点的最佳方法?有任何想法吗?

【问题讨论】:

标签: asp.net asp.net-mvc


【解决方案1】:

最简单的解决方案:

1) 连接jQuery到@RenderBody()

2) 关于布局

...                        
<li class="nav-item">
    <a class="nav-link text-dark" id="navItemPortfolio" asp-area="" asp-controller="Home" asp-action="Portfolio">Portfolio</a>
</li>

...

3) 在你的页面上写类似的东西(视图)

<script>
    $(function () {
        $("#navItemPortfolio").addClass("active");
    });
</script>

【讨论】:

    【解决方案2】:

    在布局中尝试如下:

    @{
        string url = Request.RawUrl;
    }
    @switch (url)
    {
        case "/home/":                
             @Html.ActionLink("Home", "../home/", null, new { @style = "background:#00bff3;" })
             @Html.ActionLink("Members", "../home/MembersList/")
        break;
        case "/home/MembersList/":
             @Html.ActionLink("Home", "../home/")
             @Html.ActionLink("Members", "../home/MembersList/", null, new { @style = "background:#00bff3;" })
        break;
        default:
                @Html.ActionLink("Home", "../home/")
                @Html.ActionLink("Members", "../home/MembersList/")
        break;
    }
    

    【讨论】:

      【解决方案3】:

      我一直在使用这个解决方案 html部分

      <ul>
         @Html.ListItemAction("Home Page","Index","Home")
         @Html.ListItemAction("Manage","Index","Home")
      </ul>
      

      助手部分

       public static class ActiveLinkHelper
          { 
            public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName)
            {
              var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
              var currentActionName = (string)helper.ViewContext.RouteData.Values["action"];
              var sb = new StringBuilder();
              sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
                                                  currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)
                                                      ? " class=\"active\">" : ">"));
              var url = new UrlHelper(HttpContext.Current.Request.RequestContext);
              sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name);
              sb.Append("</li>");
              return new MvcHtmlString(sb.ToString());
         }
      }
      

      【讨论】:

        【解决方案4】:

        我使用这个解决方案:

        首先 - 将属性 data-menuPageId 添加到您的菜单链接

        <ul class="menu">
           <li data-menuPageId="home">
                    @(Html.Link<HomeController>(x => x.Index(), "Home"))
           </li>
           <li data-menuPageId="products">
                    @(Html.Link<ProductsController>(x => x.Index(), "Products"))
           </li>
        </li>
        

        下一步 - 将当前页面 ID 的隐藏字段添加到 Layout.cshtml

        <input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" />
        

        在主页或产品等页面上添加 ViewBag.Page 初始化

        @{
            ViewBag.Page = "products";
        }
        

        最后你应该从你的 Layout.cshtml 中引用这个 javascipt

        $(function() {
            var pageIdAttr = "data-menuPageId";
            var currentPage = $("#currentPageId").attr("value");
        
            var menu = $(".menu");
        
            $("a[" + pageIdAttr + "]").removeClass("selected");
            $("a[" + pageIdAttr + "=\"" + currentPage + "\"]", menu).addClass("selected");
        });
        

        【讨论】:

          【解决方案5】:

          我很确定你可以用纯 CSS 做到这一点。它涉及类选择器和使用 body 标签。我会在一周中的每一天都使用辅助方法。

          【讨论】:

            【解决方案6】:

            处理这个问题的最好方法是编写一个 HTML 助手。您可以使用RouteData.Values["action"] 获取当前正在执行的操作并与菜单名称进行比较,如果它们匹配,则应用将突出显示它的 CSS 类。

            public static MvcHtmlString MenuItem(
                this HtmlHelper htmlHelper, 
                string action, 
                string text
            )
            {
                var menu = new TagBuilder("div");
                var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"];
                if (string.Equals(
                        currentAction, 
                        action,
                        StringComparison.CurrentCultureIgnoreCase)
                )
                {
                    menu.AddCssClass("highlight");
                }
                menu.SetInnerText(text);
                return MvcHtmlString.Create(menu.ToString());
            }
            

            然后使用这个助手来渲染菜单项:

            <%: Html.MenuItem("about", "About us") %>
            <%: Html.MenuItem("contact", "Contact us") %>
            ...
            

            【讨论】:

            • 嗨,达林。 HTML Helpers 放在哪里?一个新文件夹,然后使用“imports”来包含它?我该如何使用它?谢谢。
            • 没有约定也没有特定的位置来放置自定义 HTML 帮助器。我个人将扩展方法放在 Helpers 文件夹中。
            猜你喜欢
            • 2015-04-02
            • 1970-01-01
            • 1970-01-01
            • 2016-10-01
            • 1970-01-01
            • 2010-09-15
            • 1970-01-01
            • 2016-02-24
            相关资源
            最近更新 更多