本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。
ASP.NET MVC 3:Razorのレイアウトとセクション
この投稿は、ASP.NET MVC 3ベータ版/RCの新機能を、いくつか詳細に紹介していく『ミニ投稿』シリーズの1つです。
- Razorの紹介(7月2日)
- Razorの@model新キーワード(10月19日)
- Razorでのレイアウト(10月22日)
- Razorでサーバーサイドのコメント(11月12日)
- Razorの@:と文法(12月15日)
- Razorで暗黙的、明示的コードナゲット(12月16日)
- Razorのレイアウトとセクション(本日)
本日の投稿では、Razorでのレイアウトページの動きについて、より詳細にご紹介します。具体的には、レイアウトファイルの中に、複数ある、隣接していない置換可能な『セクション』を持つ方法、そして実行時にレイアウトに基づいたビューに対して、オプションでそれらの『セクション』を『埋め込む』方法に関する解説です。これを行うRazorの文法はクリーンで簡潔です。
また、特定のレイアウトセクションが定義されているかどうかを実行時にチェックする方法や、ビューテンプレート内でセクションが指定されていない場合に、代替えのコンテンツ(または代替えのレイアウトも)を提供する方法も紹介します。これにより、強力かつ簡単な方法でサイトのUIのカスタマイズが可能になり、実装の観点からクリーンでDRYなものにできます。
レイアウトとは?
通常、Webサイト/アプリケーション内では、全てのページに統一感のある見た目と操作性を心がけていると思います。ASP.NET 2.0では『マスターページ』の概念を導入し、.aspxベースのページまたはテンプレートを使用することで、これを可能にしました。Razorもこの概念を『レイアウト』と呼ばれる機能でサポートしており、そのため共通のサイトテンプレートが定義でき、サイト上のすべてのビュー/ページに渡って、その見た目と操作性が継承されます。
以前、ASP.NET MVC 3:Razorでのレイアウトというブログ投稿で、Razorでのレイアウトファイルについて、基礎的な動作を説明しました。本日の投稿では、複数の隣接していない置換可能な領域をレイアウトファイルの中で定義して、それを実行時にオプションで『埋め込む』方法について、さらに深く話したいと思います。
サイトのレイアウトシナリオ
では、ASP.NET MVC 3とRazorを使った共通のサイトレイアウトのシナリオを実装してみましょう。具体的には、すべてのページで共通するヘッダーとフッターを持つサイトのUIを実装します。また、共通のサイトレイアウトの右側に『SideBar』セクションも追加します。
いくつかのページ上で、サイドバーをカスタマイズして、それが含まれるページには特有のコンテンツを表示するようにします。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig1.gif)
他の(カスタマイズされたサイドバーコンテンツが無い)ページ上では、『デフォルトのコンテンツ』をサイドバーへ提供します。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig2.gif)
ASP.NET MVC 3とRazorを使って、クリーンで上手な方法によりこのカスタマイズを行います。