現在ログインしていません。
新規アカウント作成
ログイン

ASP.NET Webフォームでヘッダーなど共通UI部品を作る

ASP.NETWebフォームで共通のUI部品を作る一番簡単な方法はユーザーコントロールです。

特にヘッダーフッターなどたいした機能はないけれど多くのページに共通しているような部品は、ユーザーコントロールとして作成して各ページに貼り付けると、変更したいときは大本を一箇所変更するだけで済むので楽です。

ユーザーコントロールを追加するには、ASP.NETのプロジェクトに「Web フォームのユーザー コントロール」を追加します。Visual Studioのバージョンによってこの名前は少し違いますが、拡張子が ascx である点は共通しています。そのため、ユーザーコントロールを「ascxファイル」と呼ぶこともあります。

ButtonTextBoxなどの通常のコントロールツールボックスからドラッグ&ドロップするのですがユーザーコントロールはソリューションエクスプローラからドラッグ&ドロップするのが特徴です。

AddASCX

ユーザーコントロールをプロジェクトに追加すると、通常のWebフォームのようにコントロールをぺたぺた貼り付けてプロパティを設定していくことで共通部品をデザインできます。VBC#でプログラムを書くこともできます。

できあがったユーザーコントロールを他のページに配置するには、ソリューションエクスプローラーから、Webフォームのデザイン画面にそのユーザーコントロールをドラッグ&ドロップします。

ヘッダーのように横に広がるユーザーコントロールを作る

手順

ためしにヘッダーをユーザーコントロールとして作る簡単な手順を紹介します。

1. まず、プロジェクトにPageHeader.ascxという名前でユーザーコントロールを追加します。 2. 次に、PageHeader.ascxをデザイナーで開き、次のように記述します。 1行目の <%@ の行は自動生成されているので自分で書く必要はありません。プロジェクトの名前や開発言語によって1行目は少し違う場合もあります。

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="PageHeader.ascx.vb" Inherits="WebApplication6.PageHeader" %>
<div class="pageHeader">
<p>ヘッダー</p>
<p>あいうえお</p>
</div>
■リスト1:

div要素にpageHeaderというクラス名がついているのがポイントです。後でCSSを使ってこのクラスのデザインを指定します。

HTMLを自分で書く代わりにマウスを使ってぺたぺた部品を貼り付けてプロパティを設定することでデザインすることもできます。

3. 終わったら、背景色と横幅を設定します。プロジェクトを右クリックして、追加 - ASP.NET フォルダーの追加 で Theme を選択してください。App_Themesフォルダーが追加され、その下の項目も自動で追加されます。この項目はテーマと呼びます。テーマには default という名前をつけます。

既にApp_Themesフォルダーがある場合は、既にあるそのフォルダーの下にdefaultというフォルダーを追加してください。App_Themesフォルダーの配下のフォルダーはテーマと呼びます。

4. defaultテーマの下にCSSファイルを追加します。名前は何でもよいです。 CSSファイルには次のように記載します。

.pageHeader{
    background-color: lightseagreen;
    width: 100%;
}
■リスト2:

これでこのCSSと適用すれば、pageHeaderクラスを持つ要素は横に広がり、緑色で表示されることになります。web.configを使ってこのCSSがすべてのページで自動的に適用されるようにしてみましょう。

5. web.configのsystem.web要素内のpages要素styleSheetTheme属性にさきほど作ったテーマの名前であるdefaultを設定します。pages要素がなければ追加してください。

<system.web>
  <compilation debug="true" strict="false" explicit="true" targetFramework="4.6.1"/>
  <httpRuntime targetFramework="4.6.1"/>
  <pages styleSheetTheme="default" />
</system.web>
■リスト3:

なお、styleSheetTheme属性の代わりに Theme属性を使ってもよいです。

6. これで準備は整いました。ヘッダーを配置したいWebフォーム(aspx)をデザイナで開いて、ソリューションエクスプローラーからPageHeader.ascxをページ上部にドラッグ&ドロップしてください。

この例のよいところ

  • 以上の例ではユーザーコントロールとテーマを連動して使用することで、ユーザーコントロールに対してCSSで設定したデザインがデザイン時にも実行時にも自動で適用されるようになります。
  • テーマとweb.configを設定しておけば個別のページでCSSを設定する必要はなく自動で適用されます。
  • 例外的にこのテーマを適用したくないページはページ単位のプロパティで制御できます。
  • 複数のテーマを作っておき、web.configで一括で切り替えることもできます。

類似した技術

マスターページ

ページに同じデザインを適用する目的ではよくマスターページが推奨されます。 しかし、マスターページを適用されたページは通常のページとは少し構造が変わるのと、VBやC#でのプログラムも親クラスとマスターページの使い分けが混乱してくるので私は好きではありません。

Webフォーム サーバーコントロール (カスタムコントロール)

ツールボックスに並んでいるButtonやTextBoxのように自作のコントロールを作成することもできます。これはカスタムコントロールと呼びます。

Visual Studio 2015で見てみるとWebフォーム用のカスタムコントロールを Webフォーム サーバーコントロールと呼ぶようです。以前はカスタムコントロールと表記してあったと思うのですが、いつの間にか呼び名が変わっているようです。

カスタムコントロールとしてヘッダーなどのUI部品を作成すると、ツールボックスに登録して、ツールボックスから貼り付けて使用することになります。

  • カスタムコントロールはユーザーコントロールより難しいです。Webフォームのカスタムコントロールは上級者向けです。
  • 凝った機能が必要な場合にはユーザーコントロールよりカスタムコントロールの方が向いています。
  • デザインをちょこまかちょこまか修正する場合はユーザーコントロールのほうがやりやすいように思います。