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

作成のイメージ

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

2020年01月20日

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ファイルと同じように作りこむことができます。

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

実行画面

ボタン押下

実行画面(ボタン押下)

サイトレイアウトの作成

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

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

マスターページのレイアウト

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

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

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

SE
作成自体は本当に簡単にできますね。ここからWebサイトのテンプレートとなる大事な箇所をコーディングしていくわけですね。まずは自分でやってみます!
PM
そうですね。マスターページの入れ子などの技法を使うと、よりマスターページがどれほど重要になってくるのか、分かるかもしれませんよ。

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

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags

Jobs