ASP.NET MVC 和导航答案

【问题标题】：ASP.NET MVC and navigationASP.NET MVC 和导航
【发布时间】：2015-09-26 00:33:54
【问题描述】：

我正在尝试学习 ASP.NET MVC，并且我希望在当前选择的项目上突出显示菜单。我知道我以前在网络表单中这样做过（虽然我现在不记得是如何做到的，但不知何故使用站点地图）。但是如何在 MVC 中做到这一点呢？

这似乎是一个基本的事情，在 MVC 中应该很简单？当然，我可以通过添加在菜单中的 body id 和 li id 之间耦合的 CSS 规则来做到这一点（#home #homeli [style as current]），但似乎很快就会变得笨拙，特别是如果还有除了主导航之外还有很多子菜单（在几个子页面中，我在 contentplaceholder 中有一个子菜单。顺便说一句，我想这是在 MVC 中做到这一点的唯一方法？在 Web 表单中，子菜单也可以由站点地图，但我还没有看到在 MVC 中执行此操作的方法...）

有什么建议吗？

【问题讨论】：

标签： asp.net-mvc navigation

【解决方案1】：

这里有一个教程，它提供了一种非常简洁的方式来实现这种菜单：

http://www.dev102.com/2009/04/14/creating-a-tabbed-menu-control-for-aspnet-mvc/

判断菜单项是否处于活动状态的神奇之处发生在渲染菜单项的辅助方法中：

public static class MyHtmlHelper
{
   public static string TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> tabs)
   {
       var route = helper.ViewContext.RequestContext.RouteData;
       //This is the current controller
       var controller = route.GetRequiredString("controller");
       var action = route.GetRequiredString("action");
       var menu = "\n\n<ul id=\"menu\">";

       foreach (var tab in tabs)
       {
           //if the menu controller and action match current controller and action, mark it as selected
           if (controller == tab.Controller && action == tab.Action)
               menu += "\n\t<li>" + helper.ActionLink(tab.Text, tab.Action,
               tab.Controller, new { @class = "selected" }) + "</li>";
           else
               menu += "\n\t<li>" + helper.ActionLink(tab.Text,
               tab.Action, tab.Controller) + "</li>";
       }
       menu += "\n</ul>\n\n";
       return menu;
   }
}

MenuTab 类：

public class MenuTab
{
    private MenuTab(string text, string action, string controller)
    {
        Text = text;
        Action = action;
        Controller = controller;
    }

    public static MenuTab Create(string text, string action, string controller)
    {
        return new MenuTab(text, action, controller);
    }

    public string Text { get; private set; }
    public string Action { get; private set; }
    public string Controller { get; private set; }
}

用法：

<%= Html.TabbedMenu(new List<MenuTab> {
    MenuTab.Create("Home", "Index", "Home"),
    MenuTab.Create("About", "About", "Home"),
    MenuTab.Create("Services", "Services", "Home"),
    MenuTab.Create("Pricing", "Pricing", "Home"),
    MenuTab.Create("Contact", "Contact", "Home")
}) %>

【讨论】：

完美，这正是我想要的。谢谢！

【解决方案2】：

每个控制器的菜单项

@{
    var currentController = (string)ViewContext.RouteData.Values["controller"];

    Func<string, object> htmlAttributesFactory =
        controller => currentController == controller ? new {@class = "selected"} : null;

    Func<string, string, MvcHtmlString> menuItemFactory =
        (title, controller) =>
        Html.RouteLink(
            title,
            new {controller},
            htmlAttributesFactory(controller)); 


}

@menuItemFactory("Home", "Home")
@menuItemFactory("Pending", "Pending")

【讨论】：