SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Scott Guthrie氏 Blog翻訳

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

連載:ScottGu's Blog翻訳


  • X ポスト
  • このエントリーをはてなブックマークに追加

 以下は、上記のサイトを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が統一されているようにするため)。

次のページ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Scott Guthrie氏 Blog翻訳連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Scott Guthrie(Scott Guthrie)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5685 2011/01/24 17:12

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング