記事詳細

投稿日
2026年01月02日03時27分
タイトル

ASP.NET MVC で 左カラムに複数のリンクメニューを配置し

内容

 （部分ビュー）_Sidebar.cshtml

Views/Shared/_Sidebar.cshtml

CSHTML
@* 左側メニュー部分ビュー *@
@{
    // メニュー項目は ViewBag やモデルから動的生成も可能
    var menuItems = new[]
    {
        new { Text = "Reference 1", Url = Url.Action("Reference1", "Home") },
        new { Text = "Reference 2", Url = Url.Action("Reference2", "Home") },
        new { Text = "Reference 3", Url = Url.Action("Reference3", "Home") },
        new { Text = "Reference 4", Url = Url.Action("Reference4", "Home") }
    };
}

<nav class="bg-light border-end vh-100 p-3">
    <h5 class="mb-3">Reference Menu</h5>
    <ul class="nav flex-column">
        @foreach (var item in menuItems)
        {
            <li class="nav-item">
                <a class="nav-link text-dark" href="@item.Url">@item.Text</a>
            </li>
        }
    </ul>
</nav>

2. （レイアウトファイル）_Layout.cshtml

Views/Shared/_Layout.cshtml

CSHTML
@{
    Layout = null; // レイアウト自身なので null
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@ViewBag.Title - My MVC App</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">
            <!-- 左カラム -->
            <div class="col-md-3 col-lg-2 p-0">
                @Html.Partial("_Sidebar") @* 部分ビュー呼び出し *@
            </div>

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. コントローラー例

Controllers/HomeController.cs

シャープ
using System.Web.Mvc;

namespace YourApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index() => View();

        public ActionResult Reference1() => View();
        public ActionResult Reference2() => View();
        public ActionResult Reference3() => View();
        public ActionResult Reference4() => View();
    }
}

4. ビュー例

Views/Home/Index.cshtml

CSHTML
@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Welcome to the Home Page</h2>
<p>ここにメインコンテンツを表示します。</p>

ポイント

  • Bootstrap のグリッドシステムで左カラム () と右カラム () を分割。col-md-3col-md-9
  • _Sidebar.cshtml を部分ビュー化して で呼び出し。@Html.Partial("_Sidebar")
  • メニュー項目は 固定配列でも、データベースや設定ファイルから動的生成も可能。
  • vh-100で縦いっぱいの高さを確保し、 で右境界線を追加。border-end

✅ この構成なら、複数ページで同じ左メニューを再利用でき、Bootstrap の見た目も統一されます。
もし希望があれば、メニューを動的に生成するバージョンも作れますが、作りますか?
そうすればリンクや表示名をコントローラーやDBから変更可能になります。

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