SHOEISHA iD

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

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

Scott Guthrie氏 Blog翻訳

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

連載:ScottGu's Blog翻訳


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

 本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。原典:ASP.NET MVC 3: Layouts and Sections with Razor。

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

 本稿は、Scott Guthrie氏のブログを、氏の許可を得て、翻訳、転載したものです。米Microsoft社の副社長で、ASP.NETやSilverlightの開発チームを統率する氏のブログでは、次期製品を含む最新の技術をいち早く紹介しています。

 原典:ASP.NET MVC 3: Layouts and Sections with Razor

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

 この投稿は、ASP.NET MVC 3ベータ版/RCの新機能を、いくつか詳細に紹介していく『ミニ投稿』シリーズの1つです。

 本日の投稿では、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

 他の(カスタマイズされたサイドバーコンテンツが無い)ページ上では、『デフォルトのコンテンツ』をサイドバーへ提供します。

caption

 ASP.NET MVC 3とRazorを使って、クリーンで上手な方法によりこのカスタマイズを行います。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

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

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング