1.21 jigowatts

Great Scott!

トップ > ASP.NET MVC > ASP.NET MVCはじめました～データベースで管理する BootStrap 多階層ドロップダウンメニュー

ASP.NET MVCはじめました～データベースで管理する BootStrap 多階層ドロップダウンメニュー

ASP.NET MVC C#

概要

ログインユーザの権限などで表示項目が変わるような動的なメニューが欲しかったので作ってみました。2階層くらい表現できれば十分かとも思ったのですが、多階層ドロップダウンメニューにチャレンジしてみます。

f:id:sh_yoshida:20170328155557g:plain

環境

多階層ドロップダウンメニューの作成

まずはBootStrapで多階層のドロップダウンメニューを実装してみました。CSSはこちらから拝借。CSSとViewを書くだけで実装できました。この時点ではリンクリストは直書き。

■/Views/Shared/_Layout.cshtml

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                サンプル<span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li>@Html.ActionLink("Upload", "Upload", "Home")</li>
                <li>@Html.ActionLink("Autocomplete", "Create", "Home")</li>
                <li><a href="#">リンクのリスト１</a></li>
                <li><a href="#">リンクのリスト２</a></li>
                <li><a href="#">リンクのリスト３</a></li>
                <li class="dropdown-submenu">
                    <a tableindex="-1" href="#">More options</a>
                    <ul class="dropdown-menu">
                        <li><a href="http://google.com">Google</a></li>
                        <li><a href="http://yahoo.com">Yahoo</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

3階層までだとこんな感じに。固定でよければ簡単に実装できますね！

f:id:sh_yoshida:20170328105433p:plain

データベースよりメニューデータを取得

動的なメニューを実現するにはメンテナンス的にもデータベースでデータを持ってた方がいいんじゃないのってことで、ParentIdによる階層関係のデータを持ったテーブルを用意してみました。これで何階層でも行ける↑↑↑あとはビューヘルパーのActionLinkメソッドを使いたいのでリンクテキストやらアクションメソッドと並び順で構成。

f:id:sh_yoshida:20170328160548p:plain

これらのデータを一旦全部取得して、再帰関数で階層構造データになるように再構成。LINQで一発でできそうな気がすると思ったのですが、無念…。いつかちゃんと調べる。

■/Models/MenuItem.cs

public class MenuItem
{
    [Key]
    public int Id { get; set; }
    public int? ParentId { get; set; }
    [Required]
    public string LinkText { get; set; }
    public string ActionName { get; set; }
    public string ControllerName { get; set; }
    public int Order { get; set; }
}

public class NavigationLink : MenuItem
{
    public IEnumerable<NavigationLink> ChildMenu { get; set; }
}

public class Navigation
{
    public IEnumerable<NavigationLink> Menu
    {
        get
        {
            var menu = new List<NavigationLink>();
            using (var context = new AppDbContext())
            {
                var data = context.MenuItems
                    .OrderBy(n => n.Order)
                    .ToList();

                var mainMenu = data.Where(n => n.ParentId == null);
                foreach (var item in mainMenu)
                {
                    NavigationLink linkItem = MappingLinkItems(item);
                    menu.Add(linkItem);
                }
                SetChildMenu(menu, data);
            }
            return menu;
        }
    }

    #region helper method...
}

カスタムビューヘルパーで描画

TagBuilderを使ったカスタムビューヘルパーを作ってみたのですが、思ってたより複雑になったのでサブメニュー部分だけ実装したらいまいちな感じになってしまいました。本当はこれもヘルパー一発で描画したかった。

■/Helper/NavigationMenuHelper.cs

public static class NavigationMenuHelper
{
    public static IHtmlString NavigationSubmenuListFor(this HtmlHelper helper, IEnumerable<NavigationLink> submenu)
    {
        if (submenu == null)
        {
            throw new ArgumentNullException("submenu", "submenu is null.");
        }
        var sb = new StringBuilder();
        foreach (var item in submenu)
        {
            if (item.ChildMenu == null)
            {
                var li = new TagBuilder("li");
                li.InnerHtml = helper.ActionLink(item.LinkText, item.ActionName, item.ControllerName).ToString();
                sb.Append(li.ToString(TagRenderMode.Normal));
            }
            else
            {
                sb.Append(CreateSubMenu(helper, item.LinkText, item.ChildMenu));
            }
        }

        return MvcHtmlString.Create(sb.ToString());
    }

    private static string CreateSubMenu(HtmlHelper helper, string linkText, IEnumerable<NavigationLink> subMenu)
    {
        var a = new TagBuilder("a");
        var attributes = new Dictionary<string, string>
        {
            ["tableindex"] = "-1",
            ["href"] = "#",
        };
        a.MergeAttributes(attributes);
        a.InnerHtml = linkText;

        var top_li = new TagBuilder("li");
        top_li.MergeAttribute("class", "dropdown-submenu");
        top_li.InnerHtml = a.ToString();

        var ul = new TagBuilder("ul");
        ul.MergeAttribute("class", "dropdown-menu");

        foreach (var item in subMenu)
        {
            if (item.ChildMenu == null)
            {
                var li = new TagBuilder("li");
                li.InnerHtml = helper.ActionLink(item.LinkText, item.ActionName, item.ControllerName).ToString();
                ul.InnerHtml += li.ToString();
            }
            else
            {
                ul.InnerHtml += CreateSubMenu(helper, item.LinkText, item.ChildMenu);
            }
        }

        top_li.InnerHtml += ul.ToString();
        return top_li.ToString();
    }
}

■/Views/Shared/_Layout.cshtml

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        @foreach (var item in Session["menu"] as List<NavigationLink>)
        {
            if (item.ChildMenu == null)
            {
                <li>@Html.ActionLink(item.LinkText, item.ActionName, item.ControllerName)</li>
            }
            else
            {
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                        @item.LinkText
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        @Html.NavigationSubmenuListFor(item.ChildMenu)
                    </ul>
                </li>
            }
        }
    </ul>
</div>

実行結果

一応できました！4階層になるようなデータで実施。これ以上深くしても使いにくそう…。
ぺろ…ッ！！。oO(権限で表示を切り替えようとしてたの忘れてた)

f:id:sh_yoshida:20170328155557g:plain

ソース

github.com