CodeZine(コードジン)

特集ページ一覧

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

連載:ScottGu's Blog翻訳

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

目次

パート 2:『SideBar』セクションの追加

 現状では、レイアウトテンプレートには、メインの『body』セクションという『セクション』が1つあるだけです。

 Razorは、レイアウトテンプレートに『名前付きセクション』を追加する機能もサポートしています。このセクションは、レイアウトファイルのどこででも定義でき(HTMLの<head>セクション内も含む)、最終的に生成されるページの複数の隣接していない領域へ動的なコンテンツを出力できます。

レイアウト内の『SideBar』セクションの定義

 レイアウトテンプレートを更新して、HTMLの<div id="sidebar">領域内に描画されるコンテンツの『SideBar』セクションを定義しましょう。これは、以下のように、RenderSection(string sectionName, bool required)ヘルパーメソッドを呼び出すことで行えます。

caption

 『RenderSection』ヘルパーメソッドの1つ目のパラメータには、レイアウトテンプレートのその場所に描画したいセクション名を指定します。2つ目のパラメータはオプションで、そのセクションの描画が必要かどうかが定義できます。もしセクションが『必要』な場合、レイアウトファイルに基づいたビューテンプレートにそのセクションが実装されていなければ、実行時にRazorはエラーを投げます。もしセクションが不要な場合、ビューテンプレート内の表示はオプションとなり、定義されていないければ上記のRenderSectionコードは実行時に何も描画しません。

 レイアウトファイルへ上記の変更を行ったので、ブラウザの更新ボタンをクリックすると、ホームページは以下のように表示されます。

caption

 SideBarの<div>内にコンテンツが何もないことを確認してください。これは、Index.cshtmlビューテンプレートで新しい『SideBar』セクションが実装されていないからです。

ビューテンプレートの『SideBar』セクションの実装

 ホームページを変更して、カスタマイズされたコンテンツを出力するSideBarセクションを追加しましょう。Index.cshtmlビューテンプレートを開いて、新しい『SiderBar』セクションを追加します。そして、Razorの@section SectionName{}文法を使います。

caption

 ビューテンプレートにどこでもSideBarの@section宣言を定義できます。私としては、ファイルの一番上か下に定義した方がクリーンに見えると思いますが、これは単なる個人の好みです。

 @section宣言内にはコンテンツやコードを含められます。上の画面では、SideBarセクションの一番下に現在の時刻を出力するC#コードナゲットがあります。ASP.NET MVCのHTML/AJAXヘルパーメソッドを使ったり、Index.cshtmlビューテンプレートへ引き渡された強く型付けされたモデルオブジェクトへアクセスしたりするコードを書くことも可能です。

 上記のテンプレート変更が完了したので、ブラウザの更新ボタンを再度クリックすると、サイトのホームページに指定したSideBarコンテンツが、サーバから送られたページ内に表示されます。

caption

 SideBarセクションのコンテンツは、HTML応答の適切な場所へマージされます。

caption

  • 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