Visual BasicとASP.NETでマスターページを作成する方法

.NET開発者のためのブログメディア

ASP.NETでWebアプリケーションを開発するうえで、よく利用される手法のひとつがマスターページの活用です。
マスターページはWebサイトの土台となる部分でもありますので、理解を改めて深めてみましょう。

SE: マスターページって呼ばれるくらいですから、なんだかすごく重要な役割を担ってそうですね。簡単に作成できるものなのでしょうか？

PM: 作成自体は簡単にできますよ。しかし、マスターページはとても大事なページです。システムやプログラミングに詳しい方が主に作成するところでもありますね。

ASP.NETにおけるマスターページの役割

ASP.NETでWebアプリケーションを開発するのに重要な役割を担うのが、マスターページです。マスターページを言い換えますと、「Webサイトのテンプレートを定義するページ」になります。

このマスターページをはじめに開発することによって、どのWebページでも固定で表示させたい領域や、Webページ単位で出力させたい領域などのカスタマイズにも柔軟に対応することが可能となります。

固定ページで代表されるのが、ヘッダーやフッター、サイドメニューです。
これらの情報を1枚のページとして作成できるマスターページは、ASP.NETを活用して開発が行われる現場では、よく利用されるアイテムのひとつだと言えます。

マスターページの作成方法と簡単なサンプルソース

まずは、Visual Studioにてマスターページを作成しましょう。今回の開発言語はVisual Basic（以下VB）とします。

ソリューションエクスプローラーにて、プロジェクトのプロパティ項目で右クリックします。「追加」をクリックし、「新しい項目」を選択してください。次に、Webフォームタブにて、Webフォームのマスターページを選択します。ファイル名の拡張子が「.master」であることが確認できたら、「追加」ボタンを押下し、マスターページを作成します。

マスターページ追加

ここからマスターページのサンプルソースを一緒に見てみましょう。
マスターページでは、ContentPlaceHolderコントロールが必須です。通常は自動生成されていますので、削除しないように注意しましょう。それ以外は、概ねaspxファイルと同じように作りこむことができます。

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" Text="master"></asp:TextBox>
        </div>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server" Text="master"></asp:TextBox>

</div>

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>
<%@ MasterType VirtualPath="~/Site1.master" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
</asp:Content>

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="WebForm2.aspx.vb" Inherits="WebApplication1.WebForm2" %>

<%@ MasterType VirtualPath="~/Site1.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div>

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

</div>

<div>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

</div>

</asp:Content>

Public Class WebForm2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        TextBox2.Text = "Webform"
    End Sub

End Class