記事詳細

投稿日
2026年01月04日09時16分
タイトル

データベースから動的に、カテゴリー分けされた複数のreferenceページへのメニュー

内容

「検索キーワード：asp.net mvcで左側のcolumn内に「データベースから動的に、カテゴリー分けされた複数のreferenceページへのメニュー」を持つbootstrap 版のサンプルhtmlコードを教えてください。

modelは、category.csとreferencepage.csです。Referencepageクラス内には、”string Content"フィールドを含めてください、そしてこのコードを 全ページ共通の左カラムメニューにする方法を教えてください。」


以下に ASP.NET MVC + Bootstrap で、左カラムに「データベースから動的に取得したカテゴリー別の複数の ReferencePage へのリンクメニュー」を表示するサンプルコードを示します。

モデルは Category.cs と ReferencePage.cs を使い、ReferencePage に string Content フィールドを含めています。
さらに、このメニューを 全ページ共通の左カラム にする方法も解説します。

1. モデル定義

Csharp
// Models/Category.cs
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace YourApp.Models
{
    public class Category
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        // ナビゲーションプロパティ
        public virtual ICollection<ReferencePage> ReferencePages { get; set; }
    }
}

Csharp
// Models/ReferencePage.cs
using System.ComponentModel.DataAnnotations;

namespace YourApp.Models
{
    public class ReferencePage
    {
        public int Id { get; set; }

        [Required]
        public string Title { get; set; }

        public string Content { get; set; } // ページ本文

        // 外部キー
        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }
    }
}

2. コントローラー（メニュー用）

共通メニューは ChildAction / ViewComponent で作るのがベストです。
ASP.NET MVC 5 では ChildActionOnly を使います。

Csharp
// Controllers/MenuController.cs
using System.Linq;
using System.Web.Mvc;
using YourApp.Models;

namespace YourApp.Controllers
{
    public class MenuController : Controller
    {
        private readonly ApplicationDbContext _db = new ApplicationDbContext();

        [ChildActionOnly]
        public ActionResult CategoryMenu()
        {
            var categories = _db.Categories
                .OrderBy(c => c.Name)
                .ToList();

            return PartialView("_CategoryMenu", categories);
        }
    }
}

3. 部分ビュー（Bootstrap 左カラムメニュー）

Html
@* Views/Menu/_CategoryMenu.cshtml *@
@model IEnumerable<YourApp.Models.Category>

<div class="list-group">
    @foreach (var category in Model)
    {
        <div class="list-group-item">
            <strong>@category.Name</strong>
            <ul class="list-unstyled ms-3">
                @foreach (var page in category.ReferencePages.OrderBy(p => p.Title))
                {
                    <li>
                        <a href="@Url.Action("Details", "ReferencePage", new { id = page.Id })">
                            @page.Title
                        </a>
                    </li>
                }
            </ul>
        </div>
    }
</div>

4. レイアウトに組み込む（全ページ共通）

_Layout.cshtml に左カラムを追加します。

Html
@* Views/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - MyApp</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 左カラム -->
            <div class="col-md-3">
                @Html.Action("CategoryMenu", "Menu")
            </div>

            <!-- メインコンテンツ -->
            <div class="col-md-9">
                @RenderBody()
            </div>
        </div>
    </div>

    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>

5. ReferencePage 詳細ページ例

Csharp
// Controllers/ReferencePageController.cs
using System.Linq;
using System.Web.Mvc;
using YourApp.Models;

namespace YourApp.Controllers
{
    public class ReferencePageController : Controller
    {
        private readonly ApplicationDbContext _db = new ApplicationDbContext();

        public ActionResult Details(int id)
        {
            var page = _db.ReferencePages.FirstOrDefault(p => p.Id == id);
            if (page == null) return HttpNotFound();

            return View(page);
        }
    }
}

Html
@* Views/ReferencePage/Details.cshtml *@
@model YourApp.Models.ReferencePage

<h2>@Model.Title</h2>
<div>
    @Html.Raw(Model.Content)
</div>

6. ポイント

  • 全ページ共通化は _Layout.cshtml に @Html.Action("CategoryMenu", "Menu") を入れることで実現。
  • Bootstrap の .list-group と .list-unstyled を使ってシンプルな階層メニューを作成。
  • データは Category → ReferencePages のリレーションで取得。
  • Content フィールドは HTML を含む場合 @Html.Raw() で表示。

もし希望があれば、このメニューを Bootstrap のアコーディオン形式 にして、カテゴリーをクリックするとページ一覧が開閉する形にもできます。
次にそれを実装したコードも作れますが、まずはこの基本版で動作確認するのが良いです。

この後、アコーディオン形式にした 折りたたみ式カテゴリーメニュー版 のコードも作成しますか？
そうすればより見やすくなります。


Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧