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

ASP.NET Visual Basic

.NET
ASP.NET
VB.NET
プログラミング言語

公開日時: 2020-01-20 　更新日時: 2022-06-14

この記事でわかること

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

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

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

実行環境
・Visual Studio 2019（.NET Framework 4.8）

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

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

一般的なWebサイトでは、サイトロゴ、タイトル、サイドメニューなど、どのページでも共通する固定ページが存在します。
これらの共通する部分は、コピー&ペーストで個別のページ（.aspx）にそれぞれ実装することも可能ですが、共通部分に変更が発生した場合に、すべてのページを修正しなければならず非効率です。

ASP.NETのマスターページを利用すると、共通部分の情報を1枚のページとして管理できます。ASP.NETを活用して開発が行われる現場では、よく利用されるアイテムのひとつだといえるでしょう。
マスターページをはじめに開発することによって、どのWebページでも固定で表示させたい領域や、Webページ単位で出力させたい領域などのカスタマイズにも柔軟に対応することが可能となります。

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

まずは、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

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

実行画面
ボタンを押下します。結果としてWebページに設定したテキストボックスに値が設定されます。

ボタン押下

サイトレイアウトの作成

マスターページを作成する方法を確認したところで、次に、すべてのページで共通するヘッダー、サイドメニューを表示するマスターページを作成します。

今回は、次のイメージのようなサイトレイアウトで、マスターページを作成するサンプルコードを紹介します。

前の手順で作成したマスターページ（.master）に、共通のヘッダー、サイドメニュー、フッターの定義を追加しましょう。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication3.SiteMaster" %>

<!DOCTYPE html>

<html lang="ja">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - マイ ASP.NET アプリケーション</title>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
    <form runat="server">
    <!--共通ヘッダー-->
    <header>
      <a href="/">サイトタイトル</a>
    </header>
 
    <!--サイドメニュー-->
    <nav id="left-content">  
      <ul>  
        <li><a href="/">Home</a></li>  
        <li><a href="#">About</a></li>  
        <li><a href="#">Contact</a></li>  
      </ul>  
    </nav>
 
    <!--メインコンテンツー-->
    <main>
       <asp:ContentPlaceHolder id="MainContent" runat="server">
       </asp:ContentPlaceHolder>
    </main>
 
    <!--共通フッター-->
    <footer>
      フッター
    </footer>
    </form>
</body>
</html>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication3.SiteMaster" %>

<!DOCTYPE html>

<title><%: Page.Title %> - マイ ASP.NET アプリケーション</title>

<webopt:bundlereference runat="server" path="~/Content/css" />

</head>

<body>

<a href="/">サイトタイトル</a>

</header>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<main>

<asp:ContentPlaceHolder id="MainContent" runat="server">

</asp:ContentPlaceHolder>

</main>

フッター

</footer>

</form>

</body>

</html>

スタイルシート（Site.css）には、次のように記述します。

body {
    margin: 0;
}

header {
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    font-size: 20px;
    height: 50px;
    background: #333;
    width: 100%;
}

header a {
    color: #fff;
}

#left-content {
    position: fixed;
    top: 50px;
    left: 0px;
    width: 200px;
    background: #f2f2f2;
    height: 100vh;
}

ul {
    list-style-type: none;
}

li a {
    color: #333;
    font-size: 30px;
}

a {
    text-decoration: none;
}

main {
    background-color: #fff;
    padding: 2vh;
    margin-top: 50px;
    margin-left: 200px;
    min-height: calc(96vh - 100px);
}

footer {
    background-color: #ddd;
    font-size: 15px;
    height: 50px;
    margin-left: 200px;
}

body {

margin: 0;

}

header {

top: 0;

left: 0;

position: fixed;

text-align: center;

font-size: 20px;

height: 50px;

background: #333;

width: 100%;

}

header a {

color: #fff;

}

#left-content {

position: fixed;

top: 50px;

left: 0px;

width: 200px;

background: #f2f2f2;

height: 100vh;

}

ul {

list-style-type: none;

}

li a {

color: #333;

font-size: 30px;

}

a {

text-decoration: none;

}

main {

background-color: #fff;

padding: 2vh;

margin-top: 50px;

margin-left: 200px;

min-height: calc(96vh - 100px);

}

footer {

background-color: #ddd;

font-size: 15px;

height: 50px;

margin-left: 200px;

}

これでヘッダー、サイドメニュー、フッターを一元管理することが可能になりました。
後から変更があった場合でもマスターページだけ修正すれば、すべてのページに反映させることができます。

システム エンジニア: 作成自体は本当に簡単にできますね。ここからWebサイトのテンプレートとなる大事な箇所をコーディングしていくわけですね。まずは自分でやってみます！

プロジェクト マネージャー: そうですね。マスターページの入れ子などの技法を使うと、よりマスターページがどれほど重要になってくるのか、分かるかもしれませんよ。

マスターページの作成は初めに行いましょう

マスターページはWebアプリケーションを開発するための土台となる部分だと言えます。まずは、マスターページを作成してWebサイトの基盤を準備してから、他のWebページを作成していくことをおすすめします。

>>>Visual BasicやASP.NETの案件を探すならFEnet .NET Navi

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

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

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

サイトレイアウトの作成

マスターページの作成は初めに行いましょう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

ASP.NET新着案件New Job

Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】

Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】

営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】

Web受注システム開発/VB.NET/東京都港区/【WEB面談可】

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

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

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

サイトレイアウトの作成

マスターページの作成は初めに行いましょう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

ASP.NET新着案件New Job

Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】

Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】

営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】

営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】

Web受注システム開発/VB.NET/東京都港区/【WEB面談可】

関連記事Related Posts

【ASP.NET入門】ASP.NETとC#で文字列を出力するアプリを作る

ASP.NETでセッションのタイムアウト判定をする方法

【ASP.NET Core入門】ASP.NETとの違いやWebアプリの作成手順

ASP.NETとC#でメッセージボックスを表示する方法

ASP.NETでファイルのダウンロード機能を実装する方法