Download
1 / 219
2.19k likes | 2.3k Views
Chapter 5. 進階伺服器控制項. 本章提要. 5 - 1 以 CheckBox 、 RadioButton 控制項製作選項 5 - 2 CheckBoxList 、 RadioButtonList 控制項－多選、單選項目清單 5 - 3 DropDownList 、 ListBox 控制項－下拉式選單與選項列表 5 - 4 建立月曆的 Calendar 控制項 5 - 5 建立橫幅廣告輪播的 AdRotator 控制項 5 - 6 使用 Panel 控制項同時控制多個控制項. 本章提要.
E N D
Chapter 5 進階伺服器控制項
本章提要 • 5 - 1 以 CheckBox、RadioButton 控制項製作選項 • 5 - 2 CheckBoxList、RadioButtonList 控制項－多選、單選項目清單 • 5 - 3 DropDownList、ListBox 控制項－下拉式選單與選項列表 • 5 - 4 建立月曆的 Calendar 控制項 • 5 - 5 建立橫幅廣告輪播的 AdRotator 控制項 • 5 - 6 使用 Panel 控制項同時控制多個控制項
本章提要 • 5 - 7 使用 MultiView 與 View 控制項在同一區域顯示不同內容 • 5 - 8 以 Wizard 控制項製作步驟式程序 • 5 - 9 動態產生表格的 Table 控制項
5 - 1 以 CheckBox、RadioButton 控制項製作選項 • 一般網頁中, 除了提供輸入欄位讓使用者輸入文字外, 也常常會使用選項或選單讓使用者以勾選或點選的方式來輸入資料, 本節將說明如何使用控制項製作這些選項與選單。
多選與單選選項 • 網頁程式經常使用以下兩種單選與多選選項： • 隨後會分別為您介紹這兩種控制項的製作與使用方式。
CheckBox 控制項－多選選項 • 請如下操作便可以建立多選選項：
CheckBox 控制項－多選選項 • 如果您希望使用者進入網頁時, 該選項預設就是勾選的狀態, 請設定 Checked 屬性為 "True"：
CheckBox 控制項－多選選項 • 而在程式中若要判斷使用者是否勾選某個選項, 只要檢查該選項的 Checked 屬性是 True (已勾選) 或是 False (未勾選) 即可。 • 下面例子說明如何判斷使用者勾選了哪些選項, 請如下在 Web Form 建立控制項並設定屬性：
CheckBox 控制項－多選選項 • 筆者想要產生以下執行的結果：
CheckBox 控制項－多選選項 • 為了達到以上功能, 必須建立對應 Button1 按鈕 Click 事件的程序, 在程序中判斷有哪些 CheckBox 控制項被勾選, 然後進行相關處理。 • 所以請在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼即可：
RadioButton 控制項－單選選項 • 單選選項的建立方式與多選選項類似, 只要在 VWD 中使用 RadioButton 控制項即可。而同樣的, Text 屬性表示選項的文字, Checked 屬性代表是否被選取。 • 不過單選選項還有一個重要的屬性：GroupName, 用來將網頁上的選項分組, 同一組選項內只能選擇一個項目：
RadioButton 控制項－單選選項 • 上面可以清楚看到 8 個選項共分成 2 組, 每一組內只能選一個項目, 前 4 個 RadioButton 控制項可以設定 GroupName 屬性為 q1, 後 4 個則設定為 q2, 這樣就可以明確地將 RadioButton 控制項分組。 • 請注意, 即使網頁上只有一組 RadioButton 控制項, 也應該設定 GroupName 屬性；如果未設定, 代表各 RadioButton 控制項沒有明確歸於一組, 會造成可以同時選擇多個 RadioButton 控制項的情形。
RadioButton 控制項－單選選項 • 下面例子將說明如何判斷使用者選擇了哪些 RadioButton 控制項, 請如下在 Web Form 建立控制項並設定屬性：
RadioButton 控制項－單選選項 • 筆者想要產生以下執行的結果：
RadioButton 控制項－單選選項 • 為了達到以上功能, 必須建立對應 Button1 按鈕 Click 事件的程序, 在程序中判斷使用者選擇了哪一個 RadioButton 控制項, 然後進行相關處理。 • 所以請在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 並輸入如下程式碼：
5 - 2 CheckBoxList、RadioButtonList控制項－多選、單選項目清單 • CheckBoxList 與 RadioButtonList 控制項的功能類似前面提到的 CheckBox 與 RadioButton 控制項, 可以用來產生多選與單選的選項。 • 不過 CheckBoxList 與 RadioButtonList 控制項的屬性與功能較多, 不但能夠動態增加或刪除選項, 還可以使用資料庫、XML...等來源的資料建立選項。
使用 CheckBoxList 控制項建立多選項目清單 • 使用 CheckBoxList 控制項建立多選項目清單的步驟如下：
常用的 CheckBoxList 控制項屬性 • CheckBoxList 是繼承 .NET Framework 的 ListControl 類別所產生的控制項, 本章稍後介紹的 RadioButtonList、DropDownList、ListBox 等控制項也是繼承同一類別, 所以會具有相同的屬性與方法, 本節介紹的這些屬性與方法, 之後也都可用在其他同類型的控制項。
常用的 CheckBoxList 控制項屬性 • 以下為筆者建立的多選項目清單：
常用的 CheckBoxList 控制項屬性 • 上面可以看到, CheckBoxList 內可以用 “ID.Items (index)” 存取各項目, 其中 index 是以 0 起始的索引編號, 也就是說所有項目都會被放置於 ID.Items 這個集合內 (關於集合的說明請參閱 3-50 頁)。 • 以下是常用的 CheckBoxList 項目屬性：
常用的 CheckBoxList 控制項屬性 • 以上面筆者建立的多選項目清單為例, 下面列舉部分屬性讓您藉此瞭解其意義： • CheckBoxList1.Items.Count = 3 • CheckBoxList1.Items(0).Selected = False , 表示未被勾選 • CheckBoxList1.Item(0).Text = "最新 Java 2 程式語言" • CheckBoxList1.Item(0).Value 為 5-7 頁所設定的 "560"
常用的 CheckBoxList 控制項屬性 • 下面筆者將使用 CheckBoxList 控制項, 製作一個與前面程式 Ch05-01.aspx 類似功能的程式, 請建立如下控制項並設定屬性：
常用的 CheckBoxList 控制項屬性 • 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：
常用的 CheckBoxList 控制項屬性 • 在瀏覽器檢視執行結果
常用的 CheckBoxList 控制項屬性 • 將這個程式與程式 Ch05-01.aspx 相比較, 可以看到當選項具有群組性時, 使用 CheckBoxList 會比較方便存取各項目屬性。
常用的 CheckBoxList 控制項方法 • CheckBoxList 除了方便存取具群組性的選項屬性外, 還具有動態新增 / 刪除選項的能力, 下面是常用的 CheckBoxList 控制項方法：
常用的 CheckBoxList 控制項方法 • 使用 ID.Items.Add (“字串”) 新增的項目會放在 CheckBoxList 的最後面, 新項目的 Text 屬性為 “字串”, 而 Value 屬性則預設與 Text 屬性相同。 • 如果您想要自行指定 Value 屬性的值, 需使用下面的語法：
常用的 CheckBoxList 控制項方法 • 在 ASP.NET 中所有看得到的都是物件, 因此 CheckBoxList 裡面的項目是使用 ListItem 類別所產生的物件。 • 當使用 ID.Items.Add ("字串") 新增項目時, 會自動替我們產生 ListItem 物件, 然後將您指定的字串設定該物件的 Text 屬性。
常用的 CheckBoxList 控制項方法 • 不過當您想要另外指定 Value 屬性時, 就不能使用自動產生物件的機制, 而必須如上自行使用 New ListItem() 產生物件, 同時設定 Text 與 Value 屬性。 • 下面例子將示範 CheckBoxList 動態新增與刪除選項的功能, 請如下在 Web Form 建立控制項並設定屬性：
常用的 CheckBoxList 控制項方法 • 筆者想要產生以下執行的結果：
常用的 CheckBoxList 控制項方法 • 為了達到以上功能, 必須建立以下程序與功能： • Button1 的 Click 事件處理程序：讀取 TextBox1 (名稱) 與 TextBox2 (價格) 的值做為項目的 Text 與 Value 屬性, 然後將其加入 CheckBoxList1。
常用的 CheckBoxList 控制項方法 • Button2 的 Click 事件處理程序：用迴圈逐一讀取 CheckBoxList1 所有項目的屬性, 如果 Selected 屬性為 True, 表示使用者已勾選, 所以要刪除該項目。 • Button3 的 Click 事件處理程序：用迴圈逐一讀取 CheckBoxList1 所有項目的 Value 屬性並加總, 最後將總和顯示於 Label1 控制項。
常用的 CheckBoxList 控制項方法 • 所以請在設計模式下雙按各按鈕建立 Button1_Click、Button2_Click、Button3_Click 程序, 在其中輸入以下程式碼：
常用的 CheckBoxList 控制項方法 • 請注意, 因為 Button2_Click 程序會刪除勾選的項目, 所以迴圈一定要由後往前存取各項目。 • 為了說明迴圈由前往後時會發生的問題, 以下假設 CheckBoxList 共有 3 個項目, 若由前往後, 迴圈的定義將是 For Index = 0 To 2, 執行的流程如下：
常用的 CheckBoxList 控制項方法 • 由上面流程可以看到, 不但 ItemB 會變成第 1 個項目而沒有讀取到, 更嚴重的是迴圈最後找不到項目可存取, 此時將會產生執行時期錯誤, 導致程式中止執行, ASP.NET 則會直接顯示錯誤相關訊息 (參見第 8 章)。 • 至於 Button3_Click 程式只是單純讀取各項目屬性, 所以不論由前往後, 或是由後往前都不會有任何影響。
