Web 控制項 資科系林偉川 Web 表單的 ViewState 狀態管理 顯示狀態 (ViewState) 屬於 ASP.NET 的機制, 它可以保留伺服端控制項的狀態, 也就是輸入的值, 例如 : 在 Web 表單擁有文字方塊控制項, 一旦輸入值, 不論表單送回 (Postback) 多少次, 除非更改控制項的值, 否則顯示狀態都能夠自動保留欄位值 2 1
ViewState 狀態管理的基礎 ASP.NET 使用隱藏欄位儲存狀態資料, 檢視原始程式碼, 可以在表單標籤 <form> 看到一個 <input type= hidden > 標籤, 如下所示 : <form name="_ctl0" method="post" action="ch6-6-2.aspx" id="_ctl0"> <input type="hidden" name=" VIEWSTATE" value="ddw1ndcxntm5mdt0pdtspgk8nt47pjtsphq8cdxspglubmv yahrtbds+o2w85aet5zcnoidpmbpmniplrok7pj47oz47pj47bdxjbw FnZUJ1dHRvbjs+Ph+XBt91mZRDB1Koh62i3D87KY+B" /> </form> 3 取消 ViewState 狀態管理 ViewState 狀態管理是 Web 表單的預設功能, 如果 ASP.NET 程式不希望擁有此功能, 只需在程式檔案開頭的 Page 指引加上 EnableViewState 屬性值為 False, 如下所示 : <%@ Page Language="VB" EnableViewState="False" %> 如果只有指定的控制項, 只需在控制項標籤加上 EnableViewState="False" 屬性即可取消指定控制項的狀態管理, 如下所示 : <asp:textbox id="name" Width="200px" EnableViewState="False" runat="server"/> 4 2
Web 控制項的基礎 Web 控制項是一組比 HTML 控制項功能更強大的控制項, 不僅可以建立 Web 表單, 它還包括資料顯示的相關控制項, 其語法是使用 XML 標籤的寫法, 如下所示 : <asp:textbox id="name" Width="200px" runat="server"/> Web 控制項使用 asp 字頭的 XML 標籤,: 符號後是控制項種類, 以此例是 TexBox 控制項, id 屬性為控制項名稱, 同樣需要 runat 屬性值 Server, 指明是位在伺服端處理 5 Web 控制項的種類 Web 控制項標籤說明 Label <asp:label /> 顯示文字內容 TextBox <asp:textbox /> 文字方塊 密碼欄位和文字區域 CheckBox <asp:checkbox /> 核取方塊 RadioButton <asp:radiobutton /> 選擇鈕 DropDownList <asp:dropdownlist /> 下拉式選單 ListBox <asp:listbox /> 清單方塊 CheckBoxList <asp:checkboxlist /> 一組核取方塊 RadioButtonList <asp:radiobuttonlist /> 一組選擇鈕 Button <asp:button /> 按鈕 LinkButton <asp:linkbutton /> 超連結按鈕 ImageButton <asp:imagebutton /> 影像按鈕 6 3
Web 控制項的屬性 屬性 說明 Height 設定控制項的高度, 可以使用 px 像數或百分比 Width 設定控制項的寬度, 可以使用 px 像數或百分比 Font BackColor 設定控制項的字型, 如下所示 : Font-Name: 字型名稱 Font-Size: 字型尺寸, 以 pt 為單位 Font-Bold: 粗體字 Font-Underline: 底線字 Font-Italic: 斜體字 設定控制項的背景色彩, 可以使用色彩名稱或色彩值 ForeColor 設定控制項的前景色彩, 可以使用色彩名稱或色彩值 BorderColor 設定控制項邊框的色彩 BorderStyle 設定控制項邊框的樣式, 可以是 NotSet None Dotted Dashed S olid Double Groove Ridge Insert 和 Outset BorderWidth 設定控制項邊框的寬度 Style 在控制項使用局部套用的 CSS 層級式樣式表 CSSClass 在控制項使用 Class 的 CSS 樣式名稱 7 Label 標籤控制項 Label 標籤控制項的目的是在網頁顯示文字內容, 它會轉換成 HTML 的 <span> 標籤, 一個 Label 標籤控制項的範例, 如下所示 : <asp:label id="name" Width="200px" BorderStyle="solid" BorderColor="#ccccff" runat="server"/> 屬性 Text 說明 存取 Label 控制項顯示的值 8 4
TextBox 文字控制項 TextBox 文字控制項就是 HTML 控制項的文字方塊 密碼欄位和文字區域,TextBox 控制項的範例, 如下所示 : <asp:textbox id="name" runat="server"/> <asp:textbox id="pass" TextMode="Password" runat="server"/> <asp:textbox id="address" TextMode="Multiline" Rows="3" runat="server"/> 一共建立 3 個 TextBox 控制項,TextMode 屬性指定欄位種類是密碼欄位 (Password) 或文字區域 (Multiline) 9 TextBox 文字控制項屬性 屬性與事件 Columns MaxLength ReadOnly Rows Text TextMode 說明指定文字顯示的寬度, 以字數為單位設定控制項允許輸入文字的最大長度, 不適用在 TextMode 屬性為 Multiline 是否為唯讀控制項,True 為是, 預設值 False 為不是當 TextMode 屬性為 Multiline 時, 設定文字區域的高度有幾列存取文字控制項的內容設定文字控制項的狀態為密碼 (Password ) 或文字區域 (Mulitline) Wrap OnTextChanged 當 TextMode 屬性為 Multiline 時, 設定文字區域內容是否自動換行, 預設值 True 為自動換行,False 為不換行當使用者更改控制項內容時產生此事件, 需要配合 AutoPostBack 屬性才會有作用, 詳細的說明請參閱第 8 章 10 5
TextBox 文字控制項 取得 TextBox 控制項值是使用 Text 屬性 (VB.NET), 如下所示 : name.text pass.text address.text 11 CheckBox 核取方塊控制項 CheckBox 核取方塊控制項是一個複選題, 可以建立一組切換開關, 如下所示 : <asp:checkbox id="tel" Text=" 使用電話 " runat="server"/> 上述標籤建立名為 Tel 的 CheckBox 控制項 12 6
CheckBox 核取方塊 - 屬性與事件 屬性與事件 Checked Text TextAlign OnCheckedChanged 說明檢查 CheckBox 控制項是否勾選, 預設值 False 為沒有,True 為勾選存取控制項顯示的內容, 即 CheckBox 控制項的選項文字設定選項文字和勾選方框的對齊方式, 預設值為 Right 靠右對齊,Left 為靠左當使用者勾選選項是產生此事件, 需要配合 AutoPostBack 屬性才會有作用, 詳細的說明請參閱第 8 章 13 CheckBox 核取方塊控制項 - 使用 CheckBox 控制項的處理和 HtmlInputCheckBox 控制項相同, 只需使用 If 條件檢查 Checked 屬性, 就可以知道是否勾選核取方塊, 如下所示 : If Tel.Checked Then str &= " 使用電話來確認 <br>" End If 14 7
RadioButton 選擇鈕控制項 RadioButton 選擇鈕控制項是一個單選題, 提供一組選項, 只能選擇其中之一, 如下所示 : <asp:radiobutton id="tele" Text=" 劃撥 " GroupName="Payment" runat="server"/> 建立名為 Tele 的 RadioButton 控制項 15 RadioButton 選擇鈕控制項 - 屬性 屬性 GroupName 說明 設定 RadioButton 控制項為同一組選項 RadioButton 控制項提供 CheckBox 控制項的相關屬性 :Checked Text TextAlign 屬性和 OnCheckedChanged 事件 16 8
RadioButton 選擇鈕控制項 - 使用 RadioButton 控制項和 HtmlInputRadioButton 控制項相同, 只需使用 If 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 17 清單控制項 Web 控制項提供 4 種清單選擇功能的控制項 : DropDownList ListBox CheckBoxList 和 RadioButtonList 控制項, 其每一個選項是一個 ListItem 控制項 18 9
清單控制項 - 屬性與事件 屬性與事件 Items SelectedIndex SelectedItem 說明取得清單控制項所有選項的集合物件存取在控制項選取選項的最小索引值, 如果是單選, 就是選取選項的索引值, 沒有選擇傳回 -1 取得最小選取索引值的 ListItem 控制項 OnSelectedIndexChanged 當使用者更改選項就會產生此事件, 需要配合 AutoPostBack 屬性才會有作用, 詳細的說明請參閱 第 8 章 19 DropDownList 下拉式選單控制項 DropDownList 下拉式選單控制項是一個單選題, 相當於單選的 HtmlSelect 控制項, 如下所示 : <asp:dropdownlist id="shipment" Width="100px" runat="server"> <asp:listitem Text=" 郵寄 " Value="Mail"/> <asp:listitem Text=" 快遞 " Value="UPS"/> <asp:listitem Text=" 自取 " Value="Self"/> </asp:dropdownlist> 20 10
DropDownList 下拉式選單控制項 屬性 ToolTip 說明 存取當滑鼠移到控制項上時, 顯示的文字內容 ListItem 控制項相關屬性, 如下表所示 : 屬性 Selected Text Value 說明指出此選項是否被選取, 預設值為 False 沒有選取,True 為選取設定和取得選項名稱設定和取得選項值 21 DropDownList 下拉式選單控制項 在 DropDownList 控制項可以檢查 SelectedIndex 屬性值是否為 -1, 以確定使用者是否選取, 如下 : If Shipment.SelectedIndex > - 1 Then End If 如果使用者已經選取, 接著使用 SelectedItem 屬性取得 ListItem 物件, 以 Text 和 Value 屬性取得選項名稱和值, 如下所示 : Shipment.SelectedItem.Text Shipment.SelectedItem.Value 22 11
ListBox 清單方塊控制項 ListBox 清單方塊控制項可以設定成單選或複選, 顯示方式如同複選的 HtmlSelect 控制項, 如下 : <asp:listbox id="gifts" 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> 標籤建立名為 Gifts 的 ListBox 控制項, 因為 SelectionMode 屬性值是 Multiple, 所以為多選 23 ListBox 清單方塊控制項 屬性 說明 Rows 設定和取得 ListBox 控制項的高, 預設值是 4 SelectionMode 設定控制項的選擇方式,Single 為單選,Multiple 為複選 ToolTip 存取當滑鼠移到控制項上時, 顯示的文字內容 24 12
ListBox 清單方塊控制項 如果是單選的 ListBox 控制項, 其取得選取選項的方式和 DropDownList 控制項相同 複選需要使用 For Next 迴圈取得選取的選項, 如下 : For i = 0 to Gifts.Items.Count-1 If Gifts.Items(i).Selected Then str = str & Gifts.Items(i).Text & "<br>" End If Next i Items 屬性取得所有選項的集合物件,Count 屬性取得選項數,Gifts.Items(i).Selected 檢查選項是否選取,Text 或 Value 屬性取得選項名稱和值 25 CheckBoxList 核取方塊清單控制項 CheckBoxList 核取方塊清單控制項是一組 CheckBox 控制項, 這是一個複選的控制項, 提供屬性能夠輕鬆編排多個 CheckBox 控制項, 如下所示 : <asp:checkboxlist id="gifts" 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> 26 13
CheckBoxList 核取方塊清單控制項 屬性 CellPadding CellSpacing RepeatColumns RepeatDirection 說明設定和取得儲存格中邊界和內容間的距離, 以像素為單位, 預設值為 -1 設定和取得儲存格間的距離設定和取得使用多少欄來排列 CheckBoxList 控制項, 預設值為 0 設定和取得排列方向, 預設值是 Vertical 垂直, 或是 Horizontal 水平排列 RepeatLayout 設定和取得排列的版面配置, 預設值 Table 是使用表格, 或是 Flow 直線排列 TextAlign 設定選項文字和勾選方框的對齊方式, 預設值為 Right 靠 右對齊,Left 為靠左 27 RadioButtonList 選擇鈕清單控制項 RadioButtonList 選擇鈕清單控制項是一組 RadioButton 控制項, 屬於單選的控制項, 提供眾多屬性可以輕鬆編排多個 RadioButton 控制項, 如下所示 : <asp:radiobuttonlist id="payment" 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:radiobuttonlist> 28 14
Button 按鈕控制項 Button 按鈕控制項的功能如同 HtmlButton 和 HtmlInputButton 控制項, 如下所示 : <asp:button id="button" Text=" 送出 " OnClick="button_Click" runat="server"/> 29 Button 按鈕控制項 - 屬性與事件 屬性與事件 CausesValidation Text OnClick 說明檢查當按下 Button 控制項時, 是否執行驗證, 預設值 True 為是,False 為否, 需要配合第 8 章的驗證控制項來使用設定和取得按鈕控制項顯示的標題名稱當按鈕按下時, 觸發此事件 30 15
LinkButton 超連結按鈕控制項 LinkButton 超連結按鈕控制項的功能如同 Button 控制項, 只是顯示的外觀是超連結文字, 如下所示 : <asp:linkbutton id="button" Text=" 送出 " OnClick="button_Click" runat="server"/> 標籤建立名為 Button1 的 LinkButton 控制項, 其相關屬性與事件和 Button 控制項相同 31 ImageButton 圖片按鈕控制項 ImageButton 圖片按鈕控制項的功能也是 Button 控制項, 只是以圖片顯示按鈕, 如下所示 : <asp:imagebutton id="button" ImageUrl="sample.jpg" OnClick="button2_Click" runat="server"/> 標籤建立名為 Button 的 ImageButton 控制項, 其相關屬性與事件和 Button 控制項相似, 只是沒有 Text 屬性 32 16
ImageButton 圖片按鈕控制項 屬性 ImageUrl AlternateText ImageAlign 說明設定和取得圖片的 URL 網址如果瀏覽程式無法顯示圖片時, 顯示的替代文字設定和取得圖片的對齊方式, 預設是 NotSet, 可以是 AbsBottom AbsMiddle Baseline Bottom Left Middle Right TextTop 和 Top 33 17