CodeZine(コードジン)

特集ページ一覧

ASP.NET MVC 3:Razorのレイアウトとセクション

連載:ScottGu's Blog翻訳

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/01/19 14:00

目次

 以下は、上記のサイトをASP.NET MVC 3とRazorで構築する方法についてのチュートリアルです。

パート 1:『Body』セクションに対して、レイアウトのある新規プロジェクトを作成

 まず、Visual Studioで、[ファイル]-[新規プロジェクト]のメニューコマンドから、新規ASP.NET MVC 3プロジェクトを作成します。『空』(Empty)のテンプレートオプションを使用して、新規プロジェクトを作成します。

caption

 これで、デフォルトのコントローラがある新規プロジェクトができます。

caption

HomeControllerの作成

 新規作成したプロジェクトの『Controllers』フォルダを右クリックして、[追加]-[コントローラ]のコンテキストメニューコマンドを選択します。これにより、『Add Controller』ダイアログが表示されます。

caption

 作成した新しいコントローラに『HomeController』と名前を付けます。[Add]ボタンをクリックすると、Visual Studioは、デフォルトのビューを返す『Index』 アクションメソッドのあるHomeControllerクラスをプロジェクトに追加します。

caption

 このサンプルを実装するのにコントローラのロジックを書く必要はないので、デフォルトのコードのままにしておきます。

ビューテンプレートの作成

 次のステップでは、HomeControllerのIndexアクションメソッドに関連するビューテンプレートを実装します。ビューテンプレートを実装するには、『HomeController.Index』メソッド内で右クリックして、コンテキストメニューで『Add View』コマンドを選択し、ホームページ用のビューテンプレートを作成します。

caption

 これにより、Visual Studioで『Add View』ダイアログが表示されます。

caption

 上記のダイアログで、デフォルトの設定は何も変更する必要ありません(Indexメソッドで『Add View』コンテキストメニューコマンドを実行したので、テンプレートの名前は自動的にIndexに紐づけられます)。

 [Add]ボタンをダイアログでクリックすると、Razorベースの『Index.cshtml』ビューテンプレートが、プロジェクト内の\Views\Home\フォルダに追加されます。では、そのテンプレートへデフォルトの静的コンテンツをいくつか追加しましょう。

caption

 上の画面で、ビューテンプレート内には<html>または<body>セクションが定義されていないことを確認してください。これは、レイアウトテンプレートにそれらの要素を提供させ、それを使ってサイトの共通のサイトレイアウトと構造を定義しようとしているからです(サイト内のすべてのページとURLが統一されているようにするため)。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Scott Guthrie氏 Blog翻訳

もっと読む

著者プロフィール

  • WINGSプロジェクト Chica(チカ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5