アプリケーション共通のデザインを定義する(レイアウト)

アプリケーション共通のデザインを定義する(レイアウト)


【レイアウトの作成】

デフォルトだとレイアウトは_Layout.vbhtmlを使用するが、自作することもできる。
フォルダ右クリック→[追加]→[MVC5レイアウトページ(Razor)]
レイアウトのファイル名は、「_」で始まるように命名する。

【レイアウト適用の優先順位】

レイアウトは複数作成して使い分けることができる。
レイアウト適用の優先順は、
1.アクション単位 → 2.ビュー単位 → 3.アプリケーション共通

①アクション単位にレイアウトを設定

アクションメソッドからレイアウトを以下の形式で設定することができる。
View(“ビュースクリプト”,”レイアウト”)
[コントローラー]

②ビュー単位にレイアウトを設定

個別のビューでLayoutプロパティにレイアウトのファイルパスを設定
[ビュー]

また、特定のビューでレイアウトを適用しないようにすることもできる。
LayoutプロパティにNothingを設定するだけ。
[ビュー]

③アプリケーション共通のレイアウトを設定

Razorでは、個別のビューの処理の前にViews\_ViewStart.vbhtmlを呼び出す。

アプリケーション共通のレイアウトを変更したい場合、Layoutプロパティを修正するだけでいい。
ちなみに、_ViewStart.vbhtmlではレイアウトの指定だけではなく、ビューでやるべき初期処理
を実行できる。
 

【レイアウトに複数のコンテンツ領域を設置】

レイアウトでは@RenderBody()でメインのコンテンツ領域を表す。
個別のビュースクリプトの内容は、@RenderBody()の箇所に埋め込まれる。

ひとつのレイアウトで複数のコンテンツ領域を設定したい時に利用できるのがRazorのセクション機能。
@RenderSection(“セクション名”,[セクションが必須かどうか])をレイアウトに設置することで、
個別のビューで@sectionブロックに記載した内容が@RenderSection()の箇所に埋め込まれる。
以下はレイアウトで2つのセクション(“scripts”と”scripts2”)を設置し、個別ビューでそれぞれ
定義した例

[_Layout.vbhtml]

[個別ビュー]

arrow_down
[出力結果(HTML)]

※ @RenderBody()には、個別ビューの@sectionブロックを除いた部分が埋め込まれる

【レイアウトを入れ子に配置】

レイアウトは入れ子にできる。
例えばヘッダーとフッターはサイトで一本化するが、サイドメニューはカテゴリごとに分けるといった
場合などに、ヘッダーとフッターは親レイアウトに記載し、サイドメニュー部分は子レイアウトに記載する。
以下は、標準(親)レイアウト(_Layout.vbhtml)と個別のビューの間に子レイアウトをかました例。

[親レイアウト(_Layout.vbhtml)]

[子レイアウト(_ChildLayout.vbhtml)]

[個別ビュー(about.vbhtml)]

arrow_down
[出力結果(画面)]
28
[出力結果(HTML)]

子レイアウトで親レイアウトをLayoutプロパティで指定し、個別ビューで子レイアウトをLayoutプロパティで
指定している。
これにより、「個別ビュー→子レイアウト→親レイアウト」のレイアウト構造ができる。