【ASP.NET Core】共通レイアウト

  • このエントリーをはてなブックマークに追加

ASP.NETアプリの既定レイアウトで、「Views / Shared」フォルダ内にあります。既定レイアウトとはアプリのビューのテンプレートです。どのビューでも(画面を移動しても)常にヘッダーを表示させたい場合など、_Layout.cshtmlを用いてヘッダーを定義することでコードの重複を減らすことができます。

  1. _Layout.cshtmlとは
  2. @RenderBody()
  3. cssファイル読み込み
  4. jsファイル読み込み
  5. 個別でレイアウトを変えたい場合

 1. _Layout.cshtml

画像に alt 属性が指定されていません。ファイル名: image-1.png

_Layout.cshtmlとは、ASP.NET Core Webアプリ作成後にでき、サイト全体で利用されるレイアウトファイルのことです。
以下が_Layout.cshtmlの中身です。

  2. @RenderBody()

画像に alt 属性が指定されていません。ファイル名: image-3.png

「@RenderBody()」と記述された領域に、個別に作成したビューが実行時に埋め込まれます。

画像に alt 属性が指定されていません。ファイル名: image-6.png

適用するレイアウトファイルを決めているのは「Views / _ViewStart.cshtml」です。

Layoutプロパティを用いて、適用するレイアウトを指定することが出来ます。デフォルトで_Layout.cshtmlのレイアウトが適用されます。(全ての個別ビューのレイアウトに_Layout.cshtmlが適用される)

  3. cssファイル読み込み

サイト全体で再利用されるcssを_Layout.cshtmlで定義します。ビュー作成の度に共通でcssを定義する必要がなくなります。

※読み込む順番
先に定義したcssから適用されるため、bootstrapなどのライブラリ系を自作のcssより前に定義する必要があります。

環境タグヘルパー

ホスティング環境が開発か本番かによって、読み込むcssファイルを切り替える事が出来ます。下記の場合は、開発環境のときcssファイルを、開発環境以外(本番環境)のときmin.cssファイルを読み込んでいます。

個別に作成したビューでcssファイルを読み込む

_Layout.cshtmlに下記のコードを追加します。第2引数のrequied: trueの場合、作成したビューで必ずcssファイルを読み込むセクションを指定する必要があるということです。cssファイルを読み込まないビューを1つでも作成する場合はrequied: falseにします。

個別に作成したビューのみで使用するcssファイルは、下記のようにそれぞれのVビュー内で指定します。

  4. jsファイル読み込み

サイト全体で再利用されるjsを_Layout.cshtmlで定義します。ビュー作成の度に共通で使用するjsを定義する必要がなくなります。

※読み込む順番
先に定義したjsから適用されるため、bootstrapなどのライブラリ系を自作のjsより前に定義する必要があります。

cssと同様、jsもホスティング環境によって読み込むファイルを切り替えることができます。また、個別に作成したビューでのみ使用するjsも、下記のように個別のビュー内で読み込むことができます。

  5. 個別でレイアウトを変えたい場合

Layoutプロパティを利用すれば、作成したビュー内で、個別にレイアウトを指定することができます。(画面ごとにレイアウトを変えたい場合に利用)
「View/Shared」フォルダ内に”_Layout2.cshtml”を作成しました。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*