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

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

6-1-1 HTML6-1-1 HTML 表單與表單與 WebWeb 表單處理表單處理 --ASPASP的的 HTMLHTML 表單處理表單處理

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

6-1-1 HTML6-1-1 HTML 表單與表單與 WebWeb 表單處理表單處理 - - ASP.NETASP.NET的的 WebWeb 表單處理表單處理

ASP.NETASP.NET的的WebWeb 表單是結合表單是結合 HTMLHTML 、程、程式碼和伺服端控制項，一種完全在式碼和伺服端控制項，一種完全在 WebWeb 伺伺服器執行的表單，如下圖所示：服器執行的表單，如下圖所示：

6-1-2 6-1-2 在在 ASP.NETASP.NET 程式取得使程式取得使用者資料用者資料

ASP.NETASP.NET 程式有三種方法來取得使用者輸程式有三種方法來取得使用者輸入的資料，如下所示：入的資料，如下所示：• 使用使用 HTMLHTML 表單網頁，將欄位資料送給伺服端表單網頁，將欄位資料送給伺服端的的 ASP.NETASP.NET 程式，在第程式，在第 44 章已經說明過此方章已經說明過此方法。法。

• 使用使用 ASP.NETASP.NET 程式建立的程式建立的 WebWeb 表單，將資料表單，將資料送給伺服端其他送給伺服端其他 ASP.NETASP.NET 程式。程式。

• 使用使用 ASP.NETASP.NET 程式建立的程式建立的 WebWeb 表單，將資料表單，將資料送給伺服端同一個送給伺服端同一個 ASP.NETASP.NET 程式，換句話說，程式，換句話說，在在 ASP.NETASP.NET 程式除了程式除了 WebWeb 表單外，還包含處表單外，還包含處理表單資料的事件處理程序。理表單資料的事件處理程序。

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

6-2-1 ASP.NET6-2-1 ASP.NET 的輸入控制項的輸入控制項 --HTMLHTML 控制項的輸入控制項控制項的輸入控制項 11

HTMLHTML 控制項是對應控制項是對應System.Web.UI.HtmlControlsSystem.Web.UI.HtmlControls 名稱空間的物名稱空間的物件，這些控制項都直接對應到件，這些控制項都直接對應到 HTMLHTML 標籤，如下標籤，如下所示：所示：<input Type="text" Id="Name" Size ="20" <input Type="text" Id="Name" Size ="20"

Runat="server">Runat="server"> 上述標籤和上述標籤和 HTMLHTML 標籤並沒有什麼不同，其差異標籤並沒有什麼不同，其差異

只在新增只在新增 RunatRunat和和 IdId 兩個屬性，如下表所示：兩個屬性，如下表所示：屬性 說明Runat 屬性值是 server，表示標籤是伺服端控制項，不再是 HTML標籤

Id 屬性值是控制項的名稱，伺服端控制項需要指定 Id屬性，而且在整個 Page物件中的名稱需要唯一

6-2-1 ASP.NET6-2-1 ASP.NET 的輸入控制項的輸入控制項 --HTMLHTML 控制項的輸入控制項控制項的輸入控制項 22

HTML控制項 HTML標籤HtmlForm <form>

HtmlInputText <input type="text">和<input type="password">

HtmlTextArea <textarea>HtmlInputCheckBox <input type="checkbox">

HtmlSelect <select>HtmlInputRadioButton <input type="radio">

HtmlInputHidden <input type="hidden">HtmlInputButton <input type="button">HtmlInputImage <input type="image">HtmlInputFile <input type="file">HtmlButton HTML 4.0的<button>標籤

6-2-1 ASP.NET6-2-1 ASP.NET 的輸入控制項的輸入控制項 -Web-Web控制項的輸入控制項控制項的輸入控制項

WebWeb 控制項中關於表單資料輸入欄位部分的控制控制項中關於表單資料輸入欄位部分的控制項，如下表所示：項，如下表所示：

Web控制項 標籤 說明TextBox <asp:TextBox /> 文字方塊、密碼欄位和文字區域

CheckBox <asp:CheckBox /> 核取方塊RadioButton <asp:RadioButton /> 選擇鈕

DropDownList <asp:DropDownList /> 下拉式選單ListBox <asp:ListBox /> 清單方塊

CheckBoxList <asp:CheckBoxList /> 一組核取方塊RadioButtonList <asp:RadioButtonList /> 一組選擇鈕

6-2-2 TextBox6-2-2 TextBox 文字控制項文字控制項 -- 標籤標籤 TextBoxTextBox 文字控制項相當於是文字控制項相當於是 HTMLHTML 表單標籤的文字方表單標籤的文字方

塊、密碼欄和文字區域，使用塊、密碼欄和文字區域，使用 TextModeTextMode 屬性值來區分屬性值來區分不同的功能，如下所示：不同的功能，如下所示：

<asp:TextBox Id="name" Width="200px" <asp:TextBox Id="name" Width="200px" Runat="server"/>Runat="server"/><asp:TextBox Id="pass" Width="200px" <asp:TextBox Id="pass" Width="200px" TextMode="Password" Runat="server"/>TextMode="Password" Runat="server"/><asp:TextBox Id="address" Width="200px" <asp:TextBox Id="address" Width="200px" TextMode="Multiline" Rows="3" Runat="server"/>TextMode="Multiline" Rows="3" Runat="server"/> 標籤建立標籤建立 33 個個 TextBoxTextBox 控制項，使用控制項，使用 TextModeTextMode 屬性指屬性指

定欄位種類是密碼欄位（定欄位種類是密碼欄位（ PasswordPassword ）或文字區域）或文字區域（（ MultilineMultiline ），沒有指定就是文字方塊。），沒有指定就是文字方塊。

6-2-2 TextBox6-2-2 TextBox 文字控制項文字控制項 -- 屬性屬性屬性 說明

AutoPostBack 是否當使用者更改文字內容時，自動送回伺服器，True為是，預設值為 False不送回

Columns 文字區域顯示的寬度，以字數為單位MaxLength 控制項允許輸入文字的最大長度，不適用在 TextMode屬性

MultilineReadOnly 是否是唯讀控制項，True為是，預設值 False為不是

Rows 文字區域的高度有幾列，只有當 TextMode屬性為Multiline時才需使用

Text 文字控制項的內容TextMode 文字控制項的狀態是密碼（Password）或文字區域（Mulitline）

Wrap 文字區域內容是否自動換行，預設值 True為自動換行，False為不換行，只有當 TextMode屬性為Multiline時才需使用

OnTextChanged 當使用者更改控制項內容時產生 TextChanged事件，需要配合AutoPostBack屬性才會有作用，詳細的說明請參閱第 6-3-2節

6-2-2 TextBox6-2-2 TextBox 文字控制項文字控制項 -- 圖例圖例

6-2-2 TextBox6-2-2 TextBox 文字控制項文字控制項 -- 取得欄取得欄位值位值

Sub button_Click(Sender As Object, _Sub button_Click(Sender As Object, _

E As Eventargs)E As Eventargs)

' ' 顯示欄位值顯示欄位值 Lname.Text = "Lname.Text = " 姓名姓名 : " & name.Text: " & name.Text

Lpass.Text = "Lpass.Text = " 密碼密碼 : " & pass.Text: " & pass.Text

Ladds.Text = "Ladds.Text = " 地址地址 : " & address.Text: " & address.Text

End SubEnd Sub

6-2-3 CheckBox6-2-3 CheckBox 核取方塊控制項核取方塊控制項 --標籤標籤

CheckBoxCheckBox 核取方塊控制項對應核取方塊控制項對應 HTMLHTML 表表單標籤的核取方塊，這是一個複選題，可單標籤的核取方塊，這是一個複選題，可以建立一組切換開關，如下所示：以建立一組切換開關，如下所示：

<asp:CheckBox Id="Tel" <asp:CheckBox Id="Tel"

Text="Text=" 使用電話使用電話 " Runat="server"/>" Runat="server"/> 標籤建立一個名為標籤建立一個名為 TelTel的的 CheckBoxCheckBox 控制控制

項。項。

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

屬性 說明AutoPostBack 是否當使用者更改選項時，自動送回伺服器，True為

是，預設值為 False不送回Checked 檢查 CheckBox控制項是否勾選，預設值 False為沒有，

True為勾選Text 控制項顯示的內容，即 CheckBox控制項的選項文字

TextAlign 選項文字和勾選方框的對齊方式，預設值為 Right靠右對齊，Left為靠左

OnCheckedChanged 當使用者勾選選項是產生 CheckedChanged事件，需要配合 AutoPostBack屬性才會有作用，詳細的說明請參

閱第 6-3-2節

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

6-2-3 CheckBox6-2-3 CheckBox 核取方塊控制項核取方塊控制項 --取得欄位值取得欄位值

CheckBoxCheckBox 控制項的處理是使用控制項的處理是使用 IfIf 條件來條件來檢查檢查 CheckedChecked 屬性，就可以知道是否勾選屬性，就可以知道是否勾選核取方塊，如下所示：核取方塊，如下所示：If Tel.Checked ThenIf Tel.Checked Then

str &= "str &= " 使用電話來確認使用電話來確認 <br>"<br>"

End IfEnd If

6-2-4 RadioButton6-2-4 RadioButton 選擇鈕控制項選擇鈕控制項 --標籤標籤

RadioButtonRadioButton 選擇鈕控制項對應選擇鈕控制項對應 HTMLHTML 表表單標籤的選擇鈕，這是一個單選題，提供單標籤的選擇鈕，這是一個單選題，提供一組選項，但是只能選擇其中之一，如下一組選項，但是只能選擇其中之一，如下所示：所示：<asp:RadioButton Id="Tele" Text="<asp:RadioButton Id="Tele" Text=" 劃撥劃撥 " " GroupName="Payment" GroupName="Payment" Runat="server"/>Runat="server"/>

標籤建立一個名為標籤建立一個名為 TeleTele的的 RadioButtonRadioButton控制項，控制項， GroupNameGroupName 屬性表示它是屬於屬性表示它是屬於名為名為 PaymentPayment 的一組選項之一。的一組選項之一。

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

6-2-4 RadioButton6-2-4 RadioButton 選擇鈕控制項選擇鈕控制項 --取得欄位值取得欄位值

RadioButtonRadioButton 控制項只需使用控制項只需使用 If/Then/ElseIfIf/Then/ElseIf 多多條件來檢查條件來檢查 CheckedChecked 屬性，就可以知道使用者屬性，就可以知道使用者選取的選擇鈕，如下所示：選取的選擇鈕，如下所示：If Card.Checked ThenIf Card.Checked Then

show.Text = Card.Text & "<br>"show.Text = Card.Text & "<br>"

Else If Tele.Checked ThenElse If Tele.Checked Then

show.Text = Tele.Text & "<br>"show.Text = Tele.Text & "<br>"

Else If Cash.Checked ThenElse If Cash.Checked Then

show.Text = Cash.Text & "<br>"show.Text = Cash.Text & "<br>"

End IfEnd If

6-2-5 DropDownList6-2-5 DropDownList 下拉式選單控下拉式選單控制項制項 -- 說明說明

在在WebWeb 控制項的控制項的 ListControlListControl 類別有四種類別有四種選擇功能的控制項物件：選擇功能的控制項物件：• DropDownListDropDownList 控制項。控制項。• ListBoxListBox 控制項。控制項。• CheckBoxListCheckBoxList 控制項。控制項。• RadioButtonListRadioButtonList 控制項。控制項。

6-2-5 DropDownList6-2-5 DropDownList 下拉式選單控下拉式選單控制項制項 -ListControl-ListControl 類別的屬性類別的屬性

選擇功能的控制項是繼承自選擇功能的控制項是繼承自 ListControlListControl 類別，類別，所以可以使用所以可以使用 ListControlListControl 類別的屬性，如下表類別的屬性，如下表所示：所示：

屬性 說明AutoPostBack 是否當使用者更改選擇的選項時，自動送回伺服器，

True為是，預設值為 False不送回Items ListControl控制項所有選項的集合物件

SelectedIndex 選取選項的最小索引值，如為單選，就是選取選項的索引值，沒有選擇傳回-1

SelectedItem 最小選取索引值的 ListItem物件OnSelectedIndexChanged 當使用者更改選項是產生 SelectedIndexChanged事

件，需要配合 AutoPostBack屬性才會有作用，詳細的說明請參閱第 6-3-2節

6-2-5 DropDownList6-2-5 DropDownList 下拉式選單控下拉式選單控制項制項 -- 標籤標籤

DropDownListDropDownList 下拉式選單控制項是一個單選題，下拉式選單控制項是一個單選題，相當於相當於 HTMLHTML 表單標籤的下拉式清單方塊，如下表單標籤的下拉式清單方塊，如下所示：所示：

<asp:DropDownList Id="Ship" <asp:DropDownList Id="Ship" Width="100px" Runat="server">Width="100px" Runat="server">

<asp:ListItem Text="<asp:ListItem Text=" 郵寄郵寄 " " Value="Mail"/>Value="Mail"/>

<asp:ListItem Text="<asp:ListItem Text=" 快遞快遞 " " Value="UPS"/>Value="UPS"/>

<asp:ListItem Text="<asp:ListItem Text=" 自取自取 " Value="Self"/>" Value="Self"/></asp:DropDownList></asp:DropDownList>

6-2-5 DropDownList6-2-5 DropDownList 下拉式選單控下拉式選單控制項制項 -ListItem-ListItem 控制項控制項

DropDownListDropDownList 控制項建立選單顯示的選項和其控制項建立選單顯示的選項和其他選擇功能控制項相同，都是使用他選擇功能控制項相同，都是使用 ListItemListItem 控制控制項。每一個項。每一個 ListItemListItem 控制項是一個選項，其相關控制項是一個選項，其相關屬性，如下表所示：屬性，如下表所示：屬性 說明

Attributes 所有 ListItem控制項的名稱和值的集合物件Selected 選項是否被選取，預設值為 False沒有選取，True為選取

Text 選項顯示的名稱Value 選項值

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

6-2-5 DropDownList6-2-5 DropDownList 下拉式選單控下拉式選單控制項制項 -- 取得欄位值取得欄位值

DropDownListDropDownList 控制項是使用繼承自控制項是使用繼承自ListControlListControl 類別的類別的 SelectedItemSelectedItem 屬性取屬性取得得 ListItemListItem 物件，然後使用物件，然後使用 TextText和和ValueValue 屬性取得選項名稱和值，如下所示：屬性取得選項名稱和值，如下所示：Ship.SelectedItem.TextShip.SelectedItem.Text

Ship.SelectedItem.ValueShip.SelectedItem.Value

6-2-6 ListBox6-2-6 ListBox 清單方塊控制項清單方塊控制項 -- 標標籤籤

ListBoxListBox 清單方塊控制項也是一種選擇題，相當清單方塊控制項也是一種選擇題，相當於於 HTMLHTML 表單標籤的清單方塊，可以設定單選或表單標籤的清單方塊，可以設定單選或複選，如下所示複選，如下所示

<asp:ListBox Id="Gift" SelectionMode="Multiple"<asp:ListBox Id="Gift" SelectionMode="Multiple"

Runat="server">Runat="server">

<asp:ListItem Text="<asp:ListItem Text=" 滑鼠滑鼠 " Value="1" " Value="1"

Selected="True"/>Selected="True"/>

<asp:ListItem Text="<asp:ListItem Text=" 鍵盤鍵盤 " Value="2"/>" Value="2"/>

<asp:ListItem Text="<asp:ListItem Text=" 喇叭喇叭 " Value="3"/>" Value="3"/>

<asp:ListItem Text="<asp:ListItem Text=" 麥克風麥克風 " Value="4"/>" Value="4"/>

</asp:ListBox></asp:ListBox>

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

屬性 說明Rows ListBox控制項的高，預設值是 4

SelectionMode 控制項的選擇方式，Single為單選，Multiple為複選ToolTip 當滑鼠移到控制項上時，顯示的文字內容

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

6-2-6 ListBox6-2-6 ListBox 清單方塊控制項清單方塊控制項 -- 取取得欄位值得欄位值

對於單選的對於單選的 ListBoxListBox 控制項，取得選取選項的方控制項，取得選取選項的方式和式和 DropDownListDropDownList 控制項相同。控制項相同。

以此例為複選，所以需要使用以此例為複選，所以需要使用 For/NextFor/Next 迴路來迴路來取得使用者選取的所有選項，如下所示：取得使用者選取的所有選項，如下所示：

For i = 0 to Gift.Items.Count-1For i = 0 to Gift.Items.Count-1

If Gift.Items(i).Selected Then If Gift.Items(i).Selected Then

str = str & Gift.Items(i).Text & "<br>"str = str & Gift.Items(i).Text & "<br>"

End IfEnd If

NextNext

6-2-7 CheckBoxList6-2-7 CheckBoxList 核取方塊清單核取方塊清單控制項控制項 -- 標籤標籤

CheckBoxListCheckBoxList 核取方塊清單控制項相當於是一組核取方塊清單控制項相當於是一組CheckBoxCheckBox 控制項，這是複選的控制項，簡單的說，它可控制項，這是複選的控制項，簡單的說，它可以讓我們輕鬆編排多個以讓我們輕鬆編排多個 CheckBoxCheckBox 控制項，如下所示：控制項，如下所示：

<asp:CheckBoxList Id="Gift“<asp:CheckBoxList Id="Gift“ RepeatDirection="Horizontal“RepeatDirection="Horizontal“ Runat="server">Runat="server"> <asp:ListItem Text="<asp:ListItem Text=" 滑鼠滑鼠 " Value="1" " Value="1" Selected="True"/>Selected="True"/> <asp:ListItem Text="<asp:ListItem Text=" 鍵盤鍵盤 " Value="2"/>" Value="2"/> <asp:ListItem Text="<asp:ListItem Text=" 喇叭喇叭 " Value="3"/>" Value="3"/> <asp:ListItem Text="<asp:ListItem Text=" 麥克風麥克風 " Value="4"/>" Value="4"/></asp:CheckBoxList></asp:CheckBoxList>

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

屬性 說明CellPadding 儲存格中邊界和內容間的距離，以像素為單位，預設值為-1

CellSpacing 儲存格間的距離RepeatColumns 使用多少欄來排列 CheckBoxList控制項，預設值為 0

RepeatDirection 排列方向，預設值是 Vertical垂直，或是 Horizontal水平排列

RepeatLayout 排列的版面配置，預設值 Table是使用表格，或是 Flow為一直線排列

TextAlign 選項文字和勾選方框的對齊方式，預設值為 Right靠右對齊，Left為靠左

6-2-7 CheckBoxList6-2-7 CheckBoxList 核取方塊清單核取方塊清單控制項控制項 -- 圖例與取得欄位值圖例與取得欄位值

CheckBoxListCheckBoxList 控制項取得選項方式和複選的控制項取得選項方式和複選的ListBoxListBox 控制項相同。控制項相同。

6-2-8 RadioButtonList6-2-8 RadioButtonList 選擇鈕清單選擇鈕清單控制項控制項 -- 標籤標籤

RadioButtonListRadioButtonList 選擇鈕清單控制項是一組選擇鈕清單控制項是一組RadioButtonRadioButton 控制項，這是一個單選的控制項，控制項，這是一個單選的控制項，簡單的說，它可以讓我們輕鬆編排多個簡單的說，它可以讓我們輕鬆編排多個RadioButtonRadioButton 控制項，如下所示：控制項，如下所示：

<asp:RadioButtonList Id="Payment" <asp:RadioButtonList Id="Payment" RepeatDirection="Horizontal" RepeatDirection="Horizontal"

Runat="server">Runat="server"> <asp:ListItem Text="<asp:ListItem Text=" 信用卡信用卡 " Value="1"/>" Value="1"/> <asp:ListItem Text="<asp:ListItem Text=" 劃撥劃撥 " Value="2" " Value="2"

Selected="True"/>Selected="True"/> <asp:ListItem Text="<asp:ListItem Text=" 到貨付款到貨付款 " "

Value="3"/>Value="3"/></asp:RadioButtonList></asp:RadioButtonList>

6-2-8 RadioButtonList6-2-8 RadioButtonList 選擇鈕清單選擇鈕清單控制項控制項 -- 圖例與取得欄位值圖例與取得欄位值

RadioButtonListRadioButtonList 控制項取得選項方式和控制項取得選項方式和DropDownListDropDownList 控制項相同。控制項相同。

6-3 6-3 表單送回功能表單送回功能 6-3-1 6-3-1 表單的表單的 IsPostBackIsPostBack 屬性屬性 6-3-2 6-3-2 控制項的控制項的 AutoPostBackAutoPostBack 屬性屬性

6-3 6-3 表單送回功能表單送回功能 WebWeb 表單輸入控制項可以讓使用者輸入或選取資表單輸入控制項可以讓使用者輸入或選取資

料，當使用者在客戶端輸入資料後，將資料送回料，當使用者在客戶端輸入資料後，將資料送回伺服端處理，稱為表單送回（伺服端處理，稱為表單送回（ PostbackPostback ）。表）。表單送回功能預設是送到本身的單送回功能預設是送到本身的 ASP.NETASP.NET 程式，程式，相關屬性如下所示：相關屬性如下所示：• PagePage 物件的物件的 IsPostBackIsPostBack 屬性：檢查是否是第屬性：檢查是否是第 11 次載次載入入 ASP.NETASP.NET 程式，或是已經在客戶端執行過表單送回。程式，或是已經在客戶端執行過表單送回。

• 伺服端控制項的伺服端控制項的 AutoPostBackAutoPostBack 屬性：屬性： WebWeb 控制項控制項如果將如果將 AutoPostBackAutoPostBack 屬性設為屬性設為 TrueTrue ，當控制項資，當控制項資料變更時，就自動執行客戶端表單送回。料變更時，就自動執行客戶端表單送回。

6-3-1 6-3-1 表單的表單的 IsPostBackIsPostBack 屬性屬性 在在 Page_Load()Page_Load() 事件處理程序可以使用事件處理程序可以使用

IsPostBackIsPostBack 屬性檢查是否已經送回資料，如下所屬性檢查是否已經送回資料，如下所示：示：

If IsPostBack ThenIf IsPostBack Then If NameTextBox.Text <> "" ThenIf NameTextBox.Text <> "" Then showName.Text = _showName.Text = _ nameTextBox.Text & "nameTextBox.Text & " 您好您好 !"!" End IfEnd IfElseElse NameTextBox.Text = "NameTextBox.Text = " 江小魚江小魚 ""End IfEnd If

6-3-2 6-3-2 控制項的控制項的 AutoPostBackAutoPostBack 屬屬性性 -1-1

WebWeb 控制項如果有控制項如果有 AutoPostBackAutoPostBack 屬性，我們可以使用屬性，我們可以使用控制項的自動送回功能。例如：控制項的自動送回功能。例如： DropDownListDropDownList 控制項，控制項，如下所示：如下所示：

<asp:DropDownList Id="Username" Width="100px" <asp:DropDownList Id="Username" Width="100px" AutoPostBack="True" AutoPostBack="True" OnSelectedIndexChanged="Change_Name" OnSelectedIndexChanged="Change_Name"

Runat="server">Runat="server"> <asp:ListItem Text="<asp:ListItem Text=" 陳會安陳會安 " Value="001"/>" Value="001"/> <asp:ListItem Text="<asp:ListItem Text=" 江小魚江小魚 " Value="002"/>" Value="002"/> <asp:ListItem Text="<asp:ListItem Text=" 張無忌張無忌 " Value="003"/>" Value="003"/></asp:DropDownList></asp:DropDownList> WebWeb 控制項將控制項將 AutoPostBackAutoPostBack 屬性設為屬性設為 TrueTrue ，表示當，表示當

更改選項資料時，就會自動送回（不用按更改選項資料時，就會自動送回（不用按【【送出送出】】鈕）。鈕）。

6-3-2 6-3-2 控制項的控制項的 AutoPostBackAutoPostBack 屬屬性性 -2-2

AutoPostBackAutoPostBack 屬性支援的屬性支援的 WebWeb 控制項和控制項和事件，如下表所示：事件，如下表所示：

Web控制項 支援的事件TextBox TextChangedCheckBox、RadioButton CheckChanged

DropDownList、CheckBoxList、ListBox、RadioButtonList

SelectedIndexChanged

6-4 6-4 表單的顯示狀態表單的顯示狀態 6-4-1 6-4-1 顯示狀態的基礎顯示狀態的基礎 6-4-2 6-4-2 保留保留 PostBackPostBack 表單送回的其他資表單送回的其他資

料料

6-4-1 6-4-1 顯示狀態的基礎顯示狀態的基礎 -- 說明說明 「顯示狀態」（「顯示狀態」（ ViewStateViewState ）是一種）是一種

ASP.NETASP.NET 機制，能夠保留伺服端控制項的機制，能夠保留伺服端控制項的狀態，也就是儲存其值。狀態，也就是儲存其值。

例如：在例如：在 WebWeb 表單表單 TextBoxTextBox 控制項輸入控制項輸入值，不論送回（值，不論送回（ PostbackPostback ）多少次，除）多少次，除非更改非更改 TextBoxTextBox 控制項的值，否則顯示狀控制項的值，否則顯示狀態都能夠自動保留其值。態都能夠自動保留其值。

6-4-1 6-4-1 顯示狀態的基礎顯示狀態的基礎 -- 為什麼為什麼 顯示狀態是使用隱藏欄位儲存狀態資料，請檢視顯示狀態是使用隱藏欄位儲存狀態資料，請檢視

程式範例可以看到程式範例可以看到 <input type="hidden"><input type="hidden"> 標標籤，如下所示：籤，如下所示：

<form name="ctl00" method="post" action="Ch6-<form name="ctl00" method="post" action="Ch6-4-1ViewState.aspx" id="ctl00">4-1ViewState.aspx" id="ctl00">

<input type="hidden" name="__VIEWSTATE" <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg1MzkyMzgwOA9kFgICBA8Pvalue="/wEPDwUKLTg1MzkyMzgwOA9kFgICBA8PFgIeBFRleHQFD+mZs+acg+WuiSA6IOe2oGRkZDeFgIeBFRleHQFD+mZs+acg+WuiSA6IOe2oGRkZDeOgTJJRCvPQy/qaVBTQ0SEVPqB" />OgTJJRCvPQy/qaVBTQ0SEVPqB" />

……… ………....</form></form> <input><input> 標籤的標籤的 valuevalue 屬性值是亂碼值，這就是顯示狀屬性值是亂碼值，這就是顯示狀

態儲存的值。態儲存的值。

6-4-2 6-4-2 保留保留 PostBackPostBack 表單送回的其表單送回的其他資料他資料 -- 說明說明 11

WebWeb 表單的表單送回（預設是送回給自表單的表單送回（預設是送回給自已）使用已）使用 ViewStateViewState 顯示狀態保留控制項顯示狀態保留控制項的內容，如果屬於程式碼變數，或其他網的內容，如果屬於程式碼變數，或其他網頁使用頁使用 URLURL 傳遞的參數並不會保留其值，傳遞的參數並不會保留其值，在表單送回後，這些參數和變數值也會消在表單送回後，這些參數和變數值也會消失。失。

6-4-2 6-4-2 保留保留 PostBackPostBack 表單送回的其表單送回的其他資料他資料 -- 說明說明 22

在在 ASP.NETASP.NET 提供多種方法來保留這些變數提供多種方法來保留這些變數或參數值，如下所示：或參數值，如下所示：• 使用使用 CookieCookie保留變數值，詳見第保留變數值，詳見第 44 章。章。• 使用使用 SessionSession 變數保留變數值，詳細的說明請變數保留變數值，詳細的說明請參閱第參閱第 1111 章。章。

• 使用使用 ProfileProfile 物件的屬性保留變數值，詳細的物件的屬性保留變數值，詳細的說明請參閱第說明請參閱第 1414 章。章。

• 使用使用 HtmlInputHiddenHtmlInputHidden隱藏欄位控制項保留隱藏欄位控制項保留變數值。變數值。

• 使用顯示狀態的使用顯示狀態的 StateBagStateBag 物件保留變數值。物件保留變數值。

6-4-2 6-4-2 保留保留 PostBackPostBack 表單送回的其表單送回的其他資料他資料 --HtmlInputHiddenHtmlInputHidden 隱藏欄位控隱藏欄位控

制項制項 HTMLHTML 控制項的控制項的 HtmlInputHiddenHtmlInputHidden 控制控制

項相當於是項相當於是 HTMLHTML 標籤的隱藏欄位，如下標籤的隱藏欄位，如下所示：所示：<input Id="MyName" type="hidden" <input Id="MyName" type="hidden"

Runat="server">Runat="server"> 標籤是隱藏欄位控制項，使用標籤是隱藏欄位控制項，使用 ValueValue 屬性屬性

來儲存變數值，如下所示：來儲存變數值，如下所示：MyName.Value = nameMyName.Value = name

6-4-2 6-4-2 保留保留 PostBackPostBack 表單送回的其表單送回的其他資料他資料 -- 顯示狀態的顯示狀態的 StateBagStateBag 物件物件

在顯示狀態的在顯示狀態的 StateBagStateBag 物件是一種集合物件是一種集合物件，內含伺服端控制項的顯示狀態資訊，物件，內含伺服端控制項的顯示狀態資訊，我們可以新增我們可以新增 StateBagStateBag 物件元素來保留物件元素來保留Visual BasicVisual Basic 的變數值，如下所示：的變數值，如下所示：ViewState("NickName") = nickViewState("NickName") = nick

程式碼新增程式碼新增 StateBagStateBag 物件的元素，這是物件的元素，這是名為名為 NickNameNickName 的元素，名稱是一個字串，的元素，名稱是一個字串，其值就是保留的變數值。其值就是保留的變數值。

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

6-5-1 6-5-1 表單欄位驗證的種類表單欄位驗證的種類 表單欄位驗證以把關的位置來區分，可以表單欄位驗證以把關的位置來區分，可以

分為兩種，如下所示：分為兩種，如下所示：• 客戶端表單欄位驗證：在尚未送到伺服端前，客戶端表單欄位驗證：在尚未送到伺服端前，

在客戶端的瀏覽程式進行檢查，即使用在客戶端的瀏覽程式進行檢查，即使用JavaScriptJavaScript或或 VBScriptVBScript 程式碼執行欄位值的程式碼執行欄位值的檢查。檢查。

• 伺服端表單欄位驗證：伺服端表單欄位驗證是伺服端表單欄位驗證：伺服端表單欄位驗證是在資料送到伺服端後，才進行資料的檢查。在資料送到伺服端後，才進行資料的檢查。

6-5-2 ASP.NET6-5-2 ASP.NET 的伺服端驗證控制的伺服端驗證控制項項 -- 說明說明

驗證控制項也是驗證控制項也是 WebWeb 控制項，屬於控制項，屬於System.Web.UI.WebControlsSystem.Web.UI.WebControls 名稱空間的物件。名稱空間的物件。我們可以在我們可以在 WebWeb 表單新增驗證控制項，來執行表單新增驗證控制項，來執行指定控制項的驗證功能。指定控制項的驗證功能。

WebWeb 表單如果擁有驗證控制項，就可以使用表單如果擁有驗證控制項，就可以使用PagePage 物件的物件的 IsValidIsValid 屬性來確認表單是否通過驗屬性來確認表單是否通過驗證，如下所示：證，如下所示：If Page.IsValid ThenIf Page.IsValid Then

Lname.Text = "Lname.Text = " 姓名姓名 : " & name.Text: " & name.Text

Lpass.Text = "Lpass.Text = " 密碼密碼 : " & pass.Text: " & pass.Text

End IfEnd If

6-5-2 ASP.NET6-5-2 ASP.NET 的伺服端驗證控制的伺服端驗證控制項項 -- 控制項控制項

驗證控制項依照不同功能，分為六種驗證控制項，驗證控制項依照不同功能，分為六種驗證控制項，如下表所示：如下表所示：驗證控制項 說明

RequiredFiledValidator 使用者一定需要輸入資料或選取選項，不能跳過此欄位不輸入，例如：不可以不輸入使用者名稱

CompareValidator 將使用者輸入控制項的值，與常數或其他控制項值進行比較，例如：兩次輸入的密碼是否相同

RangeValidator 使用者輸入控制項的值是一個範圍，需要在一定範圍才符合規則，例如：年齡需要大於 20，小於 80

RegularExpressionValidator 使用「正規運算式」（Regular Express）的範本字串檢查輸入的資料，例如：身份證字號或電子郵件地

址欄位CustomValidator 自行撰寫程序檢查欄位值

ValidationSummary 顯示Web表單所有驗證控制項錯誤訊息的摘要資訊

6-6 6-6 伺服端的驗證控制項伺服端的驗證控制項 6-6-1 RequiredFieldValidator6-6-1 RequiredFieldValidator 驗證控制項驗證控制項 6-6-2 CompareValidator6-6-2 CompareValidator 驗證控制項驗證控制項 6-6-3 RangeValidator6-6-3 RangeValidator 驗證控制項驗證控制項

這一節說明這一節說明RequiredFieldValidatorRequiredFieldValidator、、 CompareVaCompareValidatorlidator和和 RangeValidatorRangeValidator 三種基本驗證三種基本驗證控制項的使用，其他驗證控制項的說明，控制項的使用，其他驗證控制項的說明，

請參閱附錄請參閱附錄 AA 。。

6-6-1 RequiredFieldValidator6-6-1 RequiredFieldValidator 驗證驗證控制項控制項 -- 標籤標籤

RequiredFieldValidatorRequiredFieldValidator 驗證控制項可以檢查指驗證控制項可以檢查指定控制項是否忘了輸入資料或沒有選取選項，如定控制項是否忘了輸入資料或沒有選取選項，如下所示：下所示：

<asp:RequiredFieldValidator Id="validName"<asp:RequiredFieldValidator Id="validName"

ControlToValidate="name"ControlToValidate="name"

ErrorMessage="ErrorMessage="請輸入名稱請輸入名稱 !" Runat="server"/>!" Runat="server"/> 標籤建立名為標籤建立名為 validNamevalidName的的

RequiredFieldValidatorRequiredFieldValidator 控制控制項，項， ControlToValidateControlToValidate 屬性指出需要驗證的控屬性指出需要驗證的控制項名稱，制項名稱， ErrorMessageErrorMessage 屬性是驗證錯誤時顯屬性是驗證錯誤時顯示的訊息。示的訊息。

6-6-1 RequiredFieldValidator6-6-1 RequiredFieldValidator 驗證驗證控制項控制項 -InitialValue-InitialValue 屬性屬性

InitialValueInitialValue 屬性是用來指定驗證欄位不能輸入屬性是用來指定驗證欄位不能輸入的值，如下所示：的值，如下所示：

<asp:RequiredFieldValidator Id="validPass"<asp:RequiredFieldValidator Id="validPass"

ControlToValidate="pass" InitialValue="1234"ControlToValidate="pass" InitialValue="1234"

ErrorMessage="ErrorMessage="請輸入密碼請輸入密碼 !" Runat="server"/>!" Runat="server"/> 驗證控制項要求控制項驗證控制項要求控制項 passpass 輸入資料不可以是輸入資料不可以是【【 12341234】】，此時，如果沒有輸入密碼反而可以，此時，如果沒有輸入密碼反而可以通過驗證。通過驗證。

6-6-2 CompareValidator6-6-2 CompareValidator 驗證控制驗證控制項項 -- 標籤標籤

CompareValidatorCompareValidator 驗證控制項可以比較驗證控制項可以比較 22 個控個控制項的值，或是和一個指定常數值進行比較，以制項的值，或是和一個指定常數值進行比較，以檢查控制項值是否符合條件，如下所示：檢查控制項值是否符合條件，如下所示：

<asp:CompareValidator Id="validComp" <asp:CompareValidator Id="validComp" ControlToValidate="pass" ControlToValidate="pass" ControlToCompare="pass1" ControlToCompare="pass1" Type="String" Display="Dynamic"Type="String" Display="Dynamic" ErrorMessage="ErrorMessage=" 輸入密碼不相同輸入密碼不相同 !" !"

Runat="server"/>Runat="server"/> 標籤建立名為標籤建立名為 validCompvalidComp的的

CompareValidatorCompareValidator 控制項，此驗證控制項是比控制項，此驗證控制項是比較控制項較控制項 passpass和和 pass1pass1 的值是否相等（預設是的值是否相等（預設是EqualEqual比較），比較值的資料型態是比較），比較值的資料型態是 StringString 字串。字串。

6-6-2 CompareValidator6-6-2 CompareValidator 驗證控制驗證控制項項 -- 屬性屬性

屬性 說明ControlToCompare 用來比較的控制項名稱ValueToCompare 用來比較的常數值

Type 繼承自 BaseCompareValidator類別的屬性，這是比較前需要轉換成的資料型態，可以是 String、Integer、Double、Date

和 Currency資料型態Operator 使用哪種比較運算子進行比較，預設是 Equal

6-6-2 CompareValidator6-6-2 CompareValidator 驗證控制驗證控制項項 --比較運算子比較運算子

運算子 說明Equal 相等

NotEqual 不相等GreaterThan 大於

GreaterThanEqual 大於等於LessThan 小於

LessThanEqual 小於等於DataTypeCheck 資料型態的比較，比較控制項的值是否為 Type屬性指定的

資料型態，驗證錯誤是指值無法轉換成指定的資料型態

6-6-3 RangeValidator6-6-3 RangeValidator 驗證控制項驗證控制項 --標籤標籤

RangeValidatorRangeValidator 驗證控制項可以檢查控制項的驗證控制項可以檢查控制項的值，是否在指定的範圍內，如下所示：值，是否在指定的範圍內，如下所示：

<asp:RangeValidator Id="validRange"<asp:RangeValidator Id="validRange" ControlToValidate="age" Display="Dynamic"ControlToValidate="age" Display="Dynamic" Type="Integer" MinimumValue="21" Type="Integer" MinimumValue="21" MaximumValue="80"MaximumValue="80" ErrorMessage="ErrorMessage="年齡範圍年齡範圍 21~80!" 21~80!"

Runat="server"/>Runat="server"/> 驗證控制項檢查控制項驗證控制項檢查控制項 ageage 值是否大於等於值是否大於等於

MinimumValueMinimumValue 屬性的屬性的 2121且小於等於且小於等於MaximumValueMaximumValue 屬性的屬性的 8080 ，比較值的資料型，比較值的資料型態是態是 IntegerInteger整數。整數。

6-6-3 RangeValidator6-6-3 RangeValidator 驗證控制項驗證控制項 --屬性屬性

屬性 說明MaximumValue 比較範圍的最大值MinimumValue 比較範圍的最小值

Type 繼承自 BaseCompareValidator類別的屬性，這是在比較前需要轉換成的資料型態，可以是 String、Integer、Double、

Date和 Currency資料型態

6-7 6-7 表單的重設按鈕表單的重設按鈕 6-7-1 6-7-1 取消客戶端驗證控制項的功能取消客戶端驗證控制項的功能 6-7-2 6-7-2 取消伺服端驗證控制項的功能取消伺服端驗證控制項的功能

6-7-1 6-7-1 取消客戶端驗證控制項的功能取消客戶端驗證控制項的功能 取消客戶端驗證功能改為伺服端驗證，使用的是取消客戶端驗證功能改為伺服端驗證，使用的是

PagePage 指引指令的指引指令的 ClientTargetClientTarget 屬性，如下所示：屬性，如下所示：<%@ Page ClientTarget="DownLevel" %><%@ Page ClientTarget="DownLevel" %> 上述上述 PagePage 指引指令的指引指令的 ClientTargetClientTarget 屬性，可以屬性，可以

指定瀏覽程式的版本，其值如下所示：指定瀏覽程式的版本，其值如下所示：• UpLevelUpLevel ：客戶端瀏覽程式使用：客戶端瀏覽程式使用 Internet Explorer Internet Explorer

5.55.5 或以上版本。或以上版本。• DownLevelDownLevel ：客戶端瀏覽程式使用：客戶端瀏覽程式使用 Internet Internet

Explorer 5.5Explorer 5.5 以下版本，或非以下版本，或非 Internet ExplorerInternet Explorer 瀏瀏覽程式。覽程式。

6-7-2 6-7-2 取消伺服端驗證控制項的功取消伺服端驗證控制項的功能能 -1-1

當當WebWeb 表單驗證控制項是使用伺服端驗證功能表單驗證控制項是使用伺服端驗證功能時，如果想在時，如果想在 WebWeb 表單建立表單建立【【重設重設】】鈕重設欄鈕重設欄位成為預設值，因為目前控制項輸入值可能並不位成為預設值，因為目前控制項輸入值可能並不符合驗證條件，我們需要暫時取消伺服端控制項符合驗證條件，我們需要暫時取消伺服端控制項的功能，如下所示：的功能，如下所示：validComp.IsValid = TruevalidComp.IsValid = TruevalidName.IsValid = TruevalidName.IsValid = TruevalidPass.IsValid = TruevalidPass.IsValid = True

程式碼將驗證控制項的程式碼將驗證控制項的 IsValidIsValid 屬性設為屬性設為 TrueTrue ，，表示通過驗證，如此可以騙過表示通過驗證，如此可以騙過 Page.IsValidPage.IsValid 屬性，屬性，而不會顯示驗證錯誤訊息，然後就可以設定控制而不會顯示驗證錯誤訊息，然後就可以設定控制項的初值。項的初值。

6-7-2 6-7-2 取消伺服端驗證控制項的功取消伺服端驗證控制項的功能能 -2-2

如果不是暫時取消，而是希望永遠取消伺如果不是暫時取消，而是希望永遠取消伺服端驗證控制項功能，我們只需將服端驗證控制項功能，我們只需將 WebWeb 控控制項的制項的 EnabledEnabled 屬性設為屬性設為 FalseFalse ，如下所，如下所示：示：validComp.Enabled = FalsevalidComp.Enabled = False

程式碼取消名為程式碼取消名為 validCompvalidComp的的CompareValidatorCompareValidator 驗證控制項的功能，驗證控制項的功能，換句話說，驗證控制項已經失去作用。換句話說，驗證控制項已經失去作用。