Visual BasicとASP.NETでマスターページを作成する方法
ASP.NETでWebアプリケーションを開発するうえで、よく利用される手法のひとつがマスターページの活用です。
マスターページはWebサイトの土台となる部分でもありますので、理解を改めて深めてみましょう。
- SE
- マスターページって呼ばれるくらいですから、なんだかすごく重要な役割を担ってそうですね。簡単に作成できるものなのでしょうか？
- PM
- 作成自体は簡単にできますよ。しかし、マスターページはとても大事なページです。システムやプログラミングに詳しい方が主に作成するところでもありますね。
実行環境
・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;
}
|
これでヘッダー、サイドメニュー、フッターを一元管理することが可能になりました。
後から変更があった場合でもマスターページだけ修正すれば、すべてのページに反映させることができます。
- SE
- 作成自体は本当に簡単にできますね。ここからWebサイトのテンプレートとなる大事な箇所をコーディングしていくわけですね。まずは自分でやってみます！
- PM
- そうですね。マスターページの入れ子などの技法を使うと、よりマスターページがどれほど重要になってくるのか、分かるかもしれませんよ。
マスターページの作成は初めに行いましょう
マスターページはWebアプリケーションを開発するための土台となる部分だと言えます。まずは、マスターページを作成してWebサイトの基盤を準備してから、他のWebページを作成していくことをおすすめします。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
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万円東京都港区(品川駅)