以下は、上記のサイトをASP.NET MVC 3とRazorで構築する方法についてのチュートリアルです。
パート 1:『Body』セクションに対して、レイアウトのある新規プロジェクトを作成
まず、Visual Studioで、[ファイル]-[新規プロジェクト]のメニューコマンドから、新規ASP.NET MVC 3プロジェクトを作成します。『空』(Empty)のテンプレートオプションを使用して、新規プロジェクトを作成します。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig3.gif)
これで、デフォルトのコントローラがある新規プロジェクトができます。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig4.gif)
HomeControllerの作成
新規作成したプロジェクトの『Controllers』フォルダを右クリックして、[追加]-[コントローラ]のコンテキストメニューコマンドを選択します。これにより、『Add Controller』ダイアログが表示されます。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig5.gif)
作成した新しいコントローラに『HomeController』と名前を付けます。[Add]ボタンをクリックすると、Visual Studioは、デフォルトのビューを返す『Index』 アクションメソッドのあるHomeControllerクラスをプロジェクトに追加します。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig6.gif)
このサンプルを実装するのにコントローラのロジックを書く必要はないので、デフォルトのコードのままにしておきます。
ビューテンプレートの作成
次のステップでは、HomeControllerのIndexアクションメソッドに関連するビューテンプレートを実装します。ビューテンプレートを実装するには、『HomeController.Index』メソッド内で右クリックして、コンテキストメニューで『Add View』コマンドを選択し、ホームページ用のビューテンプレートを作成します。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig7.gif)
これにより、Visual Studioで『Add View』ダイアログが表示されます。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig8.gif)
上記のダイアログで、デフォルトの設定は何も変更する必要ありません(Indexメソッドで『Add View』コンテキストメニューコマンドを実行したので、テンプレートの名前は自動的にIndexに紐づけられます)。
[Add]ボタンをダイアログでクリックすると、Razorベースの『Index.cshtml』ビューテンプレートが、プロジェクト内の\Views\Home\フォルダに追加されます。では、そのテンプレートへデフォルトの静的コンテンツをいくつか追加しましょう。
![caption](http://cz-cdn.shoeisha.jp/static/images/article/5685/5685_fig9.gif)
上の画面で、ビューテンプレート内には<html>または<body>セクションが定義されていないことを確認してください。これは、レイアウトテンプレートにそれらの要素を提供させ、それを使ってサイトの共通のサイトレイアウトと構造を定義しようとしているからです(サイト内のすべてのページとURLが統一されているようにするため)。