Download presentation
Presentation is loading. Please wait.
1
動態網頁程式 設計實習 1042 數位教材 單元 9:ASP.NET物件及表單
主講老師：徐培倫
2
ASP.NET 物件說明 Server物件 Response物件 Request物件 Web表單欄位 伺服端的驗證控制項 作業15
單元 9 ASP.NET 物件說明 Server物件 Response物件 Request物件 Web表單欄位 伺服端的驗證控制項 作業15
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伺服器名稱，和設定或取得逾時時間，其相關屬性如下表所示：
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> <!-- Web表單 --> <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兩個屬性，如下表所示：
18
Web控制項的輸入控制項 Web控制項中關於表單資料輸入欄位部分的控制項，如下表所示：
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文字控制項-屬性
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 範例結果
23
CheckBox核取方塊控制項 CheckBox核取方塊控制項對應HTML表單標籤的核取方塊，這是一個複選題，可以建立一組切換開關，如下所示： <asp:CheckBox Id="Tel" Text="使用電話" Runat="server"/> 標籤建立一個名為Tel的CheckBox控制項。
24
CheckBox核取方塊控制項-屬性
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類別的屬性，如下表所示：
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控制項是一個選項，其相關屬性，如下表所示：
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清單方塊控制項-屬性
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核取方塊清單控制項
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驗證控制項
<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驗證控制項
<asp:CompareValidator Id="validComp" ControlToValidate="pass" ControlToCompare="pass1" Type="String" Display="Dynamic" ErrorMessage="輸入密碼不相同!" Runat="server"/> 標籤建立名為validComp的CompareValidator控制項，此驗證控制項是比較控制項pass和pass1的值是否相等（預設是Equal比較），比較值的資料型態是String字串。
49
CompareValidator驗證控制項-屬性
50
CompareValidator-比較運算子
51
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驗證控制項-屬性
53
作業 15：題目 修改 ex15.aspx(左) 完成 ex15a.aspx(右)
54
ex15.aspx 範例
55
ex15.aspx 範例
56
ex15.aspx 範例
57
作業 15： ex15a.aspx
58
作業 15： ex15a.aspx
59
作業 15： ex15a.aspx
60
作業15 完成檔 ex15a.aspx 為作業15的完成檔, 畫面如下：
Similar presentations
