PowerPoint 簡報

Size: px

Start display at page:

Download "PowerPoint 簡報"

司苏
6 years ago
Views:

1 動態網頁程式設計實習 1042 數位教材單元 9:ASP.NET 物件及表單主講老師 : 徐培倫

2 單元 9 ASP.NET 物件及表單 ASP.NET 物件說明 Server 物件 Response 物件 Request 物件 Web 表單欄位伺服端的驗證控制項作業 15 2

3 ASP.NET 物件說明 Response 物件 : 即 HttpResponse 類別, 可以輸出網頁內容的標籤或處理 Cookies, 然後送到瀏覽程式顯示, 或是控制網頁轉址, 從一頁網頁轉址至其他網頁 Request 物件 : 即 HttpRequest 類別, 可以讀取表單欄位送出的資料或 URL 參數 Cookies 和取得伺服器的變數 Server 物件 : 即 HttpServerUtility 類別, 可以建立 COM 物件執行其他 ASP.NET 程式和 HTML 和處理 URL 編碼

4 ASP.NET 物件說明 Application 物件 : 即 HttpApplicationState 類別, 瀏覽網站的所有使用者都可以透過此物件取得一些共享資料例如 : 網站的訪客計數 Session 物件 : 即 System.Web.SessionState 名稱空間的 HttpSessionState 類別, 對於瀏覽網站的每位使用者, 可以使用此物件保留使用者的專屬資料例如 : 使用者登入網站的使用者名稱 ( Username) 和密碼 (Password)

5 Server 物件的屬性 Server 物件的屬性可以取得 Web 伺服器名稱, 和設定或取得逾時時間, 其相關屬性如下表所示 : 屬性 MachineName ScriptTimeout 說明取得 Web 伺服器的名稱字串設定和取得執行 ASP.NET 的逾時時間, 以秒為單位

6 Server 物件的方法 Server.MapPath() 方法可以將伺服器的虛擬路徑, 轉換為實際硬碟的檔案路徑 Server.CreateObject() 方法可以在伺服端建立 COM 元件 Server.Transfer() 方法的轉址操作完全在 Web 伺服器完成, 並不會浪費頻寬, 其使用方式和 Response.Redirct() 幾乎相同 Server.Execute() 方法有些像在主程式呼叫副程式, 當轉址 ASP.NET 程式執行完成後, 還會回到呼叫轉址的 ASP.NET 程式

7 Server 物件的方法 Server.HtmlEncode() 方法可以將指定字串使用 HTML 編碼方式進行編碼, 然後配合 Server.HtmlDecode() 方法進行解碼 Server.UrlEncode() 方法可以將指定字串使用 URL 編碼方式來進行編碼, 如果 URL 參數需要傳遞特殊符號

8 Response 物件 Response.Write() 方法可以將任何資料型態的資料, 輸出到瀏覽程式顯示, 換句話說, 就是輸出成 HTML 標籤 Response.Redirect() 方法可以將網頁轉址到其他的 URL 網址或網頁我們可以指定資料型態, 即 ContentType 屬性 :Response.ContentType = "image/gif" 程式碼指定網頁內容是 GIF 圖檔

9 Request 物件 HTML 網頁表單如果是使用 post 方法傳遞資料, 其作法是將傳遞資料在編碼後, 透過 HTTP 通訊協定標頭傳送到 Web 伺服器, 在伺服端是使用 Form 集合物件來取出資料, 其語法如下所示 : Request(("FieldName") Request.Form("FieldName") Request 物件可以使用 Form 屬性取得 Form 集合物件, 或不指定屬性, 在括號內的參數是欄位名稱字串, 可以取得指定表單欄位值的字串

10 Web 表單程式設計模型 ASP.NET 的 Web 表單可以建立跨平台和跨瀏覽程式 Web 應用程式的輸入介面, 其使用的技術如同在 VB JBuilder 等視覺化開發工具建立 Windows 應用程式的 GUI (Graphics UserInterface) 介面 Web 表單程式設計模型是一種事件驅動程式設計模型 (Event-driven Programming Model), 使用伺服端控制項建立 Web 表單的使用介面當產生事件時,ASP.NET 程式可以建立對應的事件處理程序來處理事件

11 Web 表單程式設計模型 Page Language="VB" %>  <script Runat="server"> Sub button1_click(sender As Object, E As Eventargs) label1.text = " 按下 Button 控制項 <br>" End Sub </script>  <html> <head Runat="server"><title>web.aspx</title></head> <body> <form Id="form1" Runat="server"> <asp:button Id="button1" Text=" 按下按鈕 " OnClick="button1_Click" Runat="Server"/><br> <asp:label Id="label1" Runat="server"/> </form> </body> </html>

12 Web 表單程式設計模型 Web Form 範本程式架構, 架構主要分成兩個部分, 如下所示 : 第一部分 :<script> 標籤的事件處理程序或函數第二部分 :<form Runat="server"> 標籤建立 Web 表單, 內含 Form 表單標籤和伺服端控制項 (Server Controls)

13 Web 表單程式設計模型在 ASP.NET 2.0 版的 <head> 標籤, 可以改為 <head Runat="server"> 的 HtmlHead 控制項物件, 如下所示 : <head Runat="server"> </head> Head 標頭標籤可以建立 HtmlHead 物件, 我們可以使用 ASP.NET 程式來指定 HtmlTitle 物件的標題文字 ( 即 <title> 標籤 ) 和 CSS 樣式, 如下所示 : Page.Header.Title = web.aspx" 程式碼使用 Title 屬性指定頁面的標題文字

14 Web 表單程式設計模型 Web 表單的伺服端控制項是置於 <form Runat="server"> 的 HTML 控制項之間, 它就是 HtmlForm 控制項物件, 如下所示 : <form Runat="server"> </form> Web 表單和 HTML 表單差異只在 Runat 屬性, 此屬性將 HTML 表單轉換成 ASP.NET 的 Web 表單

15 ASP.NET 的 Web 表單處理 ASP.NET 的 Web 表單是結合 HTML 程式碼和伺服端控制項, 一種完全在 Web 伺服器執行的表單, 如下圖所示 :

16 Web 表單欄位的輸入控制項 ASP.NET 的輸入控制項 TextBox 文字控制項 CheckBox 核取方塊控制項 RadioButton 選擇鈕控制項 DropDownList 下拉式選單控制項 ListBox 清單方塊控制項 CheckBoxList 核取方塊清單控制項 RadioButtonList 選擇鈕清單控制項

17 ASP.NET 的輸入控制項 HTML 控制項是對應 System.Web.UI.HtmlControls 名稱空間的物件, 這些控制項都直接對應到 HTML 標籤, 如下所示 : <input Type="text" Id="Name" Size ="20" Runat="server"> 上述標籤和 HTML 標籤並沒有什麼不同, 其差異只在新增 Runat 和 Id 兩個屬性, 如下表所示 : 屬性 Runat Id 說明屬性值是 server, 表示標籤是伺服端控制項, 不再是 HTML 標籤屬性值是控制項的名稱, 伺服端控制項需要指定 Id 屬性, 而且在整個 Page 物件中的名稱需要唯一

18 Web 控制項的輸入控制項 Web 控制項中關於表單資料輸入欄位部分的控制項, 如下表所示 : Web 控制項標籤說明 TextBox <asp:textbox /> 文字方塊密碼欄位和文字區域 CheckBox <asp:checkbox /> 核取方塊 RadioButton <asp:radiobutton /> 選擇鈕 DropDownList <asp:dropdownlist /> 下拉式選單 ListBox <asp:listbox /> 清單方塊 CheckBoxList <asp:checkboxlist /> 一組核取方塊 RadioButtonList <asp:radiobuttonlist /> 一組選擇鈕

19 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), 沒有指定就是文字方塊

20 TextBox 文字控制項 - 屬性屬性說明 AutoPostBack 是否當使用者更改文字內容時, 自動送回伺服器,True 為是, 預設值為 False 不送回 Columns 文字區域顯示的寬度, 以字數為單位 MaxLength 控制項允許輸入文字的最大長度, 不適用在 TextMode 屬性 Multiline ReadOnly 是否是唯讀控制項,True 為是, 預設值 False 為不是 Rows 文字區域的高度有幾列, 只有當 TextMode 屬性為 Multiline 時才需使用 Text 文字控制項的內容 TextMode 文字控制項的狀態是密碼 (Password) 或文字區域 (Mulitline) Wrap OnTextChanged 文字區域內容是否自動換行, 預設值 True 為自動換行,False 為不換行, 只有當 TextMode 屬性為 Multiline 時才需使用當使用者更改控制項內容時產生 TextChanged 事件, 需要配合 AutoPostBack 屬性才會有作用, 詳細的說明請參閱第節

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

22 Textbox.aspx 範例結果 22

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

24 CheckBox 核取方塊控制項 - 屬性屬性 AutoPostBack 說明是否當使用者更改選項時, 自動送回伺服器,True 為是, 預設值為 False 不送回 Checked 檢查 CheckBox 控制項是否勾選, 預設值 False 為沒有, True 為勾選 Text 控制項顯示的內容, 即 CheckBox 控制項的選項文字 TextAlign OnCheckedChanged 選項文字和勾選方框的對齊方式, 預設值為 Right 靠右對齊,Left 為靠左當使用者勾選選項是產生 CheckedChanged 事件, 需要配合 AutoPostBack 屬性才會有作用, 詳細的說明請參閱第節

25 CheckBox 核取方塊控制項 CheckBox 控制項的處理是使用 If 條件來檢查 Checked 屬性, 就可以知道是否勾選核取方塊, 如下所示 : If Tel.Checked Then str &= " 使用電話來確認 <br>" End If

26 CheckBox.aspx 範例結果

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

28 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

29 RadioButton.aspx 範例結果

30 DropDownList 下拉式選單控制項在 Web 控制項的 ListControl 類別有四種選擇功能的控制項物件 : DropDownList 控制項 ListBox 控制項 CheckBoxList 控制項 RadioButtonList 控制項

31 DropDownList 下拉式選單控制項選擇功能的控制項是繼承自 ListControl 類別, 所以可以使用 ListControl 類別的屬性, 如下表所示 : 屬性說明 AutoPostBack 是否當使用者更改選擇的選項時, 自動送回伺服器, True 為是, 預設值為 False 不送回 Items ListControl 控制項所有選項的集合物件 SelectedIndex 選取選項的最小索引值, 如為單選, 就是選取選項的索引值, 沒有選擇傳回 -1 SelectedItem 最小選取索引值的 ListItem 物件 OnSelectedIndexChanged 當使用者更改選項是產生 SelectedIndexChanged 事件, 需要配合 AutoPostBack 屬性才會有作用, 詳細的說明請參閱第節

32 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>

33 DropDownList 下拉式選單控制項 DropDownList 控制項建立選單顯示的選項和其他選擇功能控制項相同, 都是使用 ListItem 控制項每一個 ListItem 控制項是一個選項, 其相關屬性, 如下表所示 : 屬性 Attributes Selected Text Value 說明所有 ListItem 控制項的名稱和值的集合物件選項是否被選取, 預設值為 False 沒有選取,True 為選取選項顯示的名稱選項值

34 DropDownList 下拉式選單控制項 DropDownList 控制項是使用繼承自 ListControl 類別的 SelectedItem 屬性取得 ListItem 物件, 然後使用 Text 和 Value 屬性取得選項名稱和值, 如下所示 : Ship.SelectedItem.Text Ship.SelectedItem.Value

35 DropDownList.aspx 範例結果

36 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>

37 ListBox 清單方塊控制項 - 屬性屬性說明 Rows ListBox 控制項的高, 預設值是 4 SelectionMode 控制項的選擇方式,Single 為單選,Multiple 為複選 ToolTip 當滑鼠移到控制項上時, 顯示的文字內容

38 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

39 ListBox.aspx 範例結果

40 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>

41 CheckBoxList 核取方塊清單控制項屬性說明 CellPadding 儲存格中邊界和內容間的距離, 以像素為單位, 預設值為 -1 CellSpacing 儲存格間的距離 RepeatColumns 使用多少欄來排列 CheckBoxList 控制項, 預設值為 0 RepeatDirection RepeatLayout 排列方向, 預設值是 Vertical 垂直, 或是 Horizontal 水平排列排列的版面配置, 預設值 Table 是使用表格, 或是 Flow 為一直線排列 TextAlign 選項文字和勾選方框的對齊方式, 預設值為 Right 靠右對齊, Left 為靠左

42 CheckBoxList.aspx 範例結果 CheckBoxList 控制項取得選項方式和複選的 ListBox 控制項相同

43 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>

44 RadioButtonList.aspx 範例結果 RadioButtonList 控制項取得選項方式和 DropDownList 控制項相同

45 伺服端的驗證控制項 RequiredFieldValidator 驗證控制項 CompareValidator 驗證控制項 RangeValidator 驗證控制項

46 RequiredFieldValidator 驗證控制項 RequiredFieldValidator 驗證控制項可以檢查指定控制項是否忘了輸入資料或沒有選取選項, 如下所示 : <asp:requiredfieldvalidator Id="validName" ControlToValidate="name" ErrorMessage=" 請輸入名稱!" Runat="server"/> 標籤建立名為 validname 的 RequiredFieldValidator 控制項, ControlToValidate 屬性指出需要驗證的控制項名稱,ErrorMessage 屬性是驗證錯誤時顯示的訊息

47 RequiredFieldValidator 驗證控制項 InitialValue 屬性是用來指定驗證欄位不能輸入的值, 如下所示 : <asp:requiredfieldvalidator Id="validPass" ControlToValidate="pass" InitialValue="1234" ErrorMessage=" 請輸入密碼!" Runat="server"/> 驗證控制項要求控制項 pass 輸入資料不可以是 1234, 此時, 如果沒有輸入密碼反而可以通過驗證

48 CompareValidator 驗證控制項 CompareValidator 驗證控制項可以比較 2 個控制項的值, 或是和一個指定常數值進行比較, 以檢查控制項值是否符合條件, 如下所示 : <asp:comparevalidator Id="validComp" ControlToValidate="pass" ControlToCompare="pass1" Type="String" Display="Dynamic" ErrorMessage=" 輸入密碼不相同!" Runat="server"/> 標籤建立名為 validcomp 的 CompareValidator 控制項, 此驗證控制項是比較控制項 pass 和 pass1 的值是否相等 ( 預設是 Equal 比較 ), 比較值的資料型態是 String 字串

49 CompareValidator 驗證控制項 - 屬性屬性 ControlToCompare ValueToCompare Type Operator 說明用來比較的控制項名稱用來比較的常數值繼承自 BaseCompareValidator 類別的屬性, 這是比較前需要轉換成的資料型態, 可以是 String Integer Double Date 和 Currency 資料型態使用哪種比較運算子進行比較, 預設是 Equal

50 CompareValidator- 比較運算子運算子 Equal NotEqual GreaterThan GreaterThanEqual LessThan LessThanEqual DataTypeCheck 說明相等不相等大於大於等於小於小於等於資料型態的比較, 比較控制項的值是否為 Type 屬性指定的資料型態, 驗證錯誤是指值無法轉換成指定的資料型態

51 RangeValidator 驗證控制項 - 標籤 RangeValidator 驗證控制項可以檢查控制項的值, 是否在指定的範圍內, 如下所示 : <asp:rangevalidator Id="validRange" ControlToValidate="age" Display="Dynamic" Type="Integer" MinimumValue="21" MaximumValue="80" ErrorMessage=" 年齡範圍 21~80!" Runat="server"/> 驗證控制項檢查控制項 age 值是否大於等於 MinimumValue 屬性的 21 且小於等於 MaximumValue 屬性的 80, 比較值的資料型態是 Integer 整數

52 RangeValidator 驗證控制項 - 屬性屬性 MaximumValue MinimumValue Type 說明比較範圍的最大值比較範圍的最小值繼承自 BaseCompareValidator 類別的屬性, 這是在比較前需要轉換成的資料型態, 可以是 String Integer Double Date 和 Currency 資料型態

53 作業 15: 題目修改 ex15.aspx( 左 ) 完成 ex15a.aspx( 右 ) 53

54 ex15.aspx 範例 54

55 ex15.aspx 範例 55

56 ex15.aspx 範例 56

57 作業 15: ex15a.aspx 57

58 作業 15: ex15a.aspx 58

59 作業 15: ex15a.aspx 59

60 作業 15 完成檔 ex15a.aspx 為作業 15 的完成檔, 畫面如下 : 60

IsPostBack 2

5 IsPostBack 2 TextBox 3 TextBox TextBox 4 TextBox TextBox 1 2 5 TextBox Columns MaxLength ReadOnly Rows Text TextMode TextMode MultiLine TextMode MultiLine True False TextMode MultiLine Password MulitLine