データベースから取得したデータに基づいて、ビューにマルチレベル メニューを表示する 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にワークフローを使用することを考えていますが、今ではコントローラーで作成するのはすべてダミーデータです-簡単にするために作成されたデフォルトのMVC 4プロジェクトから. そして、部分的なビューでデータをレンダリングします:Code FirstHomeControllerVisual 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ビューエンジンに固執したいと思います。
だから私の質問は：
- コードを考えると、マウスホバーでサブメニューを非表示にするにはどうすればよいですか?
- 多くのサイトにはそのような種類のメニューがあるので、おそらくそのような機能を実装する標準的な方法があると思います. 私の検索では部分的な解決策しか得られませんでしたが、そのような機能の実装が示されている/説明されているサイト/チュートリアルを教えてもらえますか?