【T4a】モデルとビューの連携(前編)(4/7)

プロジェクトタイプ	ASP.NET Core Web アプリ(Model-View-Controller)
プロジェクト名	`T4a`
ソリューション名	`PIT4`
ターゲットフレームワーク	.NET 8.0(長期的なサポート)
最上位レベルのステートメントを使用しない	使用する(チェックオフ)

注意

本ページの作業内容は 前のページまでの続き になっていることに注意せよ．
- 先に前のページまでをすべて読み，指示されている作業を済ませてから本ページを読むこと．
- プロジェクトの作成作業については準備作業を参照せよ．

4a-4. レイアウトページ

前節までで単純にプロジェクトを作成したはずであるが，この方法で作成したプロジェクトではレイアウトページを使った構成となる．詳しい説明はテキストに譲るがその概要について簡単にここで触れておこう．前章までの構成方法ではひとつひとつのビュー(.cshtml)にHTMLのすべての内容を書き込んでいた．たとえばチュートリアル【T1c】のFoo/CalcBMI.cshtmlを _に再掲する．

Foo/CalcBMI.cshtmlへの追記内容(再掲)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CalcBMI</title>
</head>
<body>
    <h1>今見てるのは FooコントローラのCalcBMIアクション</h1>

    <h2>BMI計算機</h2>

    <form method="POST">
        体重(kg): <input type="number" name="weight" min="1" step="0.1" required /><br />
        身長(cm): <input type="number" name="height" min="1" step="0.1" required /><br />
        <input type="submit" value="送信" />
    </form>
</body>

</html>

ここまで学んできたように，Razorページ(.cshtml)はウェブブラウザに送り返されるHTMLのひな型となるものである．Razer構文の@ではじまるディレクティブはサーバー側で処理され，クライアントに送り返されるのはプレーンなHTMLファイルとなる．ウェブブラウザがHTMLファイルをウェブページとして正しく表示するためにはこのHTMLが<!DOCTYPE html><html>から</html>まで正しく記述されている必要があるが，ひとつのサイトを構成するページ群ではこの記述は共通する部分も多い．たとえばページ内容のほとんどは body 要素内に含まれており，それ以外の部分はいわばページの外枠─そのページやサイトについてのメタ情報の記述など─ であってページごとに変更する必要がある部分は少ない．このため ASP.NET Core にはページの外枠とページ内容を別個に管理することができるレイアウトページという仕組みが用意されている．

レイアウトページを使ったRazorページの構成方法では，ひとつのビューは主に以下のファイルで構成される．

_Layout.cshtml
_ViewImports.cshtml
_ViewStart.cshtml
各コントローラのビュー用の.cshtmlファイル

プロジェクト作成時に「ASP.NET Core Web アプリ (Model-View-Controller)」のテンプレートを選択した場合， _Layout.cshtml，_ViewImports.cshtml，_ViewStart.cshtmlの3つのファイルが，プロジェクト内のViewsフォルダ以下に初めから追加された状態となっている(_)．

_Layout.cshtml はHTML全体の外枠となる.cshtmlファイルである．<!DOCTYPE><html>から</html>までの，いわば外枠となる部分はこのファイルに記述する．このファイルには@RenderBody()というディレクティブが含まれており，この部分が「各コントローラのビュー用の.cshtmlファイル」に書き込んだ内容に置き換えられる．_ViewImports.cshtmlと_ViewStart.cshtmlは「各コントローラのビュー用の.cshtmlファイル」の先頭に様々な共通設定を挿入するためのファイルである．これらの関係を_にまとめる．まずこれらのファイルの関係を把握しておこう．

デフォルトで作成されるこれらのファイルにはかなり余計な内容が含まれているので取り除いて見通しをよくしておくことにする． Views/Shared/_Layout.cshtmlを開き_のように書き換えよう．

_Layout.cshtmlの変更箇所

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - T4a</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    @* ① ヘッダー *@
    <header>
        <h1>@* サイトタイトル *@</h1>
    </header>

    @* ② ナビゲーション *@
    <nav>
        @* いまのところは空にしておく *@
    </nav>

    @* ③ メインコンテンツ *@
    <main>
        <h2>@ViewData["Title"]</h2>
        @RenderBody()
    </main>

    @* ④ フッター *@
    <footer>
        &copy; @DateTime.Today.Year - Iryo Taro
    </footer>

    @* そのほか *@
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>

</html>

①～④の header 要素， nav 要素， main 要素， footer 要素は，名前以外は div 要素と同じものである．それぞれページのヘッダー，ナビゲーション(リンク集)，メインコンテンツ，フッターに対応する意味付けを持つ．これらの要素はページレイアウトの基本なので覚えておこう．③の main 要素内に @RenderBody() というディレクティブが含まれていることに着目しよう．前述したとおり，この部分が各コントローラーの各ビュー用の .cshtmlに書いた内容で置換される．

@* サイトタイトル *@の部分には適当なタイトルを入れておこう．サイト全体のタイトルはあちこちで使用するので変数や設定ファイルに格納しておく方法もあるが，ここでは決め打ちで書きこんでおくことにする．以降の例では チュートリアルT4a という文言を入れておくことにする(_)．

サイトタイトル

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
    ....
</head>
<body>
    @* ① ヘッダー *@
    <header>
        <h1>チュートリアルT4a</h1>
    </header>

    @* ② ナビゲーション *@
    <nav>
    
    @* ..(以下略).. *@

また表示の調整のために wwwroot/css/site.css の末尾に_を追記しておこう．

wwwroot/css/site.cssの追記内容

1
body { padding : 1em; }

以上で準備完了である．次節から本題の説明に入る．

Last updated on 2024-04-24
Published on 2024-04-24