パート 2:『SideBar』セクションの追加
現状では、レイアウトテンプレートには、メインの『body』セクションという『セクション』が1つあるだけです。
Razorは、レイアウトテンプレートに『名前付きセクション』を追加する機能もサポートしています。このセクションは、レイアウトファイルのどこででも定義でき(HTMLの<head>セクション内も含む)、最終的に生成されるページの複数の隣接していない領域へ動的なコンテンツを出力できます。
レイアウト内の『SideBar』セクションの定義
レイアウトテンプレートを更新して、HTMLの<div id="sidebar">領域内に描画されるコンテンツの『SideBar』セクションを定義しましょう。これは、以下のように、RenderSection(string sectionName, bool required)ヘルパーメソッドを呼び出すことで行えます。
『RenderSection』ヘルパーメソッドの1つ目のパラメータには、レイアウトテンプレートのその場所に描画したいセクション名を指定します。2つ目のパラメータはオプションで、そのセクションの描画が必要かどうかが定義できます。もしセクションが『必要』な場合、レイアウトファイルに基づいたビューテンプレートにそのセクションが実装されていなければ、実行時にRazorはエラーを投げます。もしセクションが不要な場合、ビューテンプレート内の表示はオプションとなり、定義されていないければ上記のRenderSectionコードは実行時に何も描画しません。
レイアウトファイルへ上記の変更を行ったので、ブラウザの更新ボタンをクリックすると、ホームページは以下のように表示されます。
SideBarの<div>内にコンテンツが何もないことを確認してください。これは、Index.cshtmlビューテンプレートで新しい『SideBar』セクションが実装されていないからです。
ビューテンプレートの『SideBar』セクションの実装
ホームページを変更して、カスタマイズされたコンテンツを出力するSideBarセクションを追加しましょう。Index.cshtmlビューテンプレートを開いて、新しい『SiderBar』セクションを追加します。そして、Razorの@section SectionName{}文法を使います。
ビューテンプレートにどこでもSideBarの@section宣言を定義できます。私としては、ファイルの一番上か下に定義した方がクリーンに見えると思いますが、これは単なる個人の好みです。
@section宣言内にはコンテンツやコードを含められます。上の画面では、SideBarセクションの一番下に現在の時刻を出力するC#コードナゲットがあります。ASP.NET MVCのHTML/AJAXヘルパーメソッドを使ったり、Index.cshtmlビューテンプレートへ引き渡された強く型付けされたモデルオブジェクトへアクセスしたりするコードを書くことも可能です。
上記のテンプレート変更が完了したので、ブラウザの更新ボタンを再度クリックすると、サイトのホームページに指定したSideBarコンテンツが、サーバから送られたページ内に表示されます。
SideBarセクションのコンテンツは、HTML応答の適切な場所へマージされます。