SHOEISHA iD

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

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

Scott Guthrie氏 Blog翻訳

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

連載:ScottGu's Blog翻訳


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

パート 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

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

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング