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)