Razor を用いたレイアウト

クラシックな ASP.NET・・・というか、Web フォームを用いた ASP.NET における、マスターページ的な働きをするのは Razor ではレイアウトといいます。

このページでは Razor でレイアウトを利用する方法について説明します。

ここでもやはり "設定よりも規約" という原則に基づき、特定のページ名が必要になったりしますので注意が必要です。

Razor でのレイアウト

Razor ページでは Layout プロパティを指定することによって、レイアウトを指定できます。

レイアウトそのものも Razor ページであり、次のようにかけます。例えばまず、View/Shared フォルダ以下に _Layout.cshtml というレイアウトファイルを用意します。

Razor を用いたレイアウト

RenderBody で指定した箇所に、このレイアウトを利用するファイルのボディー部が挿入されます。 ボディのほかに "セクション" として、複数のコード挿入箇所を指定できるのですが、それについては後述します。

このレイアウトを使うファイルでは、次のようにレイアウトを指定します。

Razor を用いたレイアウト

先頭のコードブロックにて、Layout を指定していますね。レイアウトファイルは Views フォルダ以下の Shared フォルダに配置しているので、 ここで ~/Views/Shared というパスを指定しています。

その結果、最終的に出力される HTML ファイルは次のようになります。

Razor を用いたレイアウト

基本的なことはこれだけです。簡単ですね。

セクションの指定

さて、Web ページを作成していると特定のページは JavaScript は必要ですが、他のページは特に JavaScript が必要ない、とか、 あるいはこのページにだけバナーを表示したい、とか、そういったページ毎のカスタマイズが必ず必要になりますよね。

Razor のレイアウトファイルでも、柔軟に必要に応じてコードを挿入できるような仕組みがあります。

ここでは、スクリプトのインクルード情報をヘッダーに追加する例をみてみましょう。

レイアウトファイルでは、次のように RenderSection メソッドで「セクション」を指定することが可能です。

Razor を用いたレイアウト

このレイアウトを使うほうでは、次のように セクションにはめ込むコードを記述します。

Razor を用いたレイアウト

必須ではない任意のセクションを指定するには、required:false

尚、上記のように指定すると、レイアウトを使用する側でセクションを指定しないとエラーになります。

セクションの記述が任意(あってもなくても良い場合)は次のように、required:false を指定すれば OK です。

Razor を用いたレイアウト

尚、required:false というような書き方は C# 4.0 以降に導入された名前付き引数という書き方です。 C# の名前付き引数については姉妹サイトの 「名前付き引数」をみてください。

ここまでお読みいただき、誠にありがとうございます。SNS 等でこの記事をシェアしていただけますと、大変励みになります。どうぞよろしくお願いします。

© 2024 ASP.NET 入門