CodeZine(コードジン)

特集ページ一覧

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

連載:ScottGu's Blog翻訳

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

目次

レイアウトファイルのカスタマイズ

 プロジェクトを新規作成した時に、自動で\Views\Sharedフォルダに追加された、デフォルトの『_Layout.cshtml』を開いてカスタマイズしましょう。

caption

 デフォルトのレイアウトファイル(上記)は、単にタイトルを出力するだけの非常に基本的なもので、(もしコントローラもしくはビューテンプレートに指定されていれば)スタイルシートやjQueryにリンクを追加します。『RenderBody』への呼び出しは、Index.cshtmlファイルのメインとなるbodyコンテンツが、どこにマージされてブラウザへ送られるのかを示しています。

 レイアウトテンプレートを修正して、共通のヘッダー、フッター、サイドバーをサイトに追加しましょう。

caption

 そして、プロジェクトの\Contentフォルダにある『Site.css』ファイルを編集し、そこへ4つのCSSルールを追加します。

caption

 プロジェクトを実行して、プロジェクトのホーム『/』 URLをブラウズすると、以下のようなページが表示されます。

caption

 HomeControllerのIndexビューテンプレートおよびサイトの共有レイアウトテンプレートのコンテンツが、どのように1つのHTMLにマージされているか確認してください。

 以下は、サーバから返された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