ASP.NET MVC和导航 [英] ASP.NET MVC and navigation

问题描述

我想学习ASP.NET MVC，我想有菜单突出了当前选择的项目。我知道我在网页表单之前这样做（虽然我不记得实际如何，此刻，但不知何故与网站地图）。但如何才能在这个MVC办呢？

I'm trying to learn ASP.NET MVC, and I want to have menus highlighted on the item that is currently selected. I know I did this before in web forms (although I don't actually remember how at the moment, but somehow with the sitemap). But how can this be done in MVC?

现在看来似乎应该是简单的MVC做这样一个基本的东西？当然，我可以通过添加耦合体ID和李ID从菜单（#home #homeli [风格电流]）之间的CSS规则去做，但似乎很快就会变得笨拙，尤其是如果有也很多子菜单中除了主要的导航（在几个子页面我有一个的ContentPlaceHolder子菜单。顺便说一句，我想这是做MVC中的唯一途径？Web窗体的子菜单也可以通过以下方式处理网站地图，但我还没有见过的方式在MVC中做到这一点...）

It seems like such a basic thing it should be simple to do in MVC? Sure, I can do it by adding CSS rules that are coupled between a body id and an li id from the menu (#home #homeli [style as current]), but it seems that would quickly become unwieldy, especially if there are also a lot of sub menus besides the main navigation (in several of the sub pages I have a sub menu in a contentplaceholder. BTW, I guess that's the only way to do it in MVC? In web forms the sub menus too could be handled by the sitemap, but I haven't seen a way to do this in MVC...)

有什么建议？

推荐答案

下面是提供一个非常干净的方式来实现这种菜单的教程：

Here is a tutorial that provides a very clean way to achieve this kind of menu:

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

魔术位搞清楚菜单项是否被激活发生在呈现项辅助方法：

The magic bit figuring out whether or not a menu item is active happens in the helper method that renders the items:

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类：

MenuTab class:

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")
}) %>

这篇关于ASP.NET MVC和导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！