Tweet

.NET TIPS ［ASP.NET AJAX］MutuallyExclusiveCheckBoxコントロールで排他選択可能なチェックボックス・リストを生成するには？［2.0のみ、C#、VB］ 山田 祥寛 2007/10/25

　MutuallyExclusiveCheckBoxコントロール（MutuallyExclusiveCheckBoxExtender）は、ASP.NET AJAX Control Toollkit（以降、Control Toolkit）で提供されるコントロールの1つで、ASP.NET標準のCheckBoxコントロールを拡張し、相互排他的（MutuallyExclusive）なチェックボックスを生成するためのコントロールだ。

　通常、排他的に選択すべき項目を入力するためのフォーム要素としては、ラジオボタン（ASP.NETのサーバ・コントロールではRadioButton／RadioButtonListコントロール）を使用するのが一般的であるが、ラジオボタンには1つ制約がある。

　具体的には、一度選択したチェックを外すには、必ずほかの項目を選択する必要があるのだ――つまり、全項目が無選択な状態を可能にするためには、［キャンセル（無指定）］のような項目を1つ余計に設けておく必要があるというわけだ。

　これはささいな制約であると思われるかもしれないが、グリッド表の内部などレイアウト上の制約が厳しい局面では、項目1つでも節約したいというケースは少なくない。そのような場合には、MutuallyExclusiveCheckBoxコントロールを利用するとよいだろう。MutuallyExclusiveCheckBoxコントロールは、もともとがチェックボックスであるから、（当然）一度選択したチェックも自由に外すことが可能だ。

　次の画面はMutuallyExclusiveCheckBoxコントロールの利用例だ。

［PHP］がチェックされている状態で ［ASP.NET］をチェックすると ［PHP］のチェックが自動的に解除される

MutuallyExclusiveCheckBoxコントロールによる排他選択式チェックボックスの例

グループ内のいずれかの項目にチェックを入れると、ほかの項目のチェックは自動的に解除される。

　動作自体は明快なので、以下ではさっそく、上の画面のような「排他選択式チェックボックス」をASP.NETページに実装する手順を見ていくことにしよう。

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

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

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

Webフォーム（MECheckBox.aspx）のフォーム・レイアウト

配置するコントロールは以下のとおり。

ToolkitScriptManagerコントロール（manager*）   CheckBoxコントロール（chkAsp）   CheckBoxコントロール（chkPhp）   CheckBoxコントロール（chkJava）   MutuallyExclusiveCheckBoxコントロール（meeAsp）   MutuallyExclusiveCheckBoxコントロール（meePhp）   MutuallyExclusiveCheckBoxコントロール（meeJava）

* ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロール。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」も参照してほしい。

　排他選択式チェックボックスを実装する場合には、CheckBoxコントロールと、対応する数だけMutuallyExclusiveCheckBoxコントロールを配置する必要がある。

2. サーバ・コントロールのプロパティ情報を設定する

　次に、ページに配置したサーバ・コントロールのプロパティを以下の表の要領で設定する。

コントロール（ID）	プロパティ	設定値
ToolkitScriptManager（manager）	−	−
CheckBox（chkAsp）	Text	ASP.NET
CheckBox（chkPhp）	Text	PHP
CheckBox（chkJava）	Text	JavaEE
MutuallyExclusiveCheckBox（meeAsp）	Key	arch
	TargetControlID	chkAsp
MutuallyExclusiveCheckBox（meePhp）	Key	arch
	TargetControlID	chkPhp
MutuallyExclusiveCheckBox（meeJava）	Key	arch
	TargetControlID	chkJava
Webフォーム（MECheckBox.aspx）のプロパティ設定

　MutuallyExclusiveCheckBoxコントロールのTargetControlIDプロパティは、排他選択機能を関連付けるCheckBoxコントロールを指定するものだ。ここでは、それぞれ「chkAsp」「chkPhp」「chkJava」を指定しているので、これによって、CheckBoxコントロールchkAsp／chkPhp／chkJavaにMutuallyExclusiveCheckBoxコントロールの機能が付与されたことになるわけだ。

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

　MutuallyExclusiveCheckBoxコントロールで利用可能な固有のプロパティは、Keyプロパティだけだ。Keyプロパティは、チェックボックスをグループ化するためのキーを表すもので、互いに同一のKeyプロパティ値を持つチェックボックスが1つのグループと見なされ、排他的に選択が可能となる（Keyプロパティは、標準のRadioButtonコントロールのGroupNameプロパティのようなものであると考えると、分かりやすいかもしれない）。

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

　以上を理解したら、さっそく作成したサンプル・プログラムを実行してみよう。冒頭の画面のように、グループ内のチェックボックスを選択すると、同一グループ内のほかのチェックが自動的に解除されることが確認できれば成功だ。

この記事と関連性の高い別の.NET TIPS ［ASP.NET AJAX］ToggleButtonコントロールでオン／オフ可能なトグルボタンを実装するには？ ［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？ ［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？ ［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？ ［ASP.NET AJAX］CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード