RadioButton コントロールと RadioButtonList コントロールを使用すると、ユーザーは相互に排他的な事前定義されたオプションの小さなセットから選択できます。
1.機能
CheckBox コントロールと CheckBoxList コントロールを使用して、次の操作を実行できます。
· ラジオ ボタンが選択されているときにページのポストバックを引き起こします。
·ユーザーがラジオ ボタンを選択したときのユーザー インタラクションをキャプチャします。
· 各ラジオ ボタンをデータベース内のデータにバインドします。
2. 背景
ASP.NET Web ページにラジオ ボタンを追加する場合は、2 つの Web サーバー コントロール (単一の RadioButton コントロールまたは RadioButtonList コントロール) を使用できます。どちらのコントロールでも、ユーザーは相互に排他的な事前定義されたオプションの小さなセットから選択できます。これらのコントロールを使用して、ラベル付きラジオ ボタンを任意の数定義し、水平または垂直に配置できます。
個々の RadioButton コントロールをページに追加し、コントロールを個別に使用できます。通常、2 つ以上の別々のボタンがグループ化されます。
あるいは、RadioButtonList コントロールを使用することもできます。これは、ラジオ ボタン リスト項目のグループの親コントロールとして使用できる単一のコントロールです。このコントロールは基本 ListControl クラスから派生しているため、ListBox、DropDownList、BulletedList、および CheckBoxList Web サーバー コントロールと非常によく似た動作をします。 RadioButtonList コントロールを使用する手順の多くは、他のリスト Web サーバー コントロールの場合と同じです。
どちらのタイプのコントロールにも、それぞれ独自の利点があります。単一の RadioButton コントロールを使用すると、RadioButtonList コントロールを使用するよりもラジオ ボタン グループのレイアウトをより詳細に制御できます。たとえば、ラジオ ボタンの間にラジオ ボタン以外のテキストを含めることができます。
データ ソースのデータに基づいてラジオ ボタンのセットを作成する場合は、RadioButtonList コントロールの方が適しています。また、どのボタンが選択されているかを確認するためのコードの記述も若干簡単になります。
注: HtmlInputRadioButton サーバー コントロールを使用して、ASP.NET Web ページにラジオ ボタンを追加することもできます。
オプションの長いリスト、または実行時に長さが変わる可能性のあるリストをユーザーに提供する場合は、ListBox または DropDownList Web サーバー コントロールを使用します。
1. グループラジオボタン
ラジオ ボタンが単独で使用されることはほとんどありませんが、相互に排他的なオプションのセットを提供するためにグループ化されています。グループ内では、一度に 1 つのラジオ ボタンのみを選択できます。次の方法で、グループ化されたラジオ ボタンを作成できます。
まず、単一の RadioButton Web サーバー コントロールをページに追加し、すべてのコントロールを手動でグループに割り当てます。グループ名には任意の名前を付けることができ、同じグループ名を持つすべてのラジオ ボタンは 1 つのグループの一部とみなされます。
RadioButtonList Web サーバー コントロールをページに追加します。このコントロールのリスト項目は自動的にグループ化されます。
2. RadioButton および RadioButtonList イベント
イベントは、単一の RadioButton コントロールと RadioButtonList コントロールの間で動作が異なります。
3. 単一の RadioButton コントロール
単一の RadioButton コントロールは、ユーザーがコントロールをクリックすると CheckedChanged イベントを発生させます。 (このイベントは CheckBox コントロールから継承されます。) デフォルトでは、このイベントによってページがサーバーに送信されることはありません。ただし、AutoPostBack プロパティを true に設定することで、コントロールにポストバックを即座に実行させることができます。
注: 自動ポストバック機能を使用するには、ブラウザが ECMAScript (Jscript または JavaScript) をサポートし、ユーザーのブラウザでスクリプトが有効になっている必要があります。
CheckedChanged イベントのイベント ハンドラーの作成が必要になる場合があります。ページの一部として実行されるコードでどのラジオ ボタンが選択されているかをテストできます。通常、CheckedChanged イベントのイベント ハンドラーは、現在の選択内容を読み取るだけでなく、ラジオ ボタンが変更されたことを知る必要がある場合にのみ作成します。
4. RadioButtonList コントロール
RadioButtonList コントロールは、ユーザーがリスト内で選択したラジオ ボタンを変更すると、SelectedIndexChanged イベントを発生させます。デフォルトでは、このイベントによってページがサーバーに送信されることはありません。ただし、AutoPostBack プロパティを true に設定することで、コントロールにポストバックを即座に実行させることができます。
注: 自動ポストバック機能を使用するには、ブラウザが ECMAScript (Jscript または JavaScript) をサポートし、ユーザーのブラウザでスクリプトが有効になっている必要があります。
個々の RadioButton コントロールと同様に、ページが他の手段で送信された後に RadioButtonList コントロールの状態をテストする方が一般的です。
5. RadioButton コントロールの HTML 属性
RadioButton コントロールがブラウザに表示されると、ラジオ ボタンを表す input 要素と、ラジオ ボタンのタイトルを表す別個の label 要素の 2 つの部分に分割されます。これら 2 つの要素は、span 要素に結合されます。
RadioButton コントロールにスタイルまたはプロパティ設定を適用すると、それらのスタイルとプロパティは外側の Span 要素に適用されます。たとえば、コントロールの BackColor プロパティを設定すると、その設定はspan要素に適用されます。したがって、内部の入力要素とラベル要素の両方に影響します。
場合によっては、ラジオ ボタンとラベルを個別に設定する必要がある場合があります。 RadioButton コントロールは、実行時に設定できる 2 つのプロパティをサポートしています。 InputAttributes 属性を使用すると、input 要素に HTML 属性を追加でき、LabelAttributes 属性を使用すると、label 要素に HTML 属性を追加できます。設定したプロパティはそのままブラウザに渡されます。次の例は、ユーザーがマウス ポインターをラジオ ボタンの上に置いたときに、ラベルではなくラジオ ボタンの色のみが変更されるように、input 要素のプロパティを設定する方法を示しています。
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'white'");
6. データをコントロールにバインドする
単一の RadioButton コントロールをデータ ソースにバインドでき、RadioButton コントロールの任意のプロパティをデータ ソースの任意のフィールドにバインドできます。たとえば、データベース内の情報に基づいてコントロールの Text プロパティを設定できます。
ラジオ ボタンはグループで使用されるため、単一のラジオ ボタンをデータ ソースにバインドすることは一般的ではありません。代わりに、RadioButtonList コントロールをデータ ソースにバインドする方が一般的です。この場合、データ ソースは、データ ソース内のレコードごとにラジオ ボタン (リスト項目) を動的に生成します。
3. 方法: RadioButton Web サーバー コントロールを Web フォーム ページに追加する
Web フォーム ページにラジオ ボタンを追加するには、次の 2 つの方法があります。
·単一の RadioButton Web サーバー コントロールを追加します。
·RadioButtonList Web サーバー コントロールを追加し、そのコントロールに 1 つのリスト項目を追加します。
単一の RadioButton Web サーバー コントロールを使用する場合、通常は、そのようなコントロールのセットをページに追加し、それらをグループ化します。いくつかの異なるボタン グループを作成できます。
ステップ：
1. ツールボックスの「標準」タブから、RadioButton コントロールをページにドラッグします。
2. [プロパティ] ウィンドウで、Text プロパティを設定してタイトルを指定します。
3. TextAlign プロパティを設定して、タイトルの方向を変更することもできます。
4. ページに追加するラジオ ボタンごとに手順 1 ～ 3 を繰り返します。
個々の RadioButton Web サーバー コントロールをグループ化する
各コントロールの GroupName プロパティを同じ名前に設定します。名前として任意の文字列を使用できますが、スペースを含めることはできません。たとえば、文字列「RadioButtonGroup1」をすべてのボタンの GroupName プロパティに割り当てることができます。
ボタンの複数のグループを作成するには、グループごとに異なるグループ名を使用します。
注: いつでも RadioButton コントロールをページに追加し、既存のグループに分割できます。
4. 方法: RadioButtonList Web サーバー コントロールを Web フォーム ページに追加する
Web フォーム ページにラジオ ボタンを追加するには、次の 2 つの方法があります。
·RadioButtonList Web サーバー コントロールを追加し、そのコントロールに 1 つのリスト項目を追加します。
·単一の RadioButton Web サーバー コントロールを追加します。
RadioButtonList コントロールを使用する場合、ページに個々のコントロールを追加できます。コントロールへの項目の追加は、コントロールに静的なリストを表示するか、実行時に動的に生成されるリストを表示するかによって、別のプロセスになります。
ステップ：
1. ツールボックスの「標準」タブから、RadioButtonList コントロールをページにドラッグします。
2. [プロパティ] ウィンドウで TextAlign プロパティを設定して、タイトルの方向を変更することもできます。
3. コントロールのレイアウトを変更して複数の列を表示することもできます。
4. 次のいずれかの方法に従って、コントロールの項目を作成します。
・各項目を個別に作成してください。
·データをコントロールにバインドします。
5. 方法: RadioButton Web サーバー コントロールで選択内容を設定および取得する
選択したラジオ ボタンは、設計時に設定することも、実行時にコード内で設定することもできます。ラジオ ボタンがグループに属している場合、ボタンを設定すると、グループ内の他のすべての選択がクリアされます。
注: RadioButtonList コントロールを使用している場合、ボタンの値を取得および設定するプロセスは異なります。
1. 選択した RadioButton コントロールを設定します
コントロールの Checked プロパティを true に設定します。グループ内で複数の RadioButton コントロールを選択すると、ブラウザによってどのボタンが選択されるかが決定されます。
このプロパティを false に設定すると、選択はクリアされますが、別のラジオ ボタンは選択されません。したがって、グループ内のすべてのラジオ ボタンの Checked プロパティを false に設定すると、すべての選択をクリアできます。
どの RadioButton コントロールが選択されているかを判断することは、基本的に Checked プロパティをテストすることです。
public void Button1_Click (オブジェクト送信者、System.EventArgs e)
{
if (RadioButton1.Checked) {
Label1.Text = "選択しました" + RadioButton1.Text;
}
else if (RadioButton2.Checked) {
Label1.Text = "選択しました" + RadioButton2.Text;
}
else if (RadioButton3.Checked) {
Label1.Text = "選択しました" + RadioButton3.Text;
}
}
6. 方法: RadioButtonList Web サーバー コントロールでレイアウトを設定する
デフォルトでは、RadioButtonList Web サーバー コントロールにはボタンのリストのみが表示されます。ただし、任意の数の列を指定でき、それらの列内でアイテムの並べ替え方法 (垂直方向 (デフォルト) または水平方向) を指定することもできます。 3 列の垂直レイアウトは次のようになります。
A D G
B E H
C F
同じ項目を水平方向にレイアウトすると、次のレイアウトが生成されます。
A B C
D E F
GH
列数を指定して並べ替える
·RadioButtonList コントロールのRepeatColumns プロパティを必要な列数に設定します。
· 次のコード例に示すように、RepeatDirection 列挙体を使用して、RepeatDirection プロパティを垂直または水平に設定します。
protected void Button1_Click (オブジェクト送信者、System.EventArgs e)
{
// ラジオ ボタンを 5 つ作成します。
string[] color = {"赤"、"青"、"緑"、"黄"、"オレンジ"};
this.RadioButtonList1.Items.Clear();
for(int i=0;i < color.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// ラジオボタンを横に配置します。
this.RadioButtonList1.RepeatDirection =
繰り返し方向。水平方向;
}
7. 方法: RadioButton Web サーバー コントロール グループでユーザーの選択に応答する
ユーザーが RadioButton コントロールを選択すると、コントロールは応答できるイベントを発生させます。
説明: RadioButtonList コントロールによって発生するイベントは、単一の RadioButton コントロールによって発生するイベントとは異なります。
RadioButton コントロールの選択イベントに直接応答する必要はまったくない場合があります。ユーザーがラジオ ボタン グループの選択をいつ変更したかを知る必要がある場合にのみ、このイベントに応答してください。
どのラジオ ボタンが選択されたかを知りたいだけで、選択内容が変更されたかどうかは知りたくない場合は、フォームがサーバーに送信された後でラジオ ボタンの選択内容をテストするだけです。
各 RadioButton サーバー コントロールは個別のコントロールであり、各コントロールは独立してイベントを発生させることができるため、ラジオ ボタン グループ全体ではイベントを発生させません。
コントロールの CheckedChanged イベントのイベント ハンドラーを作成します。
デフォルトでは、CheckedChanged イベントによって Web フォーム ページがすぐにサーバーに送信されるわけではありません。代わりに、次回フォームが送信されるとき (ボタン Web サーバー コントロールがクリックされたときなど)、サーバー コードでイベントが発生します。 CheckedChanged イベントによって即時投稿が行われるようにするには、RadioButton コントロールの AutoPostBack プロパティを true に設定します。
注: RadioButton コントロールが選択されたときにサーバーに送信するには、ブラウザが ECMAScript (JScript、JavaScript) をサポートし、ユーザーのブラウザでスクリプトが有効になっている必要があります。
次のコード例は、ユーザーが RadioButton コントロールを選択したときに応答する方法を示しています。
public void RadioButton1_CheckedChanged (オブジェクト送信者、
System.EventArgs e)
{
Label1.Text = "ラジオ ボタンを選択しました" + RadioButton1.Text;