0

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

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

类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; }
}

和类Menu：

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

我认为使用Entity Framework 5和Code First工作流，因此这些类可能对未来有用，但现在它是我在控制器中创建的所有虚拟数据 - 为简单起见，使用HomeController从默认 MVC 4 项目创建Visual Studio 2012的。然后在局部视图中渲染数据_Menu：

@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>

在我_Layout看来，我也有：

 @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>

这个例子正在使用jQuery Menu widget，似乎它可以提供我需要的东西，但我现在要解决的问题是，使用这样的代码，我得到以下输出：

菜单

我想要的是在鼠标悬停时显示/隐藏子菜单。使用纯HTML，JavaScript/jQuery我认为它会更容易（虽然不确定）但我希望（如果可能的话）坚持使用Razor视图引擎。

所以我的问题是：

  • 给定代码，我如何在鼠标悬停时显示隐藏子菜单？
  • 许多网站都有这样的菜单，所以我认为也许有一种标准的方式来实现这样的功能。即使我的搜索只导致了一些部分解决方案，是否有人可以将我指向显示/解释实现此类功能的站点/教程？
4

0 回答 0