Codable Tech Blog

iPhoneアプリケーション開発と AWS(Amazon Web Service)活用に関する記事を配信

Razor レイアウト

レイアウト

Razorではレイアウト機能が提供されています。レイアウト機能とはあらかじめページ全体のテンプレートを作成しておいて、そのテンプレートをWebサイト全体で共有して利用する機能です。レイアウト機能を利用することによって、サイトで利用している全てのページに統一感をもたせることが出来ます。また、レイアウト機能を利用してページ全体のレイアウトを一箇所で管理しておくことは、修正や変更が発生した場合に変更箇所を一つに留めることを可能にします。

レイアウト機能を利用した場合の簡単な流れ

レイアウト機能を利用した場合、どのように処理が進むのかをまずは知っておきましょう。ここではindex.cshtmlを表示する場合を例にとって流れを説明します。

  1. ブラウザがサーバーにページをリクエストします。
  2. ~/Views/_ViewStart.cshtmlが読み込まれます。Layoutプロパティに~/Views/Shared/_Layout.cshtmlが代入されます。
  3. 次の手順で使用する_Layout.cshtmlが必要とする変数を事前に用意するためにindex.cshtmlの一部分が処理されます。
  4. Layoutプロパティに指定されているファイルの内容を出力します。ここでは~/Views/Shared/_Layout.cshtmlの内容が出力されます。
  5. _Layout.cshtmlの中にある@RenderBody()に到達した時、index.cshtmlの内容を出力します。
  6. index.cshtmlの出力完了後、_Layout.cshtmlの残り部分を出力します。
  7. サーバーがブラウザにレスポンスを返します。

@RenderBody()はユーザーに要求されたコンテンツを出力する関数になります。上記の例では要求されているコンテンツはindex.cshtmlですのでindex.cshtmlの内容を出力します。

レイアウト機能を利用する

上記に記載した流れを踏まえてレイアウト機能を利用したページを作成してみます。

レイアウトファイルを作成

レイアウトファイルはプロジェクトのSharedディレクトリに配置するのがルールです。
Sharedディレクトリ上で右クリックし、Add > MVC5 Layout Page (Razor)を選択します。
f:id:codable:20150220180159p:plain
f:id:codable:20150220180203p:plain
今回はレイアウトファイルの名前を_MyLayoutにします。
f:id:codable:20150220180206p:plain
次のようなデフォルトのレイアウトファイルが出来上がります。

今回はこのレイアウトファイルをいじらず、そのまま利用します。

レイアウトの適用

_ViewStart.cshtmlのLayoutプロパティに手順1で作成したレイアウトファイルを設定します。

これで全てのファイルに手順1で作成したレイアウトが適用されます。

コンテンツ作成

レイアウトのRenderBodyが実行されるタイミングで差し込まれるコンテンツを作成します。また、手順1で作成したレイアウトファイルはViewBag.Titleの値も参照します。ViewBag.Titleの値を決定するのもコンテンツファイルの役割です。

セクション

RenderBodyは一つのレイアウトにつき、一つしかもつことが出来ません。次に示すように異なる別々の内容をレイアウトファイルに取り込みたい場合はどうすればよいでしょうか。

こういった時に利用するのがRenderSectionです。RenderSecionを利用することによって、異なる別々の内容をレイアウトファイルに取り込むことができます。

レイアウトファイルに@RenderSection("セクション名")と記述することでセクション名に対応した内容を取り込むことができます。セクションに取り込む内容はコンテンツファイルに@section セクション名{...}の形で記述します。上記の例ではsection1とsection2という2つのセクションの内容を取り込む形で指定されていますので、コンテンツ側で@section section1{...}と@section2{...}の2つのセクションを定義します。

なお、RenderSectionはデフォルトでは必須の処理になります。このため、@RenderSection("セクション名")で指定されているセクション名がコンテンツ側に存在しなかった場合、実行エラーになります。もし、RenderSectionの処理をオプションにしたければ、RenderSectionの第2パラメータにfalseを渡してあげます。こうすることで、RenderSectionの処理をオプションに変更することが出来ます。