RadioButton 控制項和RadioButtonList 控制項使用戶能夠從一小組互斥的預先定義選項中進行選擇。
一、功能
可以使用CheckBox 控制項和CheckBoxList 控制項執行以下操作:
·當選取某個單選按鈕時造成頁回發。
·當使用者選取某個單選按鈕時擷取使用者互動。
·將每個單選按鈕綁定到資料庫中的資料。
二、背景
在向ASP.NET 網頁新增單選按鈕時,可以使用兩種Web 伺服器控制項:單一RadioButton 控制項或RadioButtonList 控制項。這兩種控制項都使用戶能夠從一小組互斥的預定義選項中進行選擇。您可以使用這些控制項定義任意數目的標籤的單選按鈕,並將它們水平或垂直排列。
您可以為頁面新增單一RadioButton 控件,並單獨使用這些控件。通常是將兩個或多個單獨的按鈕組合在一起。
或者,可以使用RadioButtonList 控件,這是一個單一控件,可用作一組單選按鈕清單項目的父控件。此控制項是從基底ListControl 類別中衍生出來的,因此,其運作方式與ListBox、DropDownList、BulletedList 和CheckBoxList Web 伺服器控制項非常相似。使用RadioButtonList 控制項的許多過程與使用其他清單Web 伺服器控制項的過程相同。
這兩類控制項都有各自的優點。使用單一的RadioButton 控制項相對於使用RadioButtonList 控件,可以更好地控制單選按鈕組的佈局。例如,您可以在各單選按鈕之間包含非單選按鈕文字。
如果您想要基於資料來源中的資料建立一組單選按鈕,則RadioButtonList 控制項是更好的選擇。在編寫程式碼以檢查所選定的按鈕方面,它也稍微簡單一些。
說明: 您也可以使用HtmlInputRadioButton 伺服器控制項來為ASP.NET 網頁新增單選按鈕。
如果要提供使用者較長的選項列表或在執行時間長度可能會改變的列表,請使用ListBox 或DropDownList Web 伺服器控制項。
1、對單選按鈕分組
單選按鈕很少單獨使用,而是進行分組以提供一組互斥的選項。在一個群組內,每次只能選擇一個單選按鈕。您可以用下列方法建立分組的單選按鈕:
先在頁中新增單一的RadioButton Web 伺服器控件,然後將所有這些控制項手動指派到一個群組中。群組名稱可以是任意名稱;具有相同群組名稱的所有單選按鈕將視為單一群組的組成部分。
在頁中新增一個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 元素。這兩個元素組合在一起放入到span 元素中。
在對RadioButton 控制項套用樣式或屬性設定時,這些樣式和屬性將會套用至外部的span 元素。例如,如果對控制項的BackColor 屬性進行設置,則所做的設定將套用於span 元素。因此,它將同時影響內部的input 和label 元素。
有時,可能需要對單選按鈕和標籤進行單獨設定。 RadioButton 控制項支援兩個可以在執行時進行設定的屬性。 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 控制項綁定到資料來源。在這種情況下,資料來源會為資料來源中的每筆記錄動態產生單選按鈕(清單項目)。
三、如何:為Web 窗體頁新增RadioButton Web 伺服器控制項
可透過以下兩種方法為Web 窗體頁新增單選按鈕:
·新增單一RadioButton Web 伺服器控制項。
·新增一個RadioButtonList Web 伺服器控件,然後在該控制項中新增單一清單項目。
當使用單一RadioButton Web 伺服器控制項時,一般是向頁面添加一組這樣的控件,然後將它們分組。可以建立多個不同的按鈕組。
步驟:
1、從工具箱的「標準」標籤中,將RadioButton 控制項拖曳到頁面上。
2、在「屬性」視窗中,透過設定Text 屬性指定標題。
3.也可以選擇透過設定TextAlign 屬性來更改標題的方向。
4.對要新增到頁面上的每個單選按鈕重複步驟1 至3。
將各個RadioButton Web 伺服器控制項進行分組
將每個控制項的GroupName 屬性設定為同一個名稱。您可以使用任意字串作為名稱,但不能包含空格。例如,可以將字串“RadioButtonGroup1”指派給所有按鈕的GroupName 屬性。
若要建立多組按鈕,請為每個組使用一個不同的組名。
說明: 在任何時候,您都可以在頁面上新增RadioButton 控件,並將其分割到現有群組中。
四、如何:為Web 窗體頁新增RadioButtonList Web 伺服器控制項
可透過以下兩種方法為Web 窗體頁新增單選按鈕:
·新增一個RadioButtonList Web 伺服器控件,然後在該控制項中新增單一清單項目。
·新增單一RadioButton Web 伺服器控制項。
當使用RadioButtonList 控制項時,可為頁面新增單一控制項。向控制項新增項目是一個獨立的過程,它取決於要在控制項中顯示的是一個靜態列表,還是在執行時動態產生的列表。
步驟:
1.從工具箱的「標準」標籤中,將RadioButtonList 控制項拖曳到頁面上。
2.也可以選擇在「屬性」視窗中,透過設定TextAlign 屬性來變更標題的方向。
3.另外可以選擇更改控制項的版面配置以顯示多個列。
4、依照下列方法之一為該控制項建立項目:
·分別建立每一項。
·將資料綁定到該控制項。
五、如何:設定與取得RadioButton Web 伺服器控制項中的選擇
您可以在設計時,或在執行時在程式碼中設定選定的單選按鈕。如果單選按鈕屬於某個群組,則設定該按鈕的同時將會清除該群組中的所有其他選定內容。
說明: 如果您使用的是RadioButtonList 控件,則取得和設定按鈕值的過程會有所不同。
1、設定選取的RadioButton 控件
將控制項的Checked 屬性設為true。如果您在一組中選擇了多個RadioButton 控件,則瀏覽器將決定哪個按鈕呈現選取狀態。
如果將該屬性設為false,就會清除選擇,但不會選擇另一個單選按鈕。因此,您可以將一組中所有單選按鈕的Checked 屬性設為false 來清除所有選擇。
決定哪個RadioButton 控制項已被選定,實質上就是測試Checked 屬性。
public void Button1_Click (object sender, System.EventArgs e)
{
if (RadioButton1.Checked) {
Label1.Text = "You selected " + RadioButton1.Text;
}
else if (RadioButton2.Checked) {
Label1.Text = "You selected " + RadioButton2.Text;
}
else if (RadioButton3.Checked) {
Label1.Text = "You selected " + RadioButton3.Text;
}
}
六、如何:設定RadioButtonList Web 伺服器控制項中的版面配置
預設情況下,RadioButtonList Web 伺服器控制項只顯示一列按鈕。但您可以指定任意列數,在這些列中,也可以指定各項的排序方式:垂直(預設)或水平。三列垂直佈局如下所示:
A D G
B E H
C F
相同項目的水平佈局產生以下佈局:
A B C
D E F
G H
指定列計數與排序
·將RadioButtonList 控制項的RepeatColumns 屬性設定為所需的列數。
·使用RepeatDirection 枚舉將RepeatDirection 屬性設為Vertical 或Horizontal,如下面的程式碼範例所示。
protected void Button1_Click (object sender, System.EventArgs e)
{
// Create five radio buttons.
string[] colors = {"Red", "Blue", "Green", "Yellow", "Orange"};
this.RadioButtonList1.Items.Clear();
for(int i=0;i < colors.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// Lay out the radio buttons horizontally.
this.RadioButtonList1.RepeatDirection =
RepeatDirection.Horizontal;
}
七、如何:回應RadioButton Web 伺服器控制項群組中的使用者選擇
當使用者選擇一個RadioButton 控制項時,該控制項將引發一個事件,您可以回應此事件。
說明: RadioButtonList 控制項引發的事件不同於單一RadioButton 控制項引發的事件。
您可能根本不需要直接對RadioButton 控制項的選擇事件進行回應。只有當有必要知道使用者何時更改了單選按鈕群組中的選擇內容時,才回應此事件。
如果只想知道選擇了哪個單選按鈕,不想知道所選內容是否已更改,則只需在窗體發送到伺服器後測試單選按鈕選擇。
由於每個RadioButton 伺服器控制項都是單獨的控件,而每個控制項都可單獨引發事件;因此單選按鈕組不會作為整體引發事件。
為控制項的CheckedChanged 事件建立一個事件處理程序。
預設情況下,CheckedChanged 事件並不會馬上導致傳送Web 窗體頁給伺服器。而是在下次傳送窗體時(如按一下Button Web 伺服器控制項時),在伺服器程式碼中引發該事件。若要讓CheckedChanged 事件引發即時傳送,請將RadioButton 控制項的AutoPostBack 屬性設為true。
說明: 若要在選取RadioButton 控制項時將其傳送至伺服器,瀏覽器必須支援ECMAScript(JScript、JavaScript),且使用者的瀏覽器要啟用腳本撰寫。
下面的程式碼範例示範當使用者選擇RadioButton 控制項時的回應方法。
public void RadioButton1_CheckedChanged (object sender,
System.EventArgs e)
{
Label1.Text = "You selected Radio Button " + RadioButton1.Text;