Asp.Net Mvc 突出显示当前页面链接技术？

Posted 2023-03-06

【中文标题】Asp.Net Mvc 突出显示当前页面链接技术？

【英文标题】：Asp.Net Mvc highlighting current page link technique?

【发布时间】：2011-04-08 07:13:54

【问题描述】：

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

【问题讨论】：

您如何存储菜单项？您可以将它们与控制器和动作相关联，并根据这些值突出显示。

我将它们作为静态存储在母版页中。

已经在这里介绍过？见：***.com/questions/1471362/…

这篇文章帮助了我：Highlighting current page in MVC 3

【参考方案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("<li0", (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 文件夹中。