Visual BasicとASP.NETでマスターページを作成する方法
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ファイルと同じように作りこむことができます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ 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>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<%@ 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>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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）に、共通のヘッダー、サイドメニュー、フッターの定義を追加しましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<%@ 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>
|
スタイルシート（Site.css）には、次のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
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ページを作成していくことをおすすめします。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
ASP.NET新着案件New Job
-
Web受注システム運用保守/VB.NET/東京都港区/【WEB面談可】
月給50万～60万円東京都港区(品川駅) -
Web受注システム開発のテスター/VB.NET/東京都港区/【WEB面談可】
月給25万～35万円東京都港区(品川駅) -
営業フロントシステム運用保守/ASP.NET/東京都江東区/【WEB面談可】
月給50万～60万円東京都江東区(木場駅) -
営業フロントシステム開発のテスター/ASP.NET/東京都江東区/【WEB面談可】
月給25万～35万円東京都江東区(木場駅) -
営業フロントシステム開発/ASP.NET/東京都江東区/【WEB面談可】
月給35万～41万円東京都江東区(木場駅) -
Web受注システム開発/VB.NET/東京都港区/【WEB面談可】
月給45万～60万円東京都港区(品川駅)
関連記事Related Posts
-
【ASP.NET入門】ASP.NETとC#で文字列を出力するアプリを作る
ASP.NETは簡単にアプリやWebサイトを作成することができます。 ASP.NETには様々な機能があり、アプリやWebサイトを作成しやすいフレームワークで、これからASP.NETを始めようと考えている方にも扱いやすいの […]
-
ASP.NETでセッションのタイムアウト判定をする方法
ASP.NETで開発を行う場合、セッションを活用してWeb画面間でデータをやり取りすることは多々あります。そして、このセッションにはタイムアウトという概念が存在します。タイムアウトする時間は各々のコーディングで設定できま […]
-
【ASP.NET Core入門】ASP.NETとの違いやWebアプリの作成手順
ASP.NETでアプリケーションを作成する際には、.NET Frameworkが使われてきました。ただ、.NET Frameworkは開発に使用できるOSが限られていて、Windows以外のOSでは開発することができない […]
-
ASP.NETとC#でメッセージボックスを表示する方法
メッセージボックスはコーディング最中の動作確認や、ユーザーへの情報通知など、多様な使い方があります。言語の違いによって、実装方法は多少異なりますが、どの言語でも似たような機能が備わっていることから、使用頻度の高さがうかが […]
-
ASP.NETでファイルのダウンロード機能を実装する方法
ASP.NETとは、C#やVB.NETで開発できるWebアプリケーションのフレームワークです。Webアプリを作成する際に、よく使う機能にファイルのダウンロードがあります。サーバサイドで実装して、ユーザーが使うクライアント […]
