ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本（前篇）

ASP.NET AJAX Controlの作成方法を学習する

HelloAjaxControlExtenderコントロールの登録

　実際にWebページ上で利用するためにツールボックスにコントロールの登録作業を行います。前項目までの作業が完了した後で、［ビルド］-［ソリューションのビルド］を選択し、ExtenderコントロールのDLLを作成します。今回の手順どおりであれば、HelloAJAXControlプロジェクトの「bin\Release」フォルダ（設定により「Debug」フォルダの場合もあります）の直下に「HelloAJAXControl.dll」があります。

　続いてツールボックスにHelloAJAXControlExtenderコントロールを追加します。

　ツールボックス上で右クリックし、コンテキストメニューから［タブの追加］を選択し、適当な名前を付けます（今回はHelloAJAXControlとします）。

　作成したタブの上で再度右クリックし、コンテキストメニューから［アイテムの選択］を選択します。表示される［ツールボックス アイテムの選択］ダイアログの［参照］から上記の位置にある「HelloAJAXControl.dll」を開きます。

　以上の手順でタブ上に［HelloAJAXControlExtender］が追加されました。

Express Editionを利用している場合の手順

　ここではVisual Studio 2005を使い、1つのソリューションの中にプロジェクトとWebサイトを共存させていますが、Express Editionの場合はそれぞれ独立した製品となっているので、少し手間がかかります。

1. VBかC#のExpress Edition上で［新しいプロジェクト］として［ASP.NET AJAX Control Project］を選択する。Express Edition上でコードを記述後、ビルドします。
2. VWD（Visual Web Developer 2005 Express Edition）のIDE上で上記の手順に沿って設定を行うことで自作のExtenderコントロールを利用することができます。

Webページ上で配置し利用する

　既存のAJAX Control Extendeと同様にHTMLデザイナ画面に貼り付けて、TargetControlIDプロパティをButton1に設定して、TargetButtonIDプロパティをButton2に設定して実行します。

default.aspx（一部）

<%@ Register Assembly="HelloAjaxControl"
    Namespace="HelloAjaxControl.HelloAjaxControl" TagPrefix="cc1" %>

中略

    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager
            ID="ScriptManager1" runat="server" />
        <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server"
                           Text="イベントトリガーLabel"
                           BackColor="#ccccff"></asp:Label>
                <asp:Button ID="Button1" runat="server"
                            Text="Button" />
                <cc1:HelloAjaxControlExtender
                    ID="HelloAjaxControlExtender1"
                    runat="server" DisplayText="SampleText"
                    TargetButtonID="Button1" TargetControlID="Label1">
                </cc1:HelloAjaxControlExtender>
            </ContentTemplate>
        </asp:UpdatePanel>
        </div>
    </form>

タグcc1について

　上のソースの中で自作のExtenderコントロールのタグがcc1となっていることが分るかと思いますが、タグがcc1になっているのは上部に書かれている<%@ Register ～～～ %>ディレクティブが関係しています。
　HTMLデザイン画面上でタブから直接HelloAJAXControlExtenderコントロールを張り付けた際にWeb.Configファイル上で登録していないので、<%@ Register ～～～ %>ディレクティブが自動的に記述されます。<%@ Register ～～～ %> ディレクティブはコントロールのタグプリフィックスとアセンブリの配置を宣言するので、もし自分が作成した自作のExtenderコントロールを利用する場合はtagPrefixを変更しましょう。

　実行すると、LabelコントロールとButtonコントロールの2つだけが表示されます。Labelコントロール上にマウスを移動させると、Hello,AJAX Control Extenderというダイアログが表示され、その後にButton2が利用不可能になります（図3～5 ）。

まとめ

　以上今回は、Control Toolkitを利用したコントロール作成の基礎を学びました。次回は引き続き、今回作成したHelloAjaxControlExtenderコントロールを拡張する中で、コントロール作成に必要な理解を深めたいと思います。

次の記事

• ASP.NET AJAXで学ぶAJAX対応コントロール実装の基本（後篇）

参考資料

1. ASP.NET AJAX（公式ページ：英語）
2. ASP.NET AJAX Control Toolkit（ドキュメント：英語）
3. ASP.NET AJAX > Client Reference
4. Shawn Burke's Blog
5. Delay's Blog