.NET TIPS [ASP.NET MVC]ASP.NET MVCでマスター・ページを適用するには?[3.5、C#、VB]山田 祥寛2010/01/07 |
|
|
ASP.NETでは、ヘッダやフッタ、サイド・メニューなどなど、サイト共通のレイアウトをテンプレートとして用意しておき、コンテンツ部分だけをページ単位に切り替えるための仕組みを提供している。そう、ASP.NETを利用している方であれば、恐らくほとんどの方が知っているであろうマスター・ページの機能である。
マスター・ページはASP.NETに導入されてからすでに多くの時間がたっているのと、その大きな有用性から、常用している、すでに手放せないという読者も少なくないはずだ。そして、うれしいことに、このマスター・ページの機能はASP.NET MVCでもASP.NETとほとんど同じ要領で利用できるようになっている。本稿では、その具体的な方法について紹介する。
* マスター・ページそのものについては、「TIPS:[ASP.NET]サイト共通のヘッダ/フッタを一元管理するには?」を参照。 |
なお、本サンプル・プログラムを動作させるに当たっては、「連載:ASP.NET MVC入門 第1回 ASP.NET MVCフレームワーク 基本のキ」で紹介した手順に従って、ASP.NET MVCをインストールし、また、「ASP.NET MVC Web Application」プロジェクトを作成しておく必要がある。
1. マスター・ページを作成する
マスター・ページを新規に作成するには、ソリューション・エクスプローラから「/Views/Shared」フォルダを右クリックし、表示されたコンテキスト・メニューから[追加]−[新しい項目]を選択する。
[新しい項目の追加]ダイアログ | ||||||
マスター・ページのテンプレートを追加する。 | ||||||
|
[新しい項目の追加]ダイアログが表示されるので、画面の要領で必要な情報を入力して、[追加]ボタンをクリックする。テンプレート欄には、このほかにも「マスタ ページ」「入れ子にされたマスタ ページ」テンプレートが存在するが、こちらは従来のASP.NETから利用するためのマスター・ページであるので、間違えないよう注意されたい。
なお、本稿ではマスター・ページを、共有ビューを格納するための「/Views/Shared」フォルダに作成しているが、(必要であれば)ほかのフォルダに保存しても構わない。ただし、後々にアクション・メソッドからマスター・ページを操作する場合には追加のコードが必要になるなど、面倒の元でもある。基本は、マスター・ページは「/Views/Shared」フォルダに配置する、と覚えておくのがよいだろう。
2. マスター・ページを編集する
自動生成されたマスター・ページがコード・エディタ上で開くので、以下の要領で必要最低限のコードを追加しておこう(追記部分は太字で表している)。
|
|
ASP.NET MVC対応のマスター・ページ(MyApp.master) |
ASP.NETのマスター・ページを利用したことがある方ならば、「ASP.NET MVCだからといって特別なことはほとんどない」ことがお分かりいただけるだろう。あえていうならば、マスター・ページがMasterPageクラス(System.Web.UI名前空間)ではなくViewMasterPageクラス(System.Web.Mvc名前空間)を継承している点が異なるが()、これはもともとのテンプレートに含まれる部分なので、アプリケーション開発者が特に意識する必要はないはずだ。
コンテンツの埋め込み先も、ASP.NET同様、ContentPlaceHolderコントロールで表すことができる。デフォルトでは、「TitleContent」(ページ・タイトルの置き場所)、「MainContent」(ページ本体)が配置されているので、通常はそのままで構わない。本稿では、これらに加えて、もう1つ、「ScriptCssContent」というID名でContentPlaceHolderコントロールを配置してみた()。
「ScriptCssContent」は、スクリプト・ファイルやスタイルシートをインポートするための<script>/<link>タグを埋め込むための用途を想定している。本来、スクリプト・ファイルやスタイルシートはマスター・ページの側でインポートしておくべきであるが、ページ固有で利用するスクリプトなどもあるだろう。このようなものは、必要なページでのみインポートするのが望ましい。
3. アクション・メソッドを作成する
コントローラ・クラス、アクション・メソッドの作成方法については、前述の記事で示しているので、そちらを参照していただきたい。ここでは、マスター・ページを呼び出すために、最低限、ビュー・スクリプトを呼び出しているだけのアクションであるので、特筆すべき点はない。コードだけを示しておく。
|
||
マスター・ページをテストするためのアクション・メソッド(上がMasterController.cs、下がMasterController.vb) |
4. マスター・ページ対応のビュー・スクリプトを作成する
Master/Indexアクションに対応するビュー・スクリプトを作成するには、コード・エディタ上でIndexメソッドにマウス・カーソルを合わせた状態で右クリックし、表示されたコンテキスト・メニューから[Add View]を選択すればよい。
[Add View]ダイアログ | |||||||||
ビューを追加して、マスター・ページと関連付ける。 | |||||||||
|
[Add View]ダイアログが表示されるので、画面の要領で必要な情報を入力してほしい。マスター・ページに関係するのは、[Select master page]チェック以降の部分である。[Select master page]欄にチェックを付けて、適用するマスター・ページのパスを指定する。[ContentPlaceHolder ID]欄には、ページ本体を表すContentPlaceHolderコントロールのID値を指定する。マスター・ページを作成した後、自分でID値を変更していなければ、この値はそのままで問題ない。
5. ビュー・スクリプトを編集する
自動生成されたビュー・スクリプトがコード・エディタ上で開くので、以下の要領で必要最低限のコードを追加しておこう(追記部分は太字で表している)。
|
|
マスター・ページを適用したビュー・スクリプト(Views/Master/Index.aspx) |
コードを見ても分かるように、ビュー・スクリプトの側も取り立てて従来のASP.NETと変わるところはない。必要なコンテンツは、Contentコントロールの配下に記述することができる。
ここではマスター・ページの最低限の動作を確認するのが目的であるので、タイトル(TitleContent)とページ本体(MainContent)に文字列をセットし、「ScriptCssContent」については空のままとしておく。
以上の手順を終えたら、サンプルの動作を確認してみよう。
マスター・ページを適用したビュー・スクリプト |
「http://localhost:4419/Master/Index」のようなアドレスでアクセスした結果、上のような結果が得られれば、マスター・ページは正しく動作している(ポート番号の部分は環境によって異なる)。
利用可能バージョン:.NET Framework 3.5 カテゴリ:Webフォーム 処理対象:ASP.NET MVC 関連TIPS:[ASP.NET]サイト共通のヘッダ/フッタを一元管理するには? |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|