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

.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
MutuallyExclusiveCheckBox（meeAsp）	TargetControlID	chkAsp
MutuallyExclusiveCheckBox（meePhp）	Key	arch
MutuallyExclusiveCheckBox（meePhp）	TargetControlID	chkPhp
MutuallyExclusiveCheckBox（meeJava）	Key	arch
MutuallyExclusiveCheckBox（meeJava）	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コントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にToolkitScriptManagerコントロールの配置が必須--%>

<ajaxToolkit:ToolkitScriptManager ID="manager" runat="server">

  </ajaxToolkit:ToolkitScriptManager>

あなたが一番よく使うWeb技術はなんですか？<br />

<%--MutuallyExclusiveCheckBoxの機能を適用するチェックボックスを配置--%>

<asp:CheckBox ID="chkAsp" runat="server" Text="ASP.NET" /><br />

<asp:CheckBox ID="chkPhp" runat="server" Text="PHP" /><br />

<asp:CheckBox ID="chkJava" runat="server" Text="JavaEE" /><br />

<%--MutuallyExclusiveCheckBoxコントロールの諸設定--%>

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="meeAsp"

  runat="server" Key="arch" TargetControlID="chkAsp">

</ajaxToolkit:MutuallyExclusiveCheckBoxExtender>

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="meePhp" runat="server"

  Key="arch" TargetControlID="chkPhp">

</ajaxToolkit:MutuallyExclusiveCheckBoxExtender>

<ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="meeJava" runat="server"

  Key="arch" TargetControlID="chkJava">

</ajaxToolkit:MutuallyExclusiveCheckBoxExtender>

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

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

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

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：ASP.NET AJAX
使用ライブラリ：MutuallyExclusiveCheckBoxコントロール
関連TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？
関連TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？

この記事と関連性の高い別の.NET TIPS

		［ASP.NET AJAX］ToggleButtonコントロールでオン／オフ可能なトグルボタンを実装するには？
		［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？
		［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？
		［ASP.NET AJAX］DropDownコントロールでSharePoint風のドロップダウン・メニューを作成するには？
		［ASP.NET AJAX］CollapsiblePanelコントロールで伸縮自在のマルチペインを生成するには？

このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー）により自動抽出したものです。

generated by

「.NET TIPS」

Insider.NET フォーラム新着記事

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

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

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT