使用ASP.NETMVC4和jQuery的动态菜单

我正在开发一个ASP.NETMVC4模块，它应该根据从数据库获取的数据在我的视图中显示多级菜单。由于我不清楚如何完成整个任务，我决定一步一步地完成，我想我最终会得到我想要的结果

我做了一些谷歌搜索，现在我有了这个：

类

MenuItem

：

public class MenuItem
{
  public MenuItem()
  {
    this.ChildMenuItems = new List<MenuItem>();
  }

  public int MenuItemId { get; set; }
  public string MenuItemName { get; set; }
  public string MenuItemPath { get; set; }
  public Nullable<int> ParentItemId { get; set; }
  public virtual ICollection<MenuItem> ChildMenuItems { get; set; }
}

我认为应该使用

Entity Framework 5

和

code First

工作流，这样这些类将来可能会有用，但现在我在控制器中创建的都是虚拟数据-为了简单起见，使用

Visual Studio 2012

创建的默认MVC 4项目中的

HomeController

。然后在局部视图中呈现数据

\u菜单

：

public class Menu
{
  public Menu()
  {
    Items = new List<MenuItem>();
  } 
  public List<MenuItem> Items;
}

@model DynamicMenu.Models.Menu
<ul id="menu">
    @foreach (var item in Model.Items)
    {
        <li><a href="@item.MenuItemPath">@item.MenuItemName</a>
            @if (item.ChildMenuItems.Any())
            {
                <ul>
                    @foreach (var subitem in item.ChildMenuItems)
                    {
                        <li><a href="@subitem.MenuItemPath">@subitem.MenuItemName</a></li>
                    }
                </ul>
            }
        </li>
    }
</ul>

本例使用的是

jQuery菜单小部件

，它似乎可以提供我需要的东西，但我现在想解决的问题是，通过这样的代码，我得到以下输出：

我想要的是在鼠标悬停时显示/隐藏子菜单。使用纯

HTML

和

JavaScript/jQuery

我认为这会更容易（虽然不确定），但我希望（如果可能）坚持使用

Razor

视图引擎

因此，我的问题是：

• 给定代码，如何在鼠标悬停时显示和隐藏子菜单
• 很多网站都有这样的菜单，所以我认为也许有一种标准的方法来实现这样的功能。尽管我的搜索只找到了部分解决方案，但有人能给我指出一个网站/教程，其中展示/解释了实现这种功能的过程吗

---

我建议学习一个好的Javascript数据绑定框架（Knockout是我最喜欢的，其他流行的选项是Angular和Backbone），并学习如何与jQuery一起使用它来构建这样的组件……也就是说，你可以用CSS和一些基本的Javascript或jQuery来完成你的任务…我建议你使用Razor来完成所有这些，因为这些其他语言和技术更适用于任何项目，我可能最终会得到一些纯JS/CSS实现，但由于很多网站都使用这种菜单，因此我觉得这项任务很琐碎，我希望有人能分享解决方案，而不是编写我自己的解决方案。@Leron我正在为我的域网站进行类似的开发。我正在使用基金会来实现。我还在数据驱动部分使用EF Fluent API。一旦我实施了解决方案，我会给你一个答案。Ty@GoldBishop期待着。有问题，但使用此url作为实施指南：

 @Styles.Render("~/Content/css")
 //Next two rows are added
 <link href="../../Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
 <link href="../../Content/themes/base/jquery.ui.menu.css" rel="stylesheet" type="text/css" />
 @Scripts.Render("~/bundles/modernizr")
 //some more default code...
 <script>
   $(document).ready(function () {
     $("#menu").menu();
 });
 </script>