サンプル コードのダウンロード (aspnettips_MasterPage.msi, 230 KB)

※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

Web サイトのメニュー、ヘッダ、フッタの部分をテンプレートにして、各ページで統一すれば、ユーザーの操作性を向上できます。ASP.NET 2.0 では、マスターページを使って簡単にテンプレートの機能を実現できます。

従来の ASP.NET では、このようなテンプレートの機能を、ユーザー コントロールで実現していました。しかし、各ページにユーザー コントロールをひとつひとつ貼り付ける必要があり、手間がかかりました。また後からユーザー コントロールを追加する場合、各ページの修正が必要でした。ASP.NET 2.0 では、マスターページを用意することで、後から簡単にテンプレートを変更できます。

試しに、次のような 2 つのページを作ってみます（図1）。これらのページには、共通して画像、カレンダー、2 つのハイパーリンクがあります。

今回は、次の手順でマスターページを使ったページを作成します。

1. マスターページのファイルを作成

2. マスターページの中身を作成

3. 各 Web ページをファイルを作成

4. 各 Web ページの中身を作成

5. マスターページ上のコントロールへのアクセス

6. 実行

(1) マスターページのファイルを作成

最初に、テンプレートになるマスターページを作成します。Web サイトのプロジェクトを新規に作成した後、メニューバーから [新規作成] - [ファイル] を選択し、「新しい項目の追加」ダイアログボックスで [マスタ ページ] を選択します（図2）。ファイル名は、MasterPage.master にします。

(2) マスターページの中身を作成

マスターページには、ContentPlaceHolder コントロールを配置する必要があります（図3）。ContentPlaceHolder コントロールは、各ページごとに異なるコンテンツが入る場所です。

ContentPlaceHolder コントロール以外のところが、各ページ共通のテンプレートになります。今回は、1 行 2 列のテーブルを用意し、右側の列の所に ContentPlaceHolder コントロールを配置しました。図4 のようなテンプレート・デザインです。

テーブルの上側に Image が 1 つあります。テーブル左列にはカレンダーと 2 つのハイパーリンクを配置しました。2 つのページへ自由に移動できるように、ハイパーリンクのプロパティは次のようにしておきます。

(3) 各Webページのファイルを作成

マスターページをテンプレートとして使う Web ページ (aspx ファイル) を作成します。メニューバーから [新規作成] - [ファイル] を選択し、「新しい項目の追加」ダイアログボックスで [Web フォーム] を選択します。そして、ダイアログ内の [マスタ ページを選択する] チェックボックスをチェックします（図5）。この手順で aspx ファイルを 2 つ作成してください。ファイル名は、Page1.aspx と Page2.aspx にします。

次に表示されるダイアログボックスで、使用するマスターページ (MasterPage.master) を選択します。

(4) 各 Web ページの中身を作成

マスターページを選択して新規作成したページは、テンプレート部分が灰色で編集できないようになっています（図7）。

マスターページで ContentPlaceHolder コントロールを配置した箇所が、こちらでは Content コントロールになっていて、その中にコンテンツを配置できるようになっています。

Page1.aspx では、図8 のようなコンテンツにします。

ボタンを 1 つ配置します。この Text プロパティは「日付」にしてください。あと Label コントロールを 1 つ貼り付けます。ユーザーがこのボタンを押したとき、マスターページ上で選択されているカレンダーの日付が表示されるようにします。また、Page1.aspx をスタートページに設定しておいてください。

Page2.aspx のコンテンツ内は、単に「ページ2」と記述しておきます。

(5) マスターページ上のコントロールへのアクセス

[日付] ボタンを押したときのハンドラを次のようにします。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
    Dim Calendar1 As Calendar = CType(Page.Master.FindControl("Calendar1"), Calendar)
    Label1.Text = Calendar1.SelectedDate.ToShortDateString()
End Sub

リスト 1

(6) 実行

実行してみます。左側の「ページ 1」、「ページ 2」というハイパーリンクをクリックすることで、2 つのページを切り替えることができます。また、カレンダーで日付を選択した後、ページ 1 の [日付] ボタンをクリックすると、選択中の日付が表示されます。

以上のように、ASP.NET 2.0 のマスターページの機能を使うことで、各ページのテンプレートを簡単に作成できます。

ページのトップへ