Advanced ASP.NET Controls

第 5 章資料輸入與選擇控制項 第 5 章資料輸入與選擇控制項 5-1 資料輸入控制項 5-2 顯示狀態與 IsPostBack 屬性 5-3 選擇控制項 5-4 清單控制項 5-5 自動送回的事件處理 5-6 月曆 Calendar 控制項 http://www1.chihlee.edu.tw/teachers/chienhua/ 2 5-1 資料輸入控制項 5-1-1 TextBox 文字方塊控制項 5-1-2 指定預設的按鈕控制項 5-1-1 TextBox 文字方塊控制項 - 說明 TextBox 文字方塊控制項主要是讓使用者輸入字串資料, 如果需要其他資料型別的資料, 我們可以使用型別轉換函數來轉換成所需的資料型別, 如下圖所示 : 文字方塊 密碼欄位 多行文字方塊 3 4 1

5-1-1 TextBox 文字方塊控制項 - 新增 TextBox 控制項 5-1-1 TextBox 文字方塊控制項 - 新增 TextBox 控制項屬性 請在 工具箱 視窗的 標準 區段選 TextBox 控制項, 拖拉至表格第 1 列的第 2 欄 5 6 5-1-1 TextBox 文字方塊控制項 - 取得輸入的字串內容 在 ASP.NET 程式碼可以使用 Text 屬性取得使用者輸入的字串, 如下所示 : Dim height As Double = CDbl(txtHeight.Text) Dim weight As Double = CDbl(txtWeight.Text) 上述程式碼在取得控制項內容後, 使用 CDbl() 函數轉換成浮點數 5-1-1 TextBox 文字方塊控制項 - 範例網站 ASP.NET 網站 :Ch5-1-1 在 ASP.NET 網頁新增 TextBox 控制項輸入姓名 密碼 身高和體重的個人資料, 按下按鈕, 即可在下方唯讀多行文字方塊顯示輸入的資料和計算 BMI 值, 如右圖所示 : 7 8 2

5-1-2 指定預設的按鈕控制項 - 說明 為了方便 Web Form 表單的資料輸入, 即讓使用者在不需使用滑鼠按鍵的情況下, 就可以使用鍵盤來執行資料輸入 在 Web Form 表單可以指定 <form> 標籤的屬性來指定預設按鈕和預設取得焦點的欄位, 其說明如下表所示 : 5-1-2 指定預設的按鈕控制項 - 範例網站 ASP.NET 網站 :Ch5-1-2 在 ASP.NET 網頁使用 TextBox 控制項輸入留言內容,Label 標籤控制項顯示留言來建立簡單的留言板功能, 網頁指定預設按鈕和焦點, 以便使用鍵盤來加速資料的輸入, 如右圖所示 : 9 10 5-2 顯示狀態與 IsPostBack 屬性 5-2-1 顯示狀態的基礎 5-2-2 取消指定控制項的顯示狀態 5-2-3 Page 物件的 IsPostBack 屬性 5-2-1 顯示狀態的基礎 - 說明 顯示狀態 (ViewState) 可以保留伺服端控制項的狀態, 也就是每次執行 HTTP 請求時, 保留使用者輸入的值 例如 : 在 Web Form 表單 TextBox 控制項輸入值, 不論表單送回多少次, 除非更改控制項的值, 顯示狀態都能夠自動保留欄位值 11 12 3

5-2-1 顯示狀態的基礎 - 隱藏欄位 在瀏覽器的網頁內容, 執行右鍵快顯功能表的 原始檔 指令, 即可檢視原始程式碼, 可以在表單標籤 <form> 看到 <input type="hidden"> 標籤的隱藏欄位, 如下圖所示 : VIEWSTATE 隱藏欄位的 value 屬性就是儲存的欄位值 5-2-2 取消指定控制項的顯示狀態 顯示狀態是 ASP.NET 的內建機制, 在 Web Form 表單如果有控制項不需要顯示狀態時, 我們可以在 屬性 視窗, 將控制項的 EnableViewState 屬性改為 False, 即可取消此控制項的顯示狀態, 例如 :TextBox 控制項, 如下圖所示 : 13 14 5-2-3 Page 物件的 IsPostBack 屬性 - 說明 在預設情況下,Web Form 表單送回 (PostBack) 至 Web 伺服器, 無論送回多少次, 控制項的值都會保留, 如果需要在第 1 次載入網頁時初始控制項的值, 就需要使用 If 條件檢查 Page 物件的 IsPostBack 屬性是否為 False 在 Page_Load() 事件處理程序可以使用 Page 物件的 IsPostBack 屬性來檢查是否是表單送回, 進行表單處理 5-2-3 Page 物件的 IsPostBack 屬性 - 範例 If Page.IsPostBack Then If txtname.text <> "" Then lbloutput.text = txtname.text & " 歡迎進入網頁!" End If Else txtname.text = " 江小魚 " End If 客戶端送回的表單, 可以取得控制項值來進行表單處理 第 1 次載入的新網頁, 可以在此程式區塊指定控制項的初值 15 16 4

5-2-3 Page 物件的 IsPostBack 屬性 - 範例網站 ASP.NET 網站 :Ch5-2-3 在 ASP.NET 網頁建立登入表單後, 使用 IsPostBack 屬性檢查是否為表單送回的欄位資料 ; 如果是, 在 Page_Load() 事件處理程序顯示歡迎訊息, 如下圖所示 : 5-3 選擇控制項 5-3-1 CheckBox 核取方塊控制項 5-3-2 RadioButton 選擇鈕控制項 17 18 5-3-1 CheckBox 核取方塊控制項 - 說明 CheckBox 核取方塊控制項是一個開關, 可以讓使用者選擇是否開啟功能或設定某些參數 如果在 Web Form 表單擁有多個核取方塊控制項, 每一個控制項都是獨立選項, 所以允許複選, 如下圖所示 : 5-3-1 CheckBox 核取方塊控制項 - 新增 CheckBox 控制項 請在 工具箱 視窗的 標準 區段選 CheckBox 控制項, 拖拉至表格第 1 列的第 1 欄 CheckBox 19 20 5

5-3-1 CheckBox 核取方塊控制項 - CheckBox 控制項屬性 CheckBox 控制項的常用屬性 5-3-1 CheckBox 核取方塊控制項 - 取得使用者的選擇 在 ASP.NET 程式碼是使用 If 條件敘述來檢查 Checked 屬性, 以便知道是否有勾選此核取方塊, 如下所示 : If chkoriginal.checked Then total += 250 * quantity End If 21 22 5-3-1 CheckBox 核取方塊控制項 - 範例網站 ASP.NET 網站 :Ch5-3-1 在 ASP.NET 網頁新增 CheckBox 控制項來選擇訂購的披薩種類, 在勾選和輸入數量後, 就可以計算總價, 如下圖所示 : 5-3-2 RadioButton 選擇鈕控制項 - 說明 RadioButton 選擇鈕控制項是二選一或多選一的選擇題, 使用者可以在一組選項按鈕中選取一個選項, 這是一種單選題, 如下圖所示 : RadioButton 23 24 6

5-3-2 RadioButton 選擇鈕控制項 - 新增 RadioButton 控制項 請在 工具箱 視窗的 標準 區段選 RadioButton 控制項, 拖拉至表格第 1 列的第 1 欄 5-3-2 RadioButton 選擇鈕控制項 - 常用屬性與取得使用者的選擇 RadioButton 控制項和 CheckBox 控制項擁有相同屬性 :Checked Text 和 TextAlign 屬性 在 ASP.NET 程式碼是使用 If 條件來檢查 Checked 屬性, 以判斷是否選取該 RadioButton 控制項, 如下所示 : If rdbrare.checked Then lbloutput.text = " 三分熟 " End If 25 26 5-3-2 RadioButton 選擇鈕控制項 - 範例網站 ASP.NET 網站 :Ch5-3-2 在 ASP.NET 網頁新增 RadioButton 控制項來選擇牛排要幾分熟? 在選好後, 使用 Label 控制項顯示使用者的選擇, 如下圖所示 : 5-4 清單控制項 5-4-1 DropDownList 下拉式選單控制項 5-4-2 ListBox 清單方塊控制項 5-4-3 CheckBoxList 核取方塊與 RadioButtonList 選擇鈕清單控制項 27 28 7

5-4-1 DropDownList 下拉式選單控制項 - 說明 DropDownList 下拉式選單控制項是一個單選題, 相當於單選 HTML 標籤的 <select> 下拉式選單, 如下圖所示 : DropDownList 5-4-1 DropDownList 下拉式選單控制項 - 屬性 DropDownList 控制項的相關屬性說明, 如下表所示 : 29 30 5-4-1 DropDownList 下拉式選單控制項 - 編輯項目 按一下上方箭頭圖示顯示 DropDownList 工作 功能表, 按一下 編輯項目 超連結, 可以看到 ListItem 集合編輯器 對話方塊 5-4-1 DropDownList 下拉式選單控制項 - 取得使用者的選擇 DropDownList 控制項是檢查 SelectedIndex 屬性值是否為 -1, 以判斷使用者是否有選取項目, 如下所示 : If ddlpayment.selectedindex > -1 Then lbloutput.text = ddlpayment.selecteditem.text & _ ddlpayment.selecteditem.value End If 上述 If 條件判斷是否選取項目, 如果選取, 使用 SelectedItem 屬性取得 ListItem 物件後, 可以分別使用 Text 和 Value 屬性取得項目的名稱和值 31 32 8

5-4-1 DropDownList 下拉式選單控制項 - 範例網站 ASP.NET 網站 :Ch5-4-1 在 ASP.NET 網頁新增 DropDownList 控制項, 可以讓使用者選取訂單的付款方式, 在選取後顯示使用者的選擇, 如下圖所示 : 5-4-2 ListBox 清單方塊控制項 - 說明 ListBox 清單方塊控制項可以建立單選或複選題, 其顯示方式如同複選 HTML 標籤 <select> 的清單方塊, 如下圖所示 : ListBox 33 34 5-4-2 ListBox 清單方塊控制項 - 屬性 ListBox 控制項的相關屬性說明, 如下表所示 : 5-4-2 ListBox 清單方塊控制項 - 取得使用者的選擇 單選 ListBox 控制項的選取方式和 DropDownList 控制項相同 複選需要使用 For/Next 迴圈來取得使用者選取的所有項目, 如下所示 : For i = 0 To lstgifts.items.count - 1 If lstgifts.items(i).selected Then str = str & lstgifts.items(i).text & "<br/>" End If Next i 35 36 9

5-4-2 ListBox 清單方塊控制項 - 範例網站 ASP.NET 網站 :Ch5-4-2 在 ASP.NET 網頁新增複選 ListBox 控制項來選取手機免費的配件禮物, 當使用者選取後, 在 Label 控制項顯示所有的選擇, 如右圖所示 : 5-4-3 CheckBoxList 核取方塊與 RadioButtonList 選擇鈕清單控制項 - 說明 CheckBoxList 核取方塊清單控制項是一組 CheckBox 控制項, 屬於一種複選控制項 ; RadioButtonList 選擇鈕清單控制項則是一組 RadioButton 控制項, 這是一種單選的控制項, 如下圖所示 : 37 38 5-4-3 CheckBoxList 核取方塊與 RadioButtonList 選擇鈕清單控制項 - 屬性 CheckBoxList 與 RadioButtonList 控制項的相關屬性說明, 如下表所示 : 5-4-3 CheckBoxList 核取方塊與 RadioButtonList 選擇鈕清單控制項 - 選擇 CheckBoxList 控制項取得選項方式和複選的 ListBox 控制項相同 RadioButtonList 控制項取得選項的方式和 DropDownList 控制項相同 39 40 10

5-4-3 CheckBoxList 核取方塊與 RadioButtonList 選擇鈕清單控制項 - 範例 ASP.NET 網站 :Ch5-4-3 在 ASP.NET 網頁建立 iphone 產品訂購程式, 新增 CheckBoxList 與 RadioButtonList 控制項, 只需勾選商品, 選擇自取或貨運後, 按下按鈕就可以顯示加上手續費後的總價與數量, 如右圖所示 : 5-5 自動送回的事件處理 5-5-1 控制項的 AutoPostBack 屬性 5-5-2 TextBox 控制項的 TextChanged 事件 5-5-3 RadioButton 控制項的 CheckedChanged 事件 5-5-4 DropDownList 控制項的 SelectedIndexChanged 事件 41 42 5-5-1 控制項的 AutoPostBack 屬性 當控制項指定 AutoPostBack 屬性為 True, 表示當控制項的資料變更時, 就自動執行表單送回 控制項支援 AutoPostBack 屬性和其觸發的事件種類, 如下表所示 : 5-5-2 TextBox 控制項的 TextChanged 事件 - 說明 TextBox 控制項的 TextChanged 事件是更改文字內容時所觸發的事件, 可以在輸入文字內容後, 按下 Enter 鍵即變更資料, 其功能類似第 5-1-2 節的預設按鈕 TextChanged 事件的說明, 如下表所示 : 43 44 11

5-5-2 TextBox 控制項的 TextChanged 事件 - 事件處理程序 例如 : 在 TextBox 控制項可以建立 TextChanged 事件處理程序來處理自動送回, 如下所示 : Protected Sub txtinput_textchanged(sender As Object, e As EventArgs) Handles txtinput.textchanged lbloutput.text = txtinput.text End Sub 5-5-2 TextBox 控制項的 TextChanged 事件 - 範例網站 ASP.NET 網站 :Ch5-5-2 在 ASP.NET 網頁新增 TextBox 和 Label 控制項, 當在文字方塊輸入文字內容後, 按下 Enter 鍵, 因為指定 AutoPostBack 屬性為 True, 所以馬上就會填入下方的 Label 控制項, 如下圖所示 : 45 46 5-5-3 RadioButton 控制項的 CheckedChanged 事件 - 說明 RadioButton 和 CheckBox 控制項都擁有 CheckedChanged 事件, 可以建立動態項目的選取 CheckedChanged 事件的說明, 如下表所示 : 5-5-3 RadioButton 控制項的 CheckedChanged 事件 - 事件處理程序 例如 :RadioButton 控制項可以建立 CheckedChanged 事件處理程序來處理自動送回, 如下所示 : Protected Sub rdbrare_checkedchanged(sender As Object, e As EventArgs) Handles rdbrare.checkedchanged lbloutput.text = rdbrare.text End Sub 47 48 12

5-5-3 RadioButton 控制項的 CheckedChanged 事件 - 範例網站 ASP.NET 網站 :Ch5-5-3 在 ASP.NET 網頁使用多個一組的 RadioButton 控制項來選擇牛排要幾分熟? 不同於第 5-3-2 節, 在選好後, 使用者不用按下按鈕, 即可在 Label 控制項顯示使用者的選擇, 如下圖所示 : 5-5-4 DropDownList 控制項的 SelectedIndexChanged 事件 - 說明 DropDownList 控制項的 SelectedIndexChanged 事件是更改項目所觸發的事件, 可以讓我們建立動態項目的選取 SelectedIndexChanged 事件的說明, 如下表所示 : 49 50 5-5-4 DropDownList 控制項的 SelectedIndexChanged 事件 - 事件處理程序 例如 : 在 DropDownList 控制項可以建立 SelectedIndexChanged 事件處理程序來處理表單自動送回, 如下所示 : Protected Sub ddlnames_selectedindexchanged( sender As Object, e As EventArgs) Handles ddlnames.selectedindexchanged lbloutput.text = ddlnames.selecteditem.text End Sub 5-5-4 DropDownList 控制項的 SelectedIndexChanged 事件 - 範例網站 ASP.NET 網站 :Ch5-5-4 在 ASP.NET 網頁新增 DropDownList 控制項以清單來選取使用者名稱, 我們準備在 DropDownList 工作 功能表將 AutoPostBack 屬性設為 True, 所以選取的項目馬上就會填入下方的 Label 控制項, 如下圖所示 : 51 52 13

5-6 月曆 Calendar 控制項 為了方便使用者瀏覽與選取日期, 網頁程式中經常會放置月曆, 使用者只要點選就可以將日期輸入程式中 這種作法除了讓使用者不用自行輸入日期以外, 對於程式設計者而言, 代表再也不用去判讀 104/11/07" "2015.02.10"... 等眾多格式 所以不論是對於使用者或是程式設計者, 月曆都具備相當便利的優點 5-6-1 使用 Calendar 控制項建立月曆 請在 VWD 中如下操作便可以使用 Calendar 控制項建立月曆 : 53 54 5-6-1 使用 Calendar 控制項建立月曆 5-6-1 使用 Calendar 控制項建立月曆 55 56 14

5-6-1 使用 Calendar 控制項建立月曆 前面設定了 SelectionMode 屬性為 "DayWeekMonth", 表示允許使用者以日 週 月為單位選擇日期, 所以上面月曆可以使用左邊的 > 與 >> 鈕來選擇整週或整月 該屬性預設值為 "Day", 表示只能以日來選擇, 此時月曆左邊便不會有整週與整月按鈕了, 同理, "DayWeek" 代表可以選日與週 若是設定為 "None", 則月曆只能瀏覽, 無法用來選擇日期 5-6-1 使用 Calendar 控制項建立月曆 當您使用自動格式化功能設定月曆的外觀樣式時, 會發現用來切換至前後月份的月份巡覽按鈕有兩種不同的形式, 一種是前面的 < 與 > 鈕, 另一種則是如下會顯示月份名稱的形式 : 這個樣式是由 NextPrevFormat 屬性來控制, 當設定為 "ShortMonth" 或 "FullMonth" 時, 月份巡覽按鈕就會顯示月份名稱 57 58 5-6-1 使用 Calendar 控制項建立月曆 若設定為 "CustomText", 就會依照 NextMonthText 與 PrevMonthText 屬性所設定的文字來顯示前後月份 以 10 月的英文字為例, ShortMonth 或 FullMonth 原本在 ASP.NET 的設計中, 分別代表簡短的 Oct 與完整的 October 兩種格式, 不過在中文環境下兩者就沒有差別了 如果想讓月曆顯示英文, 請切換到原始檔模式, 在最前面 @Page 指示詞中加入 Culture="en-us" 設定即可 5-6-1 使用 Calendar 控制項建立月曆 除了使用 ASP.NET 預先設計好的樣式外, Calendar 控制項也有相當多屬性可以自訂外觀 格式 顏色... 等 這些在 VWD 的屬性窗格下面都有說明, 只要簡單測試即能瞭解, 所以本書不另行說明 59 60 15

5-6-2 常用的 Calendar 控制項屬性 Calendar 控制項中被選擇的日期是以如下的屬性表示 : 5-6-2 常用的 Calendar 控制項屬性 上面可以看到, Calendar 內可以用 ID.SelectedDates(index) 存取被選擇的日期, 其中 index 是以 0 起始的索引編號 也就是說所有被選擇的日期都已經被放置於 ID.SelectedDates 這個集合內了 從 ID.SelectedDates 集合內取得的日期, 其資料型別為 Date 如果想要知道總共被選擇了幾天, 可以使用 ID.SelectedDates.Count 屬性來取得 61 62 5-6-2 常用的 Calendar 控制項屬性 5-6-2 常用的 Calendar 控制項屬性 如果月曆只允許選擇單日, 那麼直接使用 ID.SelectedDate 即可得知使用者選擇了哪一天 下面筆者將使用 Calendar 控制項製作月曆, 然後使用程式讀取使用者選了什麼日期, 請建立如下控制項並設定屬性 : 然後在設計模式下雙按 Calendar 控制項, 建立 Calendar1_SelectionChanged 程序, 這個程序會在月曆上選擇日期改變時觸發, 此時代表使用者已經選擇日期了 請在 Calendar1_SelectionChanged 程序中輸入以下程式碼 : 63 64 16

5-6-2 常用的 Calendar 控制項屬性 如果月曆允許使用者選擇整週 或整月的日期時, 因為天數不只一天, 所以 ID.SelectedDate 就不夠用了 5-6-2 常用的 Calendar 控制項屬性 必須使用 ID.SelectedDates(index) 與 ID.SelectedDates.Count 來取得所有被選擇的日期 請在 VWD 中將 Calendar1 控制項的 Select ionmode 屬性設定為 "DayWeekMonth", 讓使用者可以選擇整週或整月的日期 然後在 Calendar1_SelectionChanged 程序中輸入以下程式碼 : 65 66 5-6-2 常用的 Calendar 控制項屬性 5-6-2 常用的 Calendar 控制項屬性 因為 Calendar1.SelectedDates 是一個集合, 所以也可以使用 For Each 迴圈來取得集合中的每一個項目 但為了示範 Count 屬性與集合索引的使用方法, 所以範例程式仍使用 For 迴圈 Calendar 控制項除了如上述範例取得使用者選擇的日期外, 還有其他屬性與方法可以製作行事曆 限制使用者可選擇的日期... 等, 有興趣者可以自行參考線上說明的 Calendar Web 伺服器控制項概觀 段落 67 68 17

Reading Assignment Chapter 5 of ASP.NET 4.5 網頁製作徹底研究, 陳會安 Slides developed by Chien-Hua Tsai 69 18