Web アプリケーション (ASP.NET) で画面遷移をしてみよう（その4）

.NET 2.0 になって、新しく追加された Master Page を使ってみましょう。
※解説に用いた Visual Studio 2005 の Edition は、Team System Edition です。
サンプルのダウンロード

■Web サイトの作成

Web サイトの作成についてはWeb アプリケーション (ASP.NET) を作ってみようと全く同じなのでここでは割愛します。
※今回は、場所を MyWebApp05 としました。

■Web フォームの追加

まず、Web アプリケーション (ASP.NET) で画面遷移をしてみよう（その1）と全く同じ様な作業を行います。

ソリューションエクスプローラ（IDE 上に無い人は、メニューバーの[表示]→[ソリューションエクスプローラ]で表示させてくださいね）で、
プロジェクトを選択して、右クリックします。
下図のようなコンテキストメニューが表示されます。

[新しい項目の追加]をクリックします。
新しい項目の追加ダイアログボックス
マスタページを選択し、ファイル名は任意で入力して[OK]を押下して下さい。私はファイル名を MasterPage.master としました。

ChildPage.aspx をコードビューで開いて全行を削除し、以下の様に書き換えます。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ChildPage.aspx.vb" Inherits="ChildPage" %>
↓
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="ChildPage.aspx.vb" Inherits="ChildPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

MenuPage.aspx をコードビューで開いて全行を削除し、以下の様に書き換えます。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MenuPage.aspx.vb" Inherits="MenuPage" %>
↓
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="MenuPage.aspx.vb" Inherits="MenuPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

ソリューションエクスプローラは、こんな感じになっているでしょうか。
ソリューションエクスプローラ

■コントロールの配置

Web フォームの追加で追加したフォームに、コントロールを配置します。
コントロールの配置の仕方については、Web アプリケーション (ASP.NET) を作ってみようとほぼ同じなので割愛します。
このような感じでコントロールを配置して下さい。

MenuPage
MenuPage（マスターページのコンテンツ）
ChildPage
ChildPage（マスターページのコンテンツ）

マスターページに画像を配置してみました。
以上の作業の結果、master ファイル及び aspx ファイルは以下の様になりました。

MasterPage.master

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無題のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="Image1" runat="server" AlternateText="ふじこちゃんです" ImageUrl="~/fujiko.jpg" /><br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

MenuPage.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="MenuPage.aspx.vb" Inherits="MenuPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    <asp:Button ID="Button1" runat="server" Text="Button" /><br />
     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>

ChildPage.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="ChildPage.aspx.vb" Inherits="ChildPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>

■コードを入力

MenuPage.aspx.vb 及び ChildPage.aspx.vb は Web アプリケーション (ASP.NET) で画面遷移をしてみよう（その1）で記述したコードと全く同じものを使います。
また、マスターページのコードビハインドには今回はコードを書きません。

■実行しよう！

コードの入力が終わったら、MenuPage.aspx をスタートページに設定します。
ソリューションエクスプローラ上で、MenuPage.aspx を右クリックして、[スタートページに設定]をポイントします。

メニューバーの[デバッグ]→[デバッグ開始]をクリックして実行します。
↓こんな画面が出現しましたか？（上の方の画像はマスタページから出力されています）
最初のページ
まず、TextBox に何も入れないで Button をクリックしてみます。
最初のページエラー表示
↑のメッセージがちゃんと出ましたか？

次に、TextBox に自分の名前を入力して Button をクリックしてみます。
あいさつ表示

上記の通りに動作すれば大成功です。

■参考資料

MasterPage クラス
 ContentPlaceHolder クラス
 Content クラス
 ASP.NET マスターページの概要
 10 行でズバリ !! Web ページの共通化 (マスタページ) (VB)