HelloAjaxControlExtenderコントロールの登録
実際にWebページ上で利用するためにツールボックスにコントロールの登録作業を行います。前項目までの作業が完了した後で、[ビルド]-[ソリューションのビルド]を選択し、ExtenderコントロールのDLLを作成します。今回の手順どおりであれば、HelloAJAXControlプロジェクトの「bin\Release」フォルダ(設定により「Debug」フォルダの場合もあります)の直下に「HelloAJAXControl.dll」があります。
続いてツールボックスにHelloAJAXControlExtenderコントロールを追加します。
ツールボックス上で右クリックし、コンテキストメニューから[タブの追加]を選択し、適当な名前を付けます(今回はHelloAJAXControlとします)。
作成したタブの上で再度右クリックし、コンテキストメニューから[アイテムの選択]を選択します。表示される[ツールボックス アイテムの選択]ダイアログの[参照]から上記の位置にある「HelloAJAXControl.dll」を開きます。
以上の手順でタブ上に[HelloAJAXControlExtender]が追加されました。
- VBかC#のExpress Edition上で[新しいプロジェクト]として[ASP.NET AJAX Control Project]を選択する。Express Edition上でコードを記述後、ビルドします。
- VWD(Visual Web Developer 2005 Express Edition)のIDE上で上記の手順に沿って設定を行うことで自作のExtenderコントロールを利用することができます。
Webページ上で配置し利用する
既存のAJAX Control Extendeと同様にHTMLデザイナ画面に貼り付けて、TargetControlID
プロパティをButton1に設定して、TargetButtonID
プロパティをButton2に設定して実行します。
<%@ 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>
HTMLデザイン画面上でタブから直接HelloAJAXControlExtenderコントロールを張り付けた際にWeb.Configファイル上で登録していないので、<%@ Register ~~~ %>ディレクティブが自動的に記述されます。<%@ Register ~~~ %> ディレクティブはコントロールのタグプリフィックスとアセンブリの配置を宣言するので、もし自分が作成した自作のExtenderコントロールを利用する場合はtagPrefixを変更しましょう。
実行すると、LabelコントロールとButtonコントロールの2つだけが表示されます。Labelコントロール上にマウスを移動させると、Hello,AJAX Control Extenderというダイアログが表示され、その後にButton2が利用不可能になります(図3~5 )。
まとめ
以上今回は、Control Toolkitを利用したコントロール作成の基礎を学びました。次回は引き続き、今回作成したHelloAjaxControlExtenderコントロールを拡張する中で、コントロール作成に必要な理解を深めたいと思います。