.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. .NET
  4. ASP.NET
  5. Visual BasicとASP.NETでマスターページを作成する方法

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

  • .NET
  • ASP.NET
  • VB.NET
  • プログラミング言語
公開日時:   更新日時:
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ファイルと同じように作りこむことができます。

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

    実行画面

    ボタン押下

    実行画面(ボタン押下)

    サイトレイアウトの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

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

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

    • 充実した研修制度

      充実した研修制度

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

    • 資格取得を応援

      資格取得を応援

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

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

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

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

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

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

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

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

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    ASP.NET新着案件New Job