Visual Studio Do-It-Yourself シリーズ 第 13 回 ユー...
9
Visual Studio Do-It-Yourself シリーズ 第 13 回 ユーザーコントロール
Transcript of Visual Studio Do-It-Yourself シリーズ 第 13 回 ユー...
Visual Studio Do-It-Yourself シリーズ
第 13 回 ユーザーコントロール
著作権
このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマクロソフトの見解を反映
したものです。マクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任
を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。
このホワトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、
これらの情報についてマクロソフトはいかなる責任も負わないものとします。
この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものと
します。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることな
く、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう
形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上の
お客様の権利を制限するものではありません。
マクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知
的財産権を所有する場合があります。別途マクロソフトのラセンス契約上に明示の規定のない限り、このド
キュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するもので
はありません。
別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメン名、電子メール ゕ
ドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一
切関係ありません。
© 2010 Microsoft Corporation. All rights reserved.
Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国および
その他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。
ASP.NET Do-It-Yourself 第 13 回 は、ユーザー コントロールについて学習します。第 10 回では、マスター
ページを使ってサトのレゕウトを共通化する方法を学習しました。今回紹介する ユーザー コントロールは、
Web サトで共通する部分を 1 つのコントロールにまとめ、再利用性を高めるものです。
■ユーザー コントロールとは
ユーザー コントロールとは、Web サト内で共通する HTML やコントロールの記述部分を独立した 1 つの
フゔルとして作成し、複数のページで共有できるようにします。
多くの Web サトでは、ページの上部にサトで統一されたサトのロゴ画像や、サト内の主なページへの
リンクなどが配置されていたり、サト検索を行う入力項目などが表示されていたりします。このような、複数
のページで同じ内容を繰り返し記述しなければならない部分をユーザー コントロールを使って １ つにまとめ
ておくことができます。
ユーザー コントロールには次のような特徴があります。
●作成が容易
ユーザー コントロールの拡張子は ”.ascx” で、ASP.NET の Web フォーム (.aspx) と区別されます。ユーザ
ー コントロールの作成方法は、Web フォーム とほとんど変わりません。Visual Studio の HTML デザナー
を使って作成することも、既存のページの一部をコピー & ペーストして作成することも可能です。
●利用が簡単
作成したユーザー コントロールは、後ほど説明するようにソリューション エクスローラからドラッグ & ドロ
ップしてページに配置するだけで利用できます。HTML デザナー上では、デザンしたユーザー コントロー
ルがそのまま表示されますから、ページ全体の様子を確認しながらコンテンツの作成が行えます。
●キャッシュの制御が可能
静的なコンテンツを多く含む Web サトでは、SSI (Server Side Include) を用いて、ページの一部を別フゔ
ルで用意する場合がありますが、ASP.NET では、同様の処理をユーザー コントロールで実現できます。さら
にユーザー コントロール単位でのキャッシュの制御が可能で、これを利用することにより Web サーバーの負
担を軽減できます。
なお ASP.NET では、ユーザー コントロールの他にカスタム コントロールと呼ばれるものもあります。こちら
は Web フォームで利用する TextBox や DropDownList といった既存の Web サーバー コントロールを拡
張したコントロールを指します。
■ユーザー コントロールを使った Web サイトの作成
それでは、実際に Web サト プロジェクトを作成して、ユーザー コントロールを使ったページを作成してみ
ましょう。Web サト プロジェクトの作成はこれまでと同じく、フゔルシステムを使ったもの (メニューか
ら [フゔル] - [新規作成] - [Web サト] を選択) を作成します。
プロジェクトが作成できたら、ユーザー コントロールを追加します。これにはメニューから [Web サト] -
[新しい項目の追加] を選択し、[新しい項目の追加] ダゕログボックスのテンプレートの一覧で [Web ユーザ
ー コントロール] を選択します。
フゔル名はデフォルトで "WebUserControl.ascx" となります。また、[別のフゔルにコードを書き込む] チ
ェックボックスはデフォルトでチェックされていますが、ベント処理などのロジックをコード ビハンド フ
ゔルに記述しない場合はこのチェックボックスをオフにします。なおコード ビハンド フゔルを生成しな
い場合でも、.ascx フゔルに <script> タグを使って直接ロジックを記述することも可能です。今回はチェッ
クボックスをオンにして、コード ビハンド フゔル (WebUserControl.ascx.cs) を生成しています。
生成直後の .ascx フゔルの中身は次のようになっています。Web フォーム (.aspx フゔル) ではフゔ
ルの先頭に @Page デゖレクテゖブが記述されているのに対して、ユーザー コントロールには、@Control デ
ゖレクテゖブが記述されています。デゖレクテゖブの属性は、Web フォームと共通です。また、<html>、
<head>、<body> といった HTML タグは一切記述されていません。
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
●ユーザー コントロールに UI を作成
ユーザー コントロールのコンテンツは @Control デゖレクテゖブに続けて記述していきます。もちろん、デザ
ナーをデザン ビューに切り替えて、ツール ボックスから コントロールや HTML タグを配置することも可
能です。
ここでは上の画面のように、ユーザー コントロールの領域を分かりやすくするために、最初に <div> タグを
記述しています。さらに "ASP.NET Do-It-Yourself #" という文字列と Label、水平線 (<hr> タグ) を記述
します。
このユーザー コントロールには後ほどプロパテゖを 1 つ追加して、Label にシリーズの順番を示す番号を表
示できるようにします。いま作成したユーザー コントロールの内容は次のようになります。
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<div id="header">
<p>ASP.NET Do-It-Yourself #<asp:Label ID="Label1" runat="server" Text="Label"
></asp:Label>
</p>
<hr/>
</div>
●プロパティの追加
次にユーザー コントロールの「コントロール」らしい機能として、プロパテゖを追加してみましょう。先ほど
ユーザー コントロールに Label を配置しましたが、外部からこの Label の Text プロパテゖを設定するため
の "Version" プロパテゖを追加します。
ユーザー コントロールのコード ビハンド フゔルである WebUserControl.ascx.cs を開き、次のように
プロパテゖを記述します。これにより "Version" プロパテゖに数値がセットされると、その内容が Label の
Text プロパテゖにセットされ、結果的にユーザー コントロールに表示されます。
using System;
public partial class WebUserControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public int Version {
set { Label1.Text = value.ToString(); }
get {return int.Parse(Label1.Text); }
}
}
●ページ (Default.aspx) にユーザー コントロールを配置する
以上の作業でユーザー コントロールが作成できましたので、今度は、Default.aspx を新規に作成して、ユーザ
ー コントロールを配置してみます。
Default.aspx をデザン ビューで開いた状態で、ソリューション エクスプローラーからユーザー コントロー
ルを選択して、ページ上にドラッグ & ドロップします。
ユーザー コントロールをページに配置すると、どのような記述が .aspx フゔルに追加されるのか、ソース ビ
ューを開いて確認しておきましょう。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
－ここにページ本体が入ります－
</div>
</form>
</body>
</html>
@Register デゖレクテゖブ、そして <body> タグ内にはサーバー エクスプローラーから配置したユーザー
コントロールを示すタグ (<uc1:WebUserControl>) が挿入されているのがわかります。
@Register デゖレクテゖブは、このページでのユーザー コントロールの使用を示すものです。ユーザー コン
トロールのフゔル名を示す src 属性 (WebUserControl.ascx)、タグのプレフゖックスを表す tagprefix 属
性 (uc1)、さらにコントロール名を示す tagname 属性 (WebUserControl) が記述されています。この定義に
従って、ユーザー コントロールを記述する際のタグの名前が決まります。
●プロパティの設定
先ほどユーザー コントロールに追加したプロパテゖの値は、プロパテゖ ウゖンドウで設定が可能です。デザ
ン ビューで Default.aspx を開いて、配置済みの "WebUserControl1" を選択すると、プロパテゖ ウゖンド
ウに "Version" プロパテゖが表示されるのを確認できます。
ここに「第 13 回」を表す ”13” をセットしてみましょう。
これで、ユーザー コントロールを利用するページが出来上がりました。プロジェクトを実行すると、ユーザー コ
ントロールとして作成した部分がページに表示されているのが確認できます。Version プロパテゖで設定した数
値も表示されています。
●キャッシュの設定
ユーザー コントロールでキャッシュを行うには、通常の Web フォームと同じく @OutputCache デゖレクテ
ゖブを記述します。例えば 60 秒間、ユーザー コントロールをキャッシュするには、次のように記述します。
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<%@ OutputCache Duration="60" VaryByParam="None" %>
<div id="header">
<p>ASP.NET Do-It-Yourself #<asp:Label ID="Label1" runat="server"></asp:Label>
</p>
<hr/>
</div>
今回作成したユーザー コントロールは、リクエストや Web ゕプリケーションの状態によって表示内容が変化
することはありませんので、長時間キャシュしても問題とはならないでしょう。
■まとめ
今回はユーザー コントロールについて学習しました。ページ数の多い Web サトでは、ページの共通部分を
ユーザー コントロールにすることで、効率よく Web サトの構築が行えるようになります。
次回は ASP.NET AJAX について学習します。
