第 6 章 Web表單的處理

1. 第6章 Web表單的處理 • 6-1 ASP.NET的Web表單處理 • 6-2 表單欄位的輸入控制項 • 6-3 表單送回功能 • 6-4 表單的顯示狀態 • 6-5 表單欄位驗證的基礎 • 6-6 伺服端的驗證控制項 • 6-7 表單的重設按鈕

2. 6-1 ASP.NET的Web表單處理 • 6-1-1 HTML表單與Web表單處理 • 6-1-2 在ASP.NET程式取得使用者資料

3. 6-1-1 HTML表單與Web表單處理-ASP的HTML表單處理 • 舊版ASP的網頁表單是一頁擁有<form>標籤的.htm或.asp程式檔案，當瀏覽程式顯示網頁，使用者輸入欄位資料後，就送到伺服端進行處理，最後將執行結果送回瀏覽程式顯示，如下圖所示：

4. 6-1-1 HTML表單與Web表單處理- ASP.NET的Web表單處理 • ASP.NET的Web表單是結合HTML、程式碼和伺服端控制項，一種完全在Web伺服器執行的表單，如下圖所示：

5. 6-1-2 在ASP.NET程式取得使用者資料 • ASP.NET程式有三種方法來取得使用者輸入的資料，如下所示： • 使用HTML表單網頁，將欄位資料送給伺服端的ASP.NET程式，在第4章已經說明過此方法。 • 使用ASP.NET程式建立的Web表單，將資料送給伺服端其他ASP.NET程式。 • 使用ASP.NET程式建立的Web表單，將資料送給伺服端同一個ASP.NET程式，換句話說，在ASP.NET程式除了Web表單外，還包含處理表單資料的事件處理程序。

6. 6-2 表單欄位的輸入控制項 • 6-2-1 ASP.NET的輸入控制項 • 6-2-2 TextBox文字控制項 • 6-2-3 CheckBox核取方塊控制項 • 6-2-4 RadioButton選擇鈕控制項 • 6-2-5 DropDownList下拉式選單控制項 • 6-2-6 ListBox清單方塊控制項 • 6-2-7 CheckBoxList核取方塊清單控制項 • 6-2-8 RadioButtonList選擇鈕清單控制項

7. 6-2-1 ASP.NET的輸入控制項-HTML控制項的輸入控制項1 • HTML控制項是對應System.Web.UI.HtmlControls名稱空間的物件，這些控制項都直接對應到HTML標籤，如下所示： <input Type="text" Id="Name" Size ="20" Runat="server"> • 上述標籤和HTML標籤並沒有什麼不同，其差異只在新增Runat和Id兩個屬性，如下表所示：

8. 6-2-1 ASP.NET的輸入控制項-HTML控制項的輸入控制項2

9. 6-2-1 ASP.NET的輸入控制項-Web控制項的輸入控制項 • Web控制項中關於表單資料輸入欄位部分的控制項，如下表所示：

10. 6-2-2 TextBox文字控制項-標籤 • TextBox文字控制項相當於是HTML表單標籤的文字方塊、密碼欄和文字區域，使用TextMode屬性值來區分不同的功能，如下所示： <asp:TextBox Id="name" Width="200px" Runat="server"/> <asp:TextBox Id="pass" Width="200px" TextMode="Password" Runat="server"/> <asp:TextBox Id="address" Width="200px" TextMode="Multiline" Rows="3" Runat="server"/> • 標籤建立3個TextBox控制項，使用TextMode屬性指定欄位種類是密碼欄位（Password）或文字區域（Multiline），沒有指定就是文字方塊。

11. 6-2-2 TextBox文字控制項-屬性

12. 6-2-2 TextBox文字控制項-圖例

13. 6-2-2 TextBox文字控制項-取得欄位值 Sub button_Click(Sender As Object, _ E As Eventargs) ' 顯示欄位值 Lname.Text = "姓名: " & name.Text Lpass.Text = "密碼: " & pass.Text Ladds.Text = "地址: " & address.Text End Sub

14. 6-2-3 CheckBox核取方塊控制項-標籤 • CheckBox核取方塊控制項對應HTML表單標籤的核取方塊，這是一個複選題，可以建立一組切換開關，如下所示： <asp:CheckBox Id="Tel" Text="使用電話" Runat="server"/> • 標籤建立一個名為Tel的CheckBox控制項。

15. 6-2-3 CheckBox核取方塊控制項-屬性

16. 6-2-3 CheckBox核取方塊控制項-圖例

17. 6-2-3 CheckBox核取方塊控制項-取得欄位值 • CheckBox控制項的處理是使用If條件來檢查Checked屬性，就可以知道是否勾選核取方塊，如下所示： If Tel.Checked Then str &= "使用電話來確認<br>" End If

18. 6-2-4 RadioButton選擇鈕控制項-標籤 • RadioButton選擇鈕控制項對應HTML表單標籤的選擇鈕，這是一個單選題，提供一組選項，但是只能選擇其中之一，如下所示： <asp:RadioButton Id="Tele" Text="劃撥" GroupName="Payment" Runat="server"/> • 標籤建立一個名為Tele的RadioButton控制項，GroupName屬性表示它是屬於名為Payment的一組選項之一。

19. 6-2-4 RadioButton選擇鈕控制項-圖例

20. 6-2-4 RadioButton選擇鈕控制項-取得欄位值 • RadioButton控制項只需使用If/Then/ElseIf多條件來檢查Checked屬性，就可以知道使用者選取的選擇鈕，如下所示： If Card.Checked Then show.Text = Card.Text & "<br>" Else If Tele.Checked Then show.Text = Tele.Text & "<br>" Else If Cash.Checked Then show.Text = Cash.Text & "<br>" End If

21. 6-2-5 DropDownList下拉式選單控制項-說明 • 在Web控制項的ListControl類別有四種選擇功能的控制項物件： • DropDownList控制項。 • ListBox控制項。 • CheckBoxList控制項。 • RadioButtonList控制項。

22. 6-2-5 DropDownList下拉式選單控制項-ListControl類別的屬性 • 選擇功能的控制項是繼承自ListControl類別，所以可以使用ListControl類別的屬性，如下表所示：

23. 6-2-5 DropDownList下拉式選單控制項-標籤 • DropDownList下拉式選單控制項是一個單選題，相當於HTML表單標籤的下拉式清單方塊，如下所示： <asp:DropDownList Id="Ship" Width="100px" Runat="server"> <asp:ListItem Text="郵寄" Value="Mail"/> <asp:ListItem Text="快遞" Value="UPS"/> <asp:ListItem Text="自取" Value="Self"/> </asp:DropDownList>

24. 6-2-5 DropDownList下拉式選單控制項-ListItem控制項 • DropDownList控制項建立選單顯示的選項和其他選擇功能控制項相同，都是使用ListItem控制項。每一個ListItem控制項是一個選項，其相關屬性，如下表所示：

25. 6-2-5 DropDownList下拉式選單控制項-圖例

26. 6-2-5 DropDownList下拉式選單控制項-取得欄位值 • DropDownList控制項是使用繼承自ListControl類別的SelectedItem屬性取得ListItem物件，然後使用Text和Value屬性取得選項名稱和值，如下所示： Ship.SelectedItem.Text Ship.SelectedItem.Value

27. 6-2-6 ListBox清單方塊控制項-標籤 • ListBox清單方塊控制項也是一種選擇題，相當於HTML表單標籤的清單方塊，可以設定單選或複選，如下所示 <asp:ListBox Id="Gift" SelectionMode="Multiple" Runat="server"> <asp:ListItem Text="滑鼠" Value="1" Selected="True"/> <asp:ListItem Text="鍵盤" Value="2"/> <asp:ListItem Text="喇叭" Value="3"/> <asp:ListItem Text="麥克風" Value="4"/> </asp:ListBox>

28. 6-2-6 ListBox清單方塊控制項-屬性

29. 6-2-6 ListBox清單方塊控制項-圖例

30. 6-2-6 ListBox清單方塊控制項-取得欄位值 • 對於單選的ListBox控制項，取得選取選項的方式和DropDownList控制項相同。 • 以此例為複選，所以需要使用For/Next迴路來取得使用者選取的所有選項，如下所示： For i = 0 to Gift.Items.Count-1 If Gift.Items(i).Selected Then str = str & Gift.Items(i).Text & "<br>" End If Next

31. 6-2-7 CheckBoxList核取方塊清單控制項-標籤 • CheckBoxList核取方塊清單控制項相當於是一組CheckBox控制項，這是複選的控制項，簡單的說，它可以讓我們輕鬆編排多個CheckBox控制項，如下所示： <asp:CheckBoxList Id="Gift“ RepeatDirection="Horizontal“ Runat="server"> <asp:ListItem Text="滑鼠" Value="1" Selected="True"/> <asp:ListItem Text="鍵盤" Value="2"/> <asp:ListItem Text="喇叭" Value="3"/> <asp:ListItem Text="麥克風" Value="4"/> </asp:CheckBoxList>

32. 6-2-7 CheckBoxList核取方塊清單控制項-屬性

33. 6-2-7 CheckBoxList核取方塊清單控制項-圖例與取得欄位值 • CheckBoxList控制項取得選項方式和複選的ListBox控制項相同。

34. 6-2-8 RadioButtonList選擇鈕清單控制項-標籤 • RadioButtonList選擇鈕清單控制項是一組RadioButton控制項，這是一個單選的控制項，簡單的說，它可以讓我們輕鬆編排多個RadioButton控制項，如下所示： <asp:RadioButtonList Id="Payment" RepeatDirection="Horizontal" Runat="server"> <asp:ListItem Text="信用卡" Value="1"/> <asp:ListItem Text="劃撥" Value="2" Selected="True"/> <asp:ListItem Text="到貨付款" Value="3"/> </asp:RadioButtonList>

35. 6-2-8 RadioButtonList選擇鈕清單控制項-圖例與取得欄位值 • RadioButtonList控制項取得選項方式和DropDownList控制項相同。

36. 6-3 表單送回功能 • 6-3-1 表單的IsPostBack屬性 • 6-3-2 控制項的AutoPostBack屬性

37. 6-3 表單送回功能 • Web表單輸入控制項可以讓使用者輸入或選取資料，當使用者在客戶端輸入資料後，將資料送回伺服端處理，稱為表單送回（Postback）。表單送回功能預設是送到本身的ASP.NET程式，相關屬性如下所示： • Page物件的IsPostBack屬性：檢查是否是第1次載入ASP.NET程式，或是已經在客戶端執行過表單送回。 • 伺服端控制項的AutoPostBack屬性：Web控制項如果將AutoPostBack屬性設為True，當控制項資料變更時，就自動執行客戶端表單送回。

38. 6-3-1 表單的IsPostBack屬性 • 在Page_Load()事件處理程序可以使用IsPostBack屬性檢查是否已經送回資料，如下所示： If IsPostBack Then If NameTextBox.Text <> "" Then showName.Text = _ nameTextBox.Text & "您好!" End If Else NameTextBox.Text = "江小魚" End If

39. 6-3-2 控制項的AutoPostBack屬性-1 • Web控制項如果有AutoPostBack屬性，我們可以使用控制項的自動送回功能。例如：DropDownList控制項，如下所示： <asp:DropDownList Id="Username" Width="100px" AutoPostBack="True" OnSelectedIndexChanged="Change_Name" Runat="server"> <asp:ListItem Text="陳會安" Value="001"/> <asp:ListItem Text="江小魚" Value="002"/> <asp:ListItem Text="張無忌" Value="003"/> </asp:DropDownList> • Web控制項將AutoPostBack屬性設為True，表示當更改選項資料時，就會自動送回（不用按【送出】鈕）。

40. 6-3-2 控制項的AutoPostBack屬性-2 • AutoPostBack屬性支援的Web控制項和事件，如下表所示：

41. 6-4 表單的顯示狀態 • 6-4-1 顯示狀態的基礎 • 6-4-2 保留PostBack表單送回的其他資料

42. 6-4-1 顯示狀態的基礎-說明 • 「顯示狀態」（ViewState）是一種ASP.NET機制，能夠保留伺服端控制項的狀態，也就是儲存其值。 • 例如：在Web表單TextBox控制項輸入值，不論送回（Postback）多少次，除非更改TextBox控制項的值，否則顯示狀態都能夠自動保留其值。

43. 6-4-1 顯示狀態的基礎-為什麼 • 顯示狀態是使用隱藏欄位儲存狀態資料，請檢視程式範例可以看到<input type="hidden">標籤，如下所示： <form name="ctl00" method="post" action="Ch6-4-1ViewState.aspx" id="ctl00"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg1MzkyMzgwOA9kFgICBA8PFgIeBFRleHQFD+mZs+acg+WuiSA6IOe2oGRkZDeOgTJJRCvPQy/qaVBTQ0SEVPqB" /> ……….. </form> • <input>標籤的value屬性值是亂碼值，這就是顯示狀態儲存的值。

44. 6-4-2 保留PostBack表單送回的其他資料-說明1 • Web表單的表單送回（預設是送回給自已）使用ViewState顯示狀態保留控制項的內容，如果屬於程式碼變數，或其他網頁使用URL傳遞的參數並不會保留其值，在表單送回後，這些參數和變數值也會消失。

45. 6-4-2 保留PostBack表單送回的其他資料-說明2 • 在ASP.NET提供多種方法來保留這些變數或參數值，如下所示： • 使用Cookie保留變數值，詳見第4章。 • 使用Session變數保留變數值，詳細的說明請參閱第11章。 • 使用Profile物件的屬性保留變數值，詳細的說明請參閱第14章。 • 使用HtmlInputHidden隱藏欄位控制項保留變數值。 • 使用顯示狀態的StateBag物件保留變數值。

46. 6-4-2 保留PostBack表單送回的其他資料-HtmlInputHidden隱藏欄位控制項 • HTML控制項的HtmlInputHidden控制項相當於是HTML標籤的隱藏欄位，如下所示： <input Id="MyName" type="hidden" Runat="server"> • 標籤是隱藏欄位控制項，使用Value屬性來儲存變數值，如下所示： MyName.Value = name

47. 6-4-2 保留PostBack表單送回的其他資料-顯示狀態的StateBag物件 • 在顯示狀態的StateBag物件是一種集合物件，內含伺服端控制項的顯示狀態資訊，我們可以新增StateBag物件元素來保留Visual Basic的變數值，如下所示： ViewState("NickName") = nick • 程式碼新增StateBag物件的元素，這是名為NickName的元素，名稱是一個字串，其值就是保留的變數值。

48. 6-5 表單欄位驗證的基礎 • 6-5-1 表單欄位驗證的種類 • 6-5-2 ASP.NET的伺服端驗證控制項

49. 6-5-1 表單欄位驗證的種類 • 表單欄位驗證以把關的位置來區分，可以分為兩種，如下所示： • 客戶端表單欄位驗證：在尚未送到伺服端前，在客戶端的瀏覽程式進行檢查，即使用JavaScript或VBScript程式碼執行欄位值的檢查。 • 伺服端表單欄位驗證：伺服端表單欄位驗證是在資料送到伺服端後，才進行資料的檢查。

50. 6-5-2 ASP.NET的伺服端驗證控制項-說明 • 驗證控制項也是Web控制項，屬於System.Web.UI.WebControls名稱空間的物件。我們可以在Web表單新增驗證控制項，來執行指定控制項的驗證功能。 • Web表單如果擁有驗證控制項，就可以使用Page物件的IsValid屬性來確認表單是否通過驗證，如下所示： If Page.IsValid Then Lname.Text = "姓名: " & name.Text Lpass.Text = "密碼: " & pass.Text End If