［ASP.NET AJAX］ToggleButtonコントロールでオン／オフ可能なトグルボタンを実装するには？［2.0のみ、C#、VB］ − ＠IT

.NET TIPS ［ASP.NET AJAX］ToggleButtonコントロールでオン／オフ可能なトグルボタンを実装するには？［2.0のみ、C#、VB］ 山田 祥寛 2008/02/07

　ToggleButtonコントロール（ToggleButtonExtender）は、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、標準のチェックボックス（CheckBoxコントロール）を拡張し、オン／オフの状態をアイコン画像で表現できるトグルボタンを生成する。

　もっとも、オン／オフの状態を表すのはCheckBoxコントロール単体で可能であり、ToggleButtonコントロールはこれに新しい機能を追加するものでは「ない」。あくまでチェックボックスの見栄えをサイト・デザインに合わせてグラフィカルに表現したい場合に利用するExtenderコントロールであると考えておけばよいだろう。

　以下の画面は、ToggleButtonコントロールによってトグルボタンを表示している例だ（なお、使用しているアイコン画像はControl Toolkitのサンプルで提供されているものである）。

　それではさっそく、ToggleButtonコントロールを利用したトグルボタンの作成手順を見ていくことにしよう。

　なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 新規のWebフォームを作成する

　新規のWebフォーム（ToggleButton.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する（*1）。

2. プロパティ情報を設定する

　次に、1で配置したコントロールに対して、以下の表の要領でプロパティ情報を設定する。

　ToggleButtonコントロールのTargetControlIDプロパティは、トグルボタン機能を関連付けるCheckBoxコントロールを指定するものだ。ここでは“chk”を指定しているので、CheckBoxコントロール「chk」に対してアニメーション機能が適用されたことになるわけだ。

　なお、ToggleButtonコントロールのそのほかのプロパティを設定する場合、（ToggleButtonコントロールではなく）関連付けたコントロール（ターゲット）のプロパティとして設定する必要がある点に注意してほしい。この場合であれば、CheckBoxコントロールのプロパティ・ウィンドウに（例えば）「tbe（ToggleButtonExtender）」という項目が追加されているので、この項目の配下から個々の値を設定することができる。

　ToggleButtonコントロールで利用可能な主なプロパティは、以下のとおりだ。

　最低限、TargetControlID／ImageHeight／ImageWidth／CheckedImageUrl／UncheckedImageUrlプロパティが必須であるが、特別な理由がない限り、すべてのプロパティを設定しておくのが望ましい。DisabledCheckedImageUrl／DisabledUncheckedImageUrlプロパティは、CheckBoxコントロールのEnabledプロパティがFalseである（チェックボックスが無効である）場合に適用されるアイコン画像である。

　なお参考までに、ここまでにVisual Studio 2005で自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではCheckBoxコントロール配下のプロパティとして設定した一連のプロパティも、コード上はToggleButtonコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にToolkitScriptManagerの配置は必須--%> <ajaxToolkit:ToolkitScriptManager ID="manager" runat="server">   </ajaxToolkit:ToolkitScriptManager> <asp:CheckBox ID="chk" runat="server" /><br /> <%--ToggleButtonコントロールの諸設定を定義--%> <ajaxToolkit:ToggleButtonExtender ID="tbe" runat="server"   CheckedImageAlternateText="有効" CheckedImageUrl="chk.gif"   DisabledCheckedImageUrl="d_chk.gif" DisabledUncheckedImageUrl="d_unchk.gif"   ImageHeight="19" ImageWidth="19" TargetControlID="chk"   UncheckedImageAlternateText="無効" UncheckedImageUrl="unchk.gif"> </ajaxToolkit:ToggleButtonExtender>

ToggleButton.aspxのソース・コード（抜粋）

一連のレイアウト編集を行った後、Visual Studio 2005によって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、チェックボックスの代わりに指定したアイコン画像が表示されること、また、画像をクリックすることでオン／オフが切り替わることが確認できれば成功だ。

TechTargetジャパン