RadioButton 和 RadioButtonList Web 伺服器控制項概觀
更新:2007 年 11 月
RadioButton 控制項及 RadioButtonList 控制項可讓使用者從一組小型互斥 (Mutually Exclusive) 及預先定義的選項中選取。
這個主題包含:
功能
背景
程式碼範例
類別參考
功能
您可以使用 CheckBox 控制項與 CheckBoxList 控制項來:
在使用者選取選項按鈕時,引發網頁回傳。
在使用者選取選項按鈕時,擷取使用者互動。
把各選項按鈕繫結到資料庫中的資料。
回到頁首
背景
您可以使用兩種 Web 伺服器控制項,將選項按鈕加入至 ASP.NET Web 網頁:一種是個別的 RadioButton 控制項,另外一種是 RadioButtonList 控制項。這兩種控制項都可讓使用者從一組小型互斥及預先定義的選項中選取選項。這些控制項可以讓您使用標籤 (Label) 來定義任一數量的選項按鈕,並以水平或垂直的方式進行排列。
您可以將個別的 RadioButton 控制項加入至網頁,然後單獨使用它們。通常您會將兩個或更多個別的按鈕群組在一起。
此外,您可以使用 RadioButtonList 控制項,它是單一控制項,可做為選項按鈕清單項目集合的父控制項。它衍生自基礎 ListControl 類別。因此運作方式跟 ListBox、DropDownList、BulletedList 及 CheckBoxList Web 伺服器控制項很類似。許多使用 RadioButtonList 控制項的程序,都相同於使用其他清單 Web 伺服器控制項的程序。
兩種類型的控制項都有其優點。相較於使用 RadioButtonList 控制項,使用個別的 RadioButton 控制項,更能夠掌控選項按鈕群組的配置。例如,您可以在每個選項按鈕之間包含非選項按鈕文字。
如果要根據資料來源中的資料建立選項按鈕群組,則 RadioButtonList 控制項會是更好的選擇。也比較容易撰寫程式碼,檢查選取了哪個按鈕。
注意事項: |
---|
同樣,也可以使用 HtmlInputRadioButton 伺服器控制項,將選項按鈕加入至 ASP.NET Web 網頁。如需詳細資訊,請參閱 HtmlInputRadioButton 伺服器控制項宣告式語法。 |
如果您希望使用者可以在執行階段看到比較長的選項清單或是長度可能會變動的清單,請使用 ListBox 或 DropDownList Web 伺服器控制項。
群組選項按鈕
選項按鈕很少單獨使用。而是,它們通常群組成一組互斥的選項。在群組中,一次只能選取一個選項按鈕。您可以使用這些方法來建立群組的選項按鈕:
將個別的 RadioButton Web 伺服器控制項加入至網頁,然後手動地將其全部指派至一個群組。群組名稱是自定名稱,具有相同群組名稱的所有選項按鈕都視為單一群組的一部分。
將 RadioButtonList Web 伺服器控制項加入至網頁。會自動群組控制項的清單項目。
RadioButton 和 RadioButtonList 事件
個別的 RadioButton 控制項和 RadioButtonList 控制項之間的事件運作有些不同。
個別的 RadioButton 控制項
當使用者按一下個別的 RadioButton 控制項時,會引發 CheckedChanged 事件。(此事件繼承自 CheckBox 控制項)。根據預設,此事件不會將頁面張貼至伺服器。不過,您可以將 AutoPostBack 屬性設定為 true,強迫控制項執行立即回傳作業。如需直接回應這個事件的詳細資訊,請參閱 HOW TO:回應 RadioButton Web 伺服器控制項群組中的使用者選取。
注意事項: |
---|
瀏覽器必須支援 ECMAScript (JScript 或 JavaScript),而且使用者的瀏覽器必須啟用指令碼功能,才能使用自動回傳功能。 |
您可能需要為 CheckedChanged 事件建立事件處理常式。您可以在以網頁執行的任何程式碼中測試選取了哪個選項按鈕。如果您不只必須讀取目前選項,還必須知道選項按鈕是否有變更,此時您才建立 CheckedChanged 事件的處理常式。如需詳細資訊,請參閱 HOW TO:設定和取得 RadioButton Web 伺服器控制項中的選取。
RadioButtonList 控制項
當使用者變更清單中所選取的選項按鈕時,RadioButtonList 控制項會引發 SelectedIndexChanged 事件。根據預設,此事件不會將頁面張貼至伺服器。不過,您可以將 AutoPostBack 屬性設定為 true,強迫控制項執行立即回傳作業。如需詳細資訊,請參閱 HOW TO:回應 List Web 伺服器控制項中的變更。
注意事項: |
---|
瀏覽器必須支援 ECMAScript (JScript 或 JavaScript),而且使用者的瀏覽器必須啟用指令碼功能,才能使用自動回傳功能。 |
藉著使用個別的 RadioButton 控制項,在使用某些其他方法來張貼網頁之後,通常可測試 RadioButtonList 控制項的狀態。如需詳細資訊,請參閱 HOW TO:判斷 List Web 伺服器控制項中的選取。
RadioButton 控制項 HTML 屬性
當 RadioButton 控制項呈現至瀏覽器時,它會透過兩部分完成這個步驟:表示選項按鈕的 input 項目,以及表示選項按鈕標題的不同 label 項目。這兩個項目的組合包裝在 span 項目中。
當您將樣式或屬性設定套用至 RadioButton 控制項時,就會套用至外部 span 項目。例如,如果您設定控制項的 BackColor 屬性,設定就會套用至 span 項目。因此,它會同時影響內部 input 與 label 項目。
有些時候,您可能想要為選項按鈕和標籤做不同的設定。RadioButton 控制項支援您可以在執行階段設定的兩個屬性。InputAttributes 屬性 (Poperty) 加入 HTML 屬性 (Attribute) 到 input 項目,而 LabelAttributes 屬性可讓您加入 HTML 屬性到 label 項目。您設定的屬性會傳送至瀏覽器。下列範例顯示如何設定 input 項目的屬性,就能夠在使用者滑鼠指標通過時,只變更選項按鈕而不會變更標籤的顏色。
RadioButton1.InputAttributes.Add("onmouseover", _
"this.style.backgroundColor = 'red'")
RadioButton1.InputAttributes.Add("onmouseout", _
"this.style.backgroundColor = 'white'")
RadioButton1.InputAttributes.Add("onmouseover",
"this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout",
"this.style.backgroundColor = 'white'");
將資料繫結至控制項
您可以將個別的 RadioButton 控制項繫結至資料來源,而且您可以將 RadioButton 控制項的任何屬性繫結至資料來源的任何欄位。例如,您通常會根據資料庫的資訊來設定控制項的 Text 屬性。
由於選項按鈕係以群組方式使用,所以不經常將單一選項按鈕繫結至資料來源。而是比較常將 RadioButtonList 控制項繫結至資料來源。在那種狀況下,此資料來源會針對資料來源的每一筆記錄動態產生選項按鈕 (清單項目)。
回到頁首
程式碼範例
HOW TO:將 RadioButton Web 伺服器控制項加入至 Web Form 網頁
HOW TO:將 RadioButtonList Web 伺服器控制項加入至 Web Form 網頁 (Visual Studio)
HOW TO:設定和取得 RadioButton Web 伺服器控制項中的選取
HOW TO:設定 RadioButtonList Web 伺服器控制項中的配置
HOW TO:回應 RadioButton Web 伺服器控制項群組中的使用者選取
HOW TO:將項目加入至 List Web 伺服器控制項 (Visual Studio)
HOW TO:從資料來源填入 List Web 伺服器控制項 (Visual Studio)
回到頁首
類別參考
下表列出 RadioButton 與 RadioButtonList 控制項的相關類別。
成員 |
描述 |
---|---|
RadioButton 控制項的主要類別。 |
|
RadioButtonList 控制項的主要類別。 |
|
表示 RadioButtonList 控制項中每個項目的類別。 |
|
對應至 RadioButtonList 控制項之個別清單項目的項目集合。 |
回到頁首
請參閱
工作
HOW TO:設定清單 Web 伺服器控制項中的選取 (Visual Studio)