SHOEISHA iD

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

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

Scott Guthrie氏 Blog翻訳

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

連載:ScottGu's Blog翻訳


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

パート 3:レイアウトセクション実装時の条件付き検出

 Razorには、ビューテンプレート内にセクションが定義されているかどうかを(レイアウトファイル内から)条件チェックし、定義されていないセクションがあった場合代替えの応答を出力する機能があります。この機能によって、オプションレイアウトセクションのデフォルトUIを簡単に指定できます。

 この機能を活用するために、レイアウトファイルを修正しましょう。以下は、ビューテンプレートを描画せずに『SideBar』セクションが定義されているかどうかを(IsSectionDefinedメソッドを使用して)条件チェックし、もし定義されていればそのセクションを描画します。もしセクションが定義されていなければ、代わりにSideBarのデフォルトコンテンツを描画します。

caption
※注意

 RenderSectionヘルパーメソッドに@文字がプリフィックスとしてついているかどうか確認してください。これにより、Razorが返されたHelperResultを実行して、出力の適切な場所へそのセクションのコンテンツをマージします。

 上の画面で、単にRenderSection("SideBar")ではなく、@RenderSection("SideBar")と書いていることを確認してください。そうでなければ、エラーが発生します。

 上の画面では、セクションが定義されていなかったときは、インラインの静的文字列(<p>Default SideBar Content</p>)だけを描画します。実際には、このデフォルトのコンテンツをリファクタリングして、別のパーシャルテンプレートに保存するか(これをelseブロックでHtml.RenderPartialヘルパーメソッドを使って描画します)、またはHtml.Actionヘルパーメソッドをelseブロックで使用して、そのデフォルトサイドバーのロジックと描画を共にカプセル化することになるでしょう。

 ホームページ上で更新ボタンをクリックすると、前と同じカスタマイズされたSideBarコンテンツのまま表示されます。これは、Index.cshtmlビューテンプレートにSideBarセクションを実装したからです(そのためレイアウトがカスタマイズされたSideBarコンテンツを描画しています)。

caption

 HomeControllerに新しい『About』アクションメソッドを追加して、『/Home/About』URLをサイトに実装してみましょう。

caption

 上記のAboutアクションメソッドは、発生時にクライアントにビューを返して描画するだけです。このアクションに対応するビューテンプレートを実装するには、『About』メソッド内で右クリックして、(前に紹介した例のように)コンテキストメニューの『ビューの追加』メニューコマンドを使って、新しいAbout.cshtmlビューテンプレートを作成します。

 以下のように、About.cshtmlビューテンプレートを実装します。そこで『SideBar』セクションを定義していないことを確認してください。

caption

 /Home/AboutというURLをブラウズすると、上記で提供するコンテンツは応答内のメインbodyセクションに表示され、デフォルトのSideBarコンテンツが描画されます。

caption

 実行時に、カスタマイズされたSideBarセクションが、About.cshtmlビューテンプレートに表示されていないことを検出すると、代わりにデフォルトのサイドバーコンテンツを描画します。

最後の微調整

 仮に、後でデフォルトのサイドバーコンテンツを描画する代わりに、カスタマイズされたサイドバーコンテンツが定義されていないページでは完全にサイドバーを隠すことにしたとします。これは、レイアウトを少し修正するだけで実装でき、SideBarセクションが定義されている場合にのみサイドバーコンテンツが描画されるようになります。このためのコードは以下の通りです。

caption

 Razorは柔軟性があるので、このような変更が可能で、これを達成するためにビューテンプレートの修正(またコントローラやロジックの変更も)は必要ありません。レイアウトファイルを1か所修正するだけで、後はクリーンに修正が全体に適用されます。このような柔軟性が、Razorを非常に強力で生産的なものにしています。

まとめ

 Razorのレイアウト機能により、共通のサイトテンプレートを定義して、サイトのすべてのビュー/ページでその見た目と操作性を継承できます。

 Razorでは、ビューテンプレートにより『埋め込まれる』複数の隣接していない『セクション』を、レイアウトテンプレート内に定義できます。これを行う@section{}文法はクリーンで簡潔です。Razorは、特定のセクションが定義されているかどうかを実行時に動的にチェックして、指定されていない場合は代替のコンテンツ(代替のレイアウトでも)を提供する機能もサポートしています。これにより、サイトのUIを強力かつ簡単な方法でカスタマイズでき、また実装の観点からクリーンでDRYなものにできます。

 Hope this helps,

 Scott

 P.S. ブログに加え、現在Twitterを使って簡単な更新やリンク共有を行っています。twitter.com/scottguで、私をフォローしてください。

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング