ASP.NET MVC 共通ビュー作成マニュアル

ASP.NET

Posted at 2025-07-05

ASP.NET MVC 共通ビュー作成マニュアル

概要

このマニュアルでは、ASP.NET MVCで共通ビューを作成し、メインレイアウト、左メニュー、トップメニューを実装する方法を説明します。UserManagementSystemプロジェクトで使用している技術のみを使用した初学者向けのステップバイステップガイドです。

使用技術

ASP.NET MVC 5.2.9
Razor ビューエンジン
jQuery 3.7.0
Bootstrap 5.2.3
CSS3

共通化の基礎知識

なぜ共通化が必要なのか？

Webアプリケーションでは、複数のページで同じヘッダー、フッター、メニューを使用することが多くあります。各ページで同じコードを書くと：

❌ 問題点

コードの重複が発生
修正時に全ページを変更する必要
メンテナンスが困難
ミスが発生しやすい

✅ 共通化のメリット

コードの再利用
一箇所の修正で全体に反映
統一されたデザイン
開発効率の向上

ASP.NET MVCの共通化機能

ASP.NET MVCには以下の共通化機能があります：

レイアウトページ - 全体の構造を定義
部分ビュー - 再利用可能なコンポーネント
ViewBag/ViewData - データの受け渡し
セクション - 特定エリアのカスタマイズ

ViewBagの詳細解説

ViewBagとは？

ViewBagは、コントローラーからビューにデータを渡すための仕組みです。

基本的な使い方

コントローラー側（データを設定）

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // ViewBagにデータを設定
        ViewBag.Title = "ホーム画面";
        ViewBag.UserName = "田中太郎";
        ViewBag.LeftMenu = 1;  // 数値
        ViewBag.ShowTopMenu = true;  // 真偽値
        ViewBag.MenuItems = new List<string> { "メニュー1", "メニュー2" };  // リスト
        
        return View();
    }
}

ビュー側（データを取得・使用）

@{
    // ViewBagからデータを取得
    string pageTitle = ViewBag.Title;
    string userName = ViewBag.UserName;
    int leftMenuFlag = ViewBag.LeftMenu;
    bool showMenu = ViewBag.ShowTopMenu;
}

<h1>@ViewBag.Title</h1>
<p>ようこそ、@ViewBag.UserName さん</p>

@if (ViewBag.ShowTopMenu)
{
    <div>トップメニューを表示</div>
}

ViewBagを使ったレイアウト制御の実例

UserManagementSystemでは、ViewBagを使って画面レイアウトを動的に制御しています：

// コントローラー側
public ActionResult UserSearch()
{
    ViewBag.Title = "ユーザー検索";
    ViewBag.LeftMenu = 1;              // 左メニューを表示（1=表示、0=非表示）
    ViewBag.TopMenuHeight = 50;        // トップメニューの高さ
    ViewBag.LeftMenuWidth = 160;       // 左メニューの幅
    ViewBag.TopContainerWidth = 1200;  // 全体コンテナの幅
    ViewBag.RightMenuWidth = 0;        // 右メニューの幅（今回は非表示）
    
    return View();
}

<!-- ビュー側で条件分岐 -->
@if (ViewBag.LeftMenu != 0)
{
    <!-- 左メニューありのレイアウト -->
    <table style="border:hidden; margin:auto;">
        <tr>
            <td style="width:@(ViewBag.LeftMenuWidth)px;">
                @Html.Partial("/Views/Shared/_LeftMenu.cshtml")
            </td>
            <td style="width:900px;">
                @RenderBody()
            </td>
        </tr>
    </table>
}
else
{
    <!-- 左メニューなしのレイアウト -->
    @RenderBody()
}

ViewBagの注意点

⚠️ 注意事項

ViewBagは動的型なので、タイプミスに注意
存在しないプロパティにアクセスするとnullが返る
大量のデータ転送には向かない

// 安全な取得方法
string title = ViewBag.Title ?? "デフォルトタイトル";
int menuFlag = ViewBag.LeftMenu ?? 0;

// null チェック付きの使用例
@if (ViewBag.UserInfo != null)
{
    var userInfo = ViewBag.UserInfo as UserInfoModel;
    <p>@userInfo.ニックネーム</p>
}

@Html.Partialの詳細解説

@Html.Partialとは？

@Html.Partialは、部分ビュー（Partial View）を呼び出すためのヘルパーメソッドです。再利用可能なUIコンポーネントを作成できます。

基本的な使い方

1. シンプルな部分ビューの呼び出し

<!-- パラメータなしで部分ビューを呼び出し -->
@Html.Partial("_LeftMenu")

<!-- フルパス指定 -->
@Html.Partial("/Views/Shared/_LeftMenu.cshtml")

2. モデルを渡す部分ビューの呼び出し

<!-- モデルを渡して部分ビューを呼び出し -->
@Html.Partial("_UserInfo", Model.UserData)

<!-- 複数パラメータの例 -->
@Html.Partial("/Views/FindUser/FindResult.cshtml", Model)

UserManagementSystemでの実例

左メニューの呼び出し

<!-- メインレイアウト（_Layout1.cshtml）で左メニューを呼び出し -->
<td style="width:160px; vertical-align:top;">
    <div>@Html.Partial("/Views/Shared/_LeftMenu.cshtml")</div>
</td>

トップメニューの呼び出し

<!-- メインレイアウトでトップメニューを呼び出し -->
@if (ViewBag.LeftMenu != 0)
{
    @Html.Partial("/Views/Shared/_TopMenu.cshtml")
}

検索結果の呼び出し

<!-- ユーザー検索画面で検索結果部分ビューを呼び出し -->
<div id="container">
    @Html.Partial("~/Views/FindUser/FindResult.cshtml", Model)
</div>

部分ビューの作成手順

ステップ 1: 部分ビューファイルの作成

Views/Shared/_LeftMenu.cshtml を作成：

@model UserManagementSystem.Models.UserInfoModel
@using UserManagementSystem.Models
@{
    // 部分ビュー内でのデータ処理
    var userInfo = ViewBag.UserInfo as UserInfoModel;
}

<div class="left-menu-container">
    <!-- 部分ビューの内容 -->
    <h3>メニュー</h3>
    <ul>
        <li><a href="/Home/Index">ホーム</a></li>
        <li><a href="/FindUser/Index">ユーザー検索</a></li>
        <li><a href="/UserManagement/Index">ユーザー管理</a></li>
    </ul>
</div>

ステップ 2: メインビューで部分ビューを呼び出し

<!-- メインビューで部分ビューを使用 -->
<div class="main-layout">
    <div class="left-panel">
        @Html.Partial("_LeftMenu", Model.UserInfo)
    </div>
    <div class="content-panel">
        <!-- メインコンテンツ -->
    </div>
</div>

部分ビューの種類と特徴

種類	説明	使用例
共通部分ビュー	複数画面で使用	ヘッダー、フッター、メニュー
専用部分ビュー	特定画面専用	検索結果、詳細表示
コンポーネント部分ビュー	再利用可能な部品	ボタン、フォーム項目

@Html.Partialの注意点

⚠️ 注意事項

部分ビューファイル名は通常 アンダースコア（_） で始める
パスの指定ミスに注意
部分ビュー内でのみ有効なViewBagは親ビューと共有される

@RenderBody()の詳細解説

@RenderBody()とは？

@RenderBody()は、レイアウトページ内で、各個別ページのコンテンツが挿入される場所を指定するメソッドです。

基本的な仕組み

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

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <!-- 共通のCSSやJavaScript -->
</head>
<body>
    <!-- 共通ヘッダー -->
    <header>
        <h1>UserManagementSystem</h1>
    </header>
    
    <!-- メインコンテンツエリア：ここに各ページの内容が入る -->
    <main>
        @RenderBody()
    </main>
    
    <!-- 共通フッター -->
    <footer>
        <p>&copy; 2024 UserManagementSystem</p>
    </footer>
</body>
</html>

個別ページ（Index.cshtml）

@{
    ViewBag.Title = "ホーム";
    Layout = "~/Views/Shared/_Layout1.cshtml";  // レイアウトを指定
}

<!-- この部分が@RenderBody()の位置に挿入される -->
<div class="home-content">
    <h2>ようこそ、UserManagementSystemへ</h2>
    <p>システムの概要説明...</p>
    
    <div class="quick-links">
        <a href="/FindUser/Index">ユーザー検索</a>
        <a href="/UserManagement/Index">ユーザー管理</a>
    </div>
</div>

結果として生成されるHTML

<!DOCTYPE html>
<html>
<head>
    <title>ホーム</title>
    <!-- 共通のCSSやJavaScript -->
</head>
<body>
    <!-- 共通ヘッダー -->
    <header>
        <h1>UserManagementSystem</h1>
    </header>
    
    <!-- @RenderBody()の位置に個別ページの内容が挿入 -->
    <main>
        <div class="home-content">
            <h2>ようこそ、UserManagementSystemへ</h2>
            <p>システムの概要説明...</p>
            
            <div class="quick-links">
                <a href="/FindUser/Index">ユーザー検索</a>
                <a href="/UserManagement/Index">ユーザー管理</a>
            </div>
        </div>
    </main>
    
    <!-- 共通フッター -->
    <footer>
        <p>&copy; 2024 UserManagementSystem</p>
    </footer>
</body>
</html>

UserManagementSystemでの実例

レイアウトファイルでの@RenderBody()使用

<!-- _Layout1.cshtml -->
<body>
    @if (ViewBag.LeftMenu != 0)
    {
        @Html.Partial("/Views/Shared/_TopMenu.cshtml")
    }
    else
    {
        <div class="TOPBAR">@ViewBag.Title</div>
    }
    
    <div>
        @if (ViewBag.LeftMenu != 0)
        {
            <table style="border:hidden; margin:auto;">
                <tr>
                    <td style="width:160px; vertical-align:top;">
                        <div>@Html.Partial("/Views/Shared/_LeftMenu.cshtml")</div>
                    </td>
                    <td style="width:10px; border:hidden"></td>
                    <td style="width:900px;">
                        @RenderBody()  <!-- ここに各ページのコンテンツが入る -->
                    </td>
                </tr>
            </table>
        }
        else
        {
            @RenderBody()  <!-- レイアウトなしの場合のコンテンツエリア -->
        }
    </div>
</body>

@RenderBody()と@RenderSection()の違い

メソッド	用途	必須性	使用例
@RenderBody()	メインコンテンツ	必須	ページの主要内容
@RenderSection()	特定セクション	オプション	JavaScript、CSS

@RenderSection()の例

<!-- レイアウトファイル -->
<head>
    <title>@ViewBag.Title</title>
    @RenderSection("Styles", required: false)  <!-- オプション -->
</head>
<body>
    @RenderBody()  <!-- 必須 -->
    
    @RenderSection("Scripts", required: false)  <!-- オプション -->
</body>

<!-- 個別ページ -->
@section Styles {
    <style>
        .custom-style { color: red; }
    </style>
}

@section Scripts {
    <script>
        // ページ固有のJavaScript
    </script>
}

@RenderBody()の注意点

⚠️ 注意事項

レイアウトファイルには**必ず1つの@RenderBody()**が必要
@RenderBody()は複数配置できない
Layout = null の場合、@RenderBody()は使用されない

メインレイアウトの作成

ステップ 1: レイアウトファイルの作成

Views/Shared/_Layout1.cshtml を作成します。

@model UserManagementSystem.Models.UserInfoModel
@using UserManagementSystem.Models
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv=expires content=-1>
    <meta http-equiv=Cache-Control CONTENT=no-cache>
    <meta http-equiv=Pragma CONTENT=no-cache>
    <title>@ViewBag.Title</title>
    
    <!-- CSS ファイルの読み込み -->
    <link type="text/css" rel="stylesheet" href="/Content/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="/Content/Site.css" />
    
    <!-- JavaScript ファイルの読み込み -->
    <script src="~/Scripts/Jquery-3.7.0.min.js" type="text/javascript"></script>
</head>

ステップ 2: レイアウト用CSS の定義

<style>
    /* トップメニューコンテナ */
    .TopMenuContainer {
        width: 100%;
        height: @(ViewBag.TopMenuHeight)px;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #5B9BD5;
        z-index: 100;
    }

    /* 左メニュー */
    .LeftMenu {
        width: @(ViewBag.LeftMenuWidth)px;
        height: 100vh;
        background-color: #ffffff;
        color: white;
        position: fixed;
        top: @(ViewBag.TopMenuHeight + 10)px;
        padding: 10px;
        z-index: 90;
    }

    /* メインコンテンツエリア */
    .MidContainer {
        width: @(ViewBag.TopContainerWidth - (ViewBag.LeftMenuWidth > 0 ? (ViewBag.LeftMenuWidth + 10) : 0) -  (ViewBag.RightMenuWidth > 0 ? (ViewBag.RightMenuWidth + 10) : 0))px;
        height: auto;
        min-height: 100%;
        display: inline-block;
        margin-top: @(ViewBag.TopMenuHeight + 10)px;
        margin-left: @((ViewBag.LeftMenuWidth > 0 ? (ViewBag.LeftMenuWidth + 10) : 0))px;
        background-color: #ffffff;
        padding: 10px;
    }

    /* 共通トップバー */
    .TOPBAR {
        width: 100%;
        min-width: 100px;
        height: 50px;
        background-color: #5B9BD5;
        color: white;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        margin-bottom: 8px;
    }
</style>

ステップ 3: ボディ部分の実装

<body>
    @if (ViewBag.LeftMenu != 0)
    {
        @Html.Partial("/Views/Shared/_TopMenu.cshtml")
    }
    else
    {
        <div class="TOPBAR">@ViewBag.Title</div>
    }
    
    <div>
        @if (ViewBag.LeftMenu != 0)
        {
            <table style="border:hidden; margin:auto;">
                <tr>
                    <td style="width:160px; vertical-align:top;">
                        <div>@Html.Partial("/Views/Shared/_LeftMenu.cshtml")</div>
                    </td>
                    <td style="width:10px; border:hidden"></td>
                    <td style="width:900px;">@RenderBody()</td>
                </tr>
            </table>
        }
        else
        {
            @RenderBody()
        }
    </div>
</body>
</html>

左メニューの作成

ステップ 1: 左メニューファイルの作成

Views/Shared/_LeftMenu.cshtml を作成します。

@model UserManagementSystem.Models.UserInfoModel
@using UserManagementSystem.Models
@{
    ViewBag.Title = "_LeftMenu";
    var userInfo = ViewBag.UserInfo as UserInfoModel;
}

<div class="conteiner1" style="background-color:white; height:700px; width:160px;">
    <div class="row" style="width:160px; margin:0px;">
        
        <!-- ユーザー画像表示エリア -->
        <img src='/Content/Images/Chrysanthemum.jpg' style="padding:0px 10px 10px 10px" width="160" height="160">
        
        <!-- ユーザー情報セクション -->
        <div style="padding: 5px;">
            <div class="TitleLine" style="border-top:3px solid #5B9BD5; padding:5px;"></div>
            <h2 style="font-size: 17px; font-weight: bold; margin: 0px; padding: 0px 3px; text-align:center; height: 24px;">
                ユーザー情報
            </h2>
        </div>
        
        <div class="TitleLine" style="border-bottom:3px solid #5B9BD5; padding:5px;"></div>

        <!-- メニューリンク -->
        <div style="margin:5px;">
            <a href="" style="padding:10px; font-size: 20px;">マイページ</a>
        </div>
        <div style="margin:5px;">
            <a href="" style="padding:10px; font-size: 20px;">掲示板</a>
        </div>
        <div style="margin:5px;">
            <a href="" style="padding:10px; font-size: 20px;">書類申請</a>
        </div>
        <div style="margin:5px;">
            <a href="/FindUser/Index" style="padding:10px; font-size: 20px;">ユーザー検索</a>
        </div>
        <div style="margin:5px;">
            <a href="" style="padding:10px; font-size: 20px;">E-ラーニング</a>
        </div>
        <div style="margin:5px;">
            <a href="" style="padding:10px; font-size: 20px;">ユーザー管理</a>
        </div>
    </div>
</div>

ステップ 2: 左メニューのスタイリング

左メニューの見た目をカスタマイズする場合は、以下のCSSクラスを使用します：

.LeftMenuLink {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    border-bottom: 1px solid #eee;
}

.LeftMenuLink:hover {
    background-color: #f5f5f5;
    color: #5B9BD5;
}

トップメニューの作成

ステップ 1: トップメニューファイルの作成

Views/Shared/_TopMenu.cshtml を作成します。

@model UserManagementSystem.Models.UserInfoModel
@using UserManagementSystem.Models
@{
    var userInfo = ViewBag.UserInfo as UserInfoModel;
}

<div class="TOPBAR">
    <div class="row">
        <div style="text-align:left; width:1000px; position: relative;">
            @ViewBag.Title
            
            <!-- 右側のユーザーメニュー -->
            <div style="float: right;">
                <div style="position: absolute; top: 0; right: 0;">
                    
                    <div class="TopMenuSettingImgContainer">
                        <div class="TopMenuDropDownComandContainer">
                            
                            <!-- 設定アイコン -->
                            <input type="image" class="TopMenuSettingImg v_middle_a" 
                                   src="/Content/Images/setting.png" />
                            
                            <!-- ドロップダウンメニュー -->
                            <div class="TopMenuComandContent">
                                <a href="~/BaseInformation/Index" style="font-size:12px">基本情報</a><br />
                                <a href="~/ProfileInformation/Index" style="font-size:12px;">プロファイル</a><br />
                                <div class="TitleLine" style="border-bottom:3px solid #5B9BD5;"></div>
                                <a href="~/Authentication/Logout" style="font-size:12px">ログアウト</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

ステップ 2: トップメニュー用CSS

<style>
    .TopMenuDropDownComandContainer:hover .TopMenuComandContent {
        display: block !important;
    }

    .TopMenuComandContent {
        position: absolute;
        top: 45px;
        right: 0px;
        width: 100px;
        font-size: 12px;
        padding: 3px;
        border: 1px solid #0094ff;
        display: none !important;
        background-color: white;
        z-index: 90;
    }

    .TopMenuSettingImg {
        position: absolute;
        width: 40px;
        height: 40px;
        right: 0px;
    }
</style>

ユーザー検索画面への適用

ステップ 1: 共通レイアウトを使用しない独立画面の作成

ユーザー検索画面 (Views/FindUser/Find.cshtml) では、独自のレイアウトを使用します。

@{
    Layout = null;  // 共通レイアウトを使用しない
}
@model UserManagementSystem.Models.FindModel
@using UserManagementSystem.Models

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ユーザー検索</title>

    <!-- 必要なCSSとJavaScriptを個別に読み込み -->
    <link type="text/css" rel="stylesheet" href="/Content/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="/Content/Site.css">
    <script src="/Scripts/jquery-3.7.0.min.js" type="text/javascript"></script>
</head>

ステップ 2: 独自スタイルの定義

<style>
    .TOPBER {
        width: 100%;
        height: 50px;
        border: 1px solid #69A4D8;
        background: #69A4D8;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .TEXTBOX {
        width: 300px;
    }

    .row {
        min-height: 35px;
        padding-bottom: 3px;
    }
</style>

ステップ 3: 画面構造の実装

<body>
    <!-- 独自のトップバー -->
    <div class="TOPBER">ユーザー検索画面</div>
    
    <!-- メインフォーム -->
    <form id="Form1" method="post" action="Find">
        <div class="container-fluid" id="div検索条件">
            
            <!-- 検索条件の入力フィールド -->
            <div class="row">
                <div class="col-xs-1"></div>
                <div class="col-xs-3">ユーザーID</div>
                <div class="col-xs-8">
                    <input class="TEXTBOX" id="txtユーザーID" name="ユーザーID" 
                           style="width:300px" type="text" value="">
                </div>
            </div>
            
            <!-- その他の検索条件フィールドを同様に追加 -->
            
            <!-- 検索ボタン -->
            <div class="row">
                <div class="col-xs-6">
                    <input type="button" class="BUTTON" id="btn検索" 
                           value="検索" style="width:130px">
                </div>
            </div>
        </div>
    </form>

    <!-- 検索結果表示エリア -->
    <div id="container">
        @Html.Partial("~/Views/FindUser/FindResult.cshtml", Model)
    </div>
</body>

ステップ 4: JavaScript の実装

<script type="text/javascript">
    $(document).ready(function () {
        // 検索ボタンのクリックイベント
        $("#btn検索").click(function () {
            // バリデーション
            if ($("#txtユーザーID").val() !== "") {
                const regexp = /^([a-zA-Z0-9]{1,10})$/;
                if (!regexp.test($("#txtユーザーID").val())) {
                    alert("半角英数字10文字以内でユーザーIDを入力してください");
                    return false;
                }
            }

            // Ajax による検索実行
            $.ajax({
                url: "/FindUser/Find",
                type: "post",
                data: $("#Form1").serialize(),
                success: function (data) {
                    $("#container").html(data);
                },
                error: function () {
                    alert("システムエラーが発生しました");
                    window.location.href = "/Error/go500";
                }
            });
        });
    });
</script>

共通レイアウトを使用する場合の画面作成

ステップ 1: レイアウトを使用するビューの作成

他の画面で共通レイアウトを使用する場合は、以下のように記述します。

@{
    ViewBag.Title = "画面タイトル";
    ViewBag.LeftMenu = 1;  // 左メニューを表示
    ViewBag.TopMenuHeight = 50;
    ViewBag.LeftMenuWidth = 160;
    ViewBag.TopContainerWidth = 1200;
    Layout = "~/Views/Shared/_Layout1.cshtml";
}
@model YourModel

<!-- 画面固有のコンテンツ -->
<div class="content">
    <h1>メインコンテンツ</h1>
    <!-- フォームやその他のコンテンツ -->
</div>

@section Scripts {
    <!-- 画面固有のJavaScript -->
    <script>
        // ここに画面固有のスクリプトを記述
    </script>
}

ステップ 2: コントローラーでのViewBag設定

public class YourController : Controller
{
    public ActionResult Index()
    {
        // ViewBag の設定
        ViewBag.Title = "画面タイトル";
        ViewBag.LeftMenu = 1;
        ViewBag.TopMenuHeight = 50;
        ViewBag.LeftMenuWidth = 160;
        ViewBag.TopContainerWidth = 1200;
        ViewBag.RightMenuWidth = 0;
        
        return View();
    }
}

よくある問題と解決方法

問題 1: 左メニューが表示されない

原因: ViewBag.LeftMenu が設定されていない
解決: コントローラーで ViewBag.LeftMenu = 1; を設定

問題 2: CSSが適用されない

原因: CSSファイルのパスが間違っている
解決: パスを確認し、/Content/bootstrap.css のように絶対パスで指定

問題 3: JavaScript が動作しない

原因: jQuery が読み込まれていない
解決: <script src="/Scripts/jquery-3.7.0.min.js"> を確認

まとめ

このマニュアルでは、ASP.NET MVCでの共通ビュー作成方法を説明しました。

重要なポイント:

レイアウトファイル (_Layout1.cshtml) で全体の構造を定義
部分ビュー (_LeftMenu.cshtml, _TopMenu.cshtml) でコンポーネントを分離
ViewBag を使用してレイアウトの表示制御
Bootstrapグリッドシステム でレスポンシブデザイン
jQuery でインタラクティブな機能を実装

実践演習問題

理解を深めるために、以下の演習に取り組んでみてください：

演習 1: 新しい部分ビューの作成

_FooterMenu.cshtml という部分ビューを作成
フッターメニューに「お問い合わせ」「利用規約」「プライバシーポリシー」のリンクを配置
メインレイアウトでこの部分ビューを呼び出し

演習 2: ViewBagを使ったスタイル制御

ViewBagを使ってページごとに背景色を変更する機能を実装
ViewBag.BackgroundColor でCSSクラスを切り替え
複数のページで動作確認

演習 3: セクション機能の活用

@RenderSection("PageScript", false) をレイアウトに追加
各ページで固有のJavaScriptを@section PageScript内に記述
ページ固有の機能を実装

トラブルシューティング

よくあるエラーと解決方法

エラー	原因	解決方法
`部分ビューが見つかりません`	パスの間違い	フルパスで指定：`/Views/Shared/_Menu.cshtml`
`ViewBagの値がnull`	コントローラーで設定忘れ	コントローラーでViewBag設定を確認
`Layout が適用されない`	Layout指定の問題	`Layout = "~/Views/Shared/_Layout1.cshtml";`
`CSSが効かない`	パスの問題	絶対パス使用：`/Content/Site.css`

UserManagementSystemプロジェクト内の参考ファイル

Views/Shared/_Layout1.cshtml - メインレイアウト例
Views/Shared/_LeftMenu.cshtml - 左メニュー例
Views/FindUser/Find.cshtml - 独立画面例
Controllers/AuthenticationController.cs - ViewBag設定例

このマニュアルを参考に、統一された見た目と使いやすさを持つWebアプリケーションを作成してください。継続的な学習と実践により、より高度なWebアプリケーション開発スキルを身につけることができます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

ASP.NET MVC 共通ビュー作成マニュアル

ASP.NET MVC 共通ビュー作成マニュアル

目次

概要

使用技術

共通化の基礎知識

なぜ共通化が必要なのか？

ASP.NET MVCの共通化機能

ViewBagの詳細解説

ViewBagとは？

基本的な使い方

コントローラー側（データを設定）

ビュー側（データを取得・使用）

ViewBagを使ったレイアウト制御の実例

ViewBagの注意点

@Html.Partialの詳細解説

@Html.Partialとは？

基本的な使い方

1. シンプルな部分ビューの呼び出し

2. モデルを渡す部分ビューの呼び出し

UserManagementSystemでの実例

左メニューの呼び出し

トップメニューの呼び出し

検索結果の呼び出し

部分ビューの作成手順

ステップ 1: 部分ビューファイルの作成

ステップ 2: メインビューで部分ビューを呼び出し

部分ビューの種類と特徴

@Html.Partialの注意点

@RenderBody()の詳細解説

@RenderBody()とは？

基本的な仕組み

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

個別ページ（Index.cshtml）

結果として生成されるHTML

UserManagementSystemでの実例

レイアウトファイルでの@RenderBody()使用

@RenderBody()と@RenderSection()の違い

@RenderSection()の例

@RenderBody()の注意点

メインレイアウトの作成

ステップ 1: レイアウトファイルの作成

ステップ 2: レイアウト用CSS の定義

ステップ 3: ボディ部分の実装

左メニューの作成

ステップ 1: 左メニューファイルの作成

ステップ 2: 左メニューのスタイリング

トップメニューの作成

ステップ 1: トップメニューファイルの作成

ステップ 2: トップメニュー用CSS

ユーザー検索画面への適用

ステップ 1: 共通レイアウトを使用しない独立画面の作成

ステップ 2: 独自スタイルの定義

ステップ 3: 画面構造の実装

ステップ 4: JavaScript の実装

共通レイアウトを使用する場合の画面作成

ステップ 1: レイアウトを使用するビューの作成

ステップ 2: コントローラーでのViewBag設定

よくある問題と解決方法

問題 1: 左メニューが表示されない

問題 2: CSSが適用されない

問題 3: JavaScript が動作しない

まとめ

重要なポイント:

実践演習問題

演習 1: 新しい部分ビューの作成

演習 2: ViewBagを使ったスタイル制御

演習 3: セクション機能の活用

トラブルシューティング

よくあるエラーと解決方法

UserManagementSystemプロジェクト内の参考ファイル