【初心者向け】はじめての ASP.NET Core 作りながら学習(6)- MVC [2] レイアウト編

オウルです。

前回、作成したビューには meta、header タグを記述していないのに、ブラウザ表示した時には、meta、header が生成されています。どういうことでしょうか。その答えは、レイアウトです。

レイアウト

ASP.NET Core MVC では、ページやビューはレイアウト・デザイン(例えば css、html)、コード(例えば javascript)を共有します。

  • 共通のレイアウトを使用
  • ディレクティブを共有
  • ページまたはビューを表示する前に、共通のコードを実行

下図を見るとレイアウトのイメージを掴めるかもしれません。

上記の共有要素をすべて Layout ファイルで定義することで、アプリ内で使用する任意のビューで参照できるようになります。

ASP.NET Core プロジェクト作成時には、既定のレイアウトである _Layout.cshtml ファイルが作成されています。

_Layout.cshtml

ファイル位置

_Layout のコード

ポイント箇所にはコメントを追加しています。列挙すると次になります。

    • @RenderSection(“Scripts”, required: false)
    • @RenderBody()
  • 環境タグ

これら順に紹介します。また、ASP.NET Core 2.2 ではデザインフレームワークとして Bootstrap v4 がデフォルトで導入されています。タグで指定されている class の多くは Bootstrap の class です。

レイアウトの指定

ビューによって複数のレイアウトに切り替え可能です。つまり、自作したレイアウトに切り替えることもできます。

レイアウトの検出

開発当初は、ビューがありませんというエラーが発生するかもしれません。その時に Razor ビュー エンジンの標準の検出プロセスを覚えておくと、エラー解決に役立つ場合があります。レイアウトの検出プロセスと部分ビューの検出プロセスは同じです。

@RenderSection

レイアウトは、必要に応じて RenderSection を呼び出すことで、1 つ以上のセクションを参照することができます。 セクションは、特定のページ要素の配置場所を整理する方法を提供します。 RenderSection の呼び出しごとに、そのセクションを必須またはオプションにするかどうかを指定できます。

ASP.NET Core 若しくは、プログラミング初めての人で、この説明を理解できる人はすごく優秀だと思います(僕は無理かな)。

コードをよく見る方が、イメージが掴めるかもしれません。

@RenderSection(“Scripts”, required: false)

第1引数に “Scripts” 、第2引数に required: false 、つまり、スクリプトをレンダリングするセクション + 必須ではない(無くてもエラーにならない)ということです。そのままですけど。。。

今、よくわからなくても、安心してください。javascript の実装が必要なビューを作成すると、あーなるほど!となりますから。一応、公式サイトにサンプルがあったので載せておきます。

上記の View コードが、_Layout.cshtml の @RenderSection 埋め込まれるイメージです。

また、なぜ @RenderBody() の後のこの位置に @RenderSection(“Scripts”, required: false) を配置するのか、Web 初心者の方には結構重要だったりします。その辺りは、次回以降でビューを作成するときに触れたいと思います。

@RenderBody()

すべてのレイアウトで RenderBody を呼び出す必要があります。 RenderBody への呼び出しが配置されると、ビューのコンテンツがレンダリングされます。

「レイアウトの指定」での View コードが、_Layout.cshtml の @RenderBody 埋め込まれるイメージです。

まだ、僕は見れていないですが、このあたりのソースが RenderBody に関係するところでしょうか。

environmentタグ

環境タグ ヘルパーは、現在のホスティング環境に基づき、囲まれたコンテンツを条件付きで表示します。 環境タグ ヘルパーの 1 つの属性 names は、環境名のコンマ区切りリストです。 指定された環境名のいずれかが現在の環境と一致する場合、囲まれたコンテンツが表示されます。

指定する name は、一般的に「Staging」「Production」「Development」です。

Staging、Production

例えば、トランスパイル済 + バンドル済の javascript の読み込み

Development

Development では、デバッグがしやすいバンドル前の javascript の読み込み

「Staging」「Production」「Development」については、↓ で紹介しています(ASP.NET Core で複数の環境を使用)

プライマリ スクリプト ファイルの指定

environmentタグを使用して、下記のようにプライマリ スクリプト ファイルの指定することができます。

Content Delivery Network (CDN) が使用できない場合は、asp-fallback-src でプライマリ側でエラーが発生した場合にフォールバックするスクリプトタグの URL を指定します。その場合、ローカルのスクリプトを指定することが多いと思いますが、asp-suppress-fallback-integrity=”true” にすることにより整合性チェックをバイパスできます。

次回から、実装に戻ります。

また、本格的にビュー実装に入るにあたり、webpack + Babel + TypeScript のインストール・設定を近々紹介する予定です。

↓ webpack + Babel + TypeScript の環境を作りました。これでレガシーブラウザも怖くない!
「はじめての ASP.NET Core」シリーズ
  1. 作りながら学習
  2. プロジェクト作成
  3. AI 支援 IntelliCode
  4. NLog
  5. MVC(1)
  6. MVC(2)レイアウト
「【初心者向け】ASP.NET Core Identity」シリーズ
  1. ASP.NET Core Identity の2要素認証と Identity を使わない Cookie 認証 – 概要編
  2. ASP.NET Core Identity 構成編

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA