検索キーワード：
asp.net mvc .NET8で左側のcolumn内に「データベースから動的に、カテゴリー分けされた複数のreferenceページへのメニュー」を持つbootstrap 版のサンプルhtmlコードを教えてください。 modelは、category.csとreferencepage.csです。Referencepageクラス内には、”string Content"フィールドを含めてください、そしてこのコードを 全ページ共通の左カラムメニューにする方法を教えてください。」
モデル定義
Models/Category.cs
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace YourApp.Models
{
public class Category
{
public int Id { get; set; }
[Required, StringLength(100)]
public string Name { get; set; }
// ナビゲーションプロパティ
public virtual ICollection<ReferencePage> ReferencePages { get; set; }
}
}
Models/ReferencePage.cs
using System.ComponentModel.DataAnnotations;
namespace YourApp.Models
{
public class ReferencePage
{
public int Id { get; set; }
[Required, StringLength(200)]
public string Title { get; set; }
[Required]
public string Content { get; set; } // ページ本文
public int CategoryId { get; set; }
public virtual Category Category { get; set; }
}
}
2. コントローラー（メニュー用）
Controllers/MenuController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using YourApp.Models;
using System.Threading.Tasks;
namespace YourApp.Controllers
{
public class MenuController : Controller
{
private readonly ApplicationDbContext _context;
public MenuController(ApplicationDbContext context)
{
_context = context;
}
// 部分ビューで呼び出すアクション
public async Task<IActionResult> LeftMenu()
{
var categories = await _context.Categories
.Include(c => c.ReferencePages)
.ToListAsync();
return PartialView("_LeftMenu", categories);
}
}
}
3. 部分ビュー（Bootstrap 左カラムメニュー）
Views/Shared/_LeftMenu.cshtml
@model IEnumerable<YourApp.Models.Category>
<div class="list-group">
@foreach (var category in Model)
{
<div class="mb-2">
<h6 class="fw-bold">@category.Name</h6>
@foreach (var page in category.ReferencePages)
{
<a href="@Url.Action("Details", "ReferencePage", new { id = page.Id })"
class="list-group-item list-group-item-action">
@page.Title
</a>
}
</div>
}
</div>
4. レイアウトに組み込む（全ページ共通）
Views/Shared/_Layout.cshtml
@using Microsoft.AspNetCore.Mvc
@inject Microsoft.AspNetCore.Mvc.IUrlHelper Url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewData["Title"] - YourApp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 左カラム -->
<aside class="col-md-3 bg-light p-3">
@await Component.InvokeAsync("Menu", new { }) <!-- ViewComponent 方式でもOK -->
@* または直接呼び出し *@
@await Html.PartialAsync("_LeftMenu", await (await Html.RenderActionAsync("LeftMenu", "Menu")))
</aside>
<!-- メインコンテンツ -->
<main class="col-md-9 p-3">
@RenderBody()
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
5. ReferencePage 詳細ページ例
Controllers/ReferencePageController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using YourApp.Models;
using System.Threading.Tasks;
namespace YourApp.Controllers
{
public class ReferencePageController : Controller
{
private readonly ApplicationDbContext _context;
public ReferencePageController(ApplicationDbContext context)
{
_context = context;
}
public async Task<IActionResult> Details(int id)
{
var page = await _context.ReferencePages
.Include(r => r.Category)
.FirstOrDefaultAsync(r => r.Id == id);
if (page == null) return NotFound();
return View(page);
}
}
}
Views/ReferencePage/Details.cshtml
@model YourApp.Models.ReferencePage
<h2>@Model.Title</h2>
<div>
@Html.Raw(Model.Content)
</div>
6. 全ページ共通化のポイント
- 左カラムメニューは
_LeftMenu.cshtml という部分ビューに分離。 _Layout.cshtml に組み込むことで、全ページで共通表示。- データは
MenuController.LeftMenu() で取得し、部分ビューに渡す。 - 大規模化する場合は ViewComponent にするとより再利用性が高い。
✅ この構成で、Bootstrap の左カラムに カテゴリー別リンクメニューが全ページ共通で表示されます。
もし希望があれば、次は ViewComponent 版 にしてさらにクリーンにできます。
要望があれば、このコードを ViewComponent 方式 に書き換えて、_Layout.cshtml から1行で呼び出せる形にできますが、やりますか？
そうするとメニューの呼び出しがよりシンプルになります。
Powered by Froala Editor