1 / 80

Ch06 建立 WEB 表單

Ch06 建立 WEB 表單. 網頁程 式設計. 大綱. 本章內容包含課本 6-1, 6-2 及第 7 章 Web 表單 Web 控制項的基礎 資料輸入輸出控制項 選擇控制項 清單控制項 按鈕控制項. 網頁表單的用途. ASP.NET 程式是伺服端網頁技術，換句話說，客戶端網頁只負責取得使用者輸入的資料，資料都是送到伺服端來進行處理。網頁表單就是 ASP.NET 程式的資料輸入介面，如同 Windows 對話方塊，它是使用者與後端程式的溝通橋樑，如下圖所示：. 伺服端控制項的 Web 表單處理.

gerald
Download Presentation

Ch06 建立 WEB 表單

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ch06 建立WEB表單 網頁程式設計

  2. 大綱 本章內容包含課本6-1, 6-2及第7章 • Web表單 • Web控制項的基礎 • 資料輸入輸出控制項 • 選擇控制項 • 清單控制項 • 按鈕控制項

  3. 網頁表單的用途 • ASP.NET程式是伺服端網頁技術，換句話說，客戶端網頁只負責取得使用者輸入的資料，資料都是送到伺服端來進行處理。網頁表單就是ASP.NET程式的資料輸入介面，如同Windows對話方塊，它是使用者與後端程式的溝通橋樑，如下圖所示：

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

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

  6. Web表單的程式架構-架構1 <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Button1_Click(ByVal sender As _ Object, ByVal e As System.EventArgs) Label1.Text = "按下Button控制項<br/>" End Sub </script>

  7. Web表單的程式架構-架構2 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>未命名頁面</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div> </form> </body> </html>

  8. Web表單的程式架構-架構說明 • 第一部分：<script>標籤的事件處理程序或函數，以此例是Button1_Click()事件處理程序。 • 第二部分：<form Runat="server">標籤建立Web表單，內含Form表單標籤和伺服端控制項（Server Controls），以此例擁有Label和Button控制項。

  9. Head標頭標籤 • 在ASP.NET 2.0版的<head>標籤，可以改為<head Runat="server">的HtmlHead控制項物件，如下所示： <head Runat="server"> …… </head> • 上述Head標頭標籤可以建立HtmlHead物件。ASP.NET程式可以指定HtmlTitle物件的標題文字（即<title>標籤），如下所示： Sub Page_Load(Sender As Object, _ E As Eventargs) Page.Header.Title = "Ch6-2-1.aspx" End Sub

  10. Form表單標籤-說明 • Web表單的伺服端控制項是置於<form Runat="server">的HTML控制項之間，它就是HtmlForm控制項物件，如下所示： <form Runat="server"> ……… </form> • 上述Web表單和HTML/XHTML表單差異只在Runat屬性，此屬性將HTML/XHTML表單轉換成ASP.NET的Web表單。

  11. Form表單標籤-屬性 • Id屬性：Web表單的識別名稱。 • Method屬性：控制項值的送出方式，值只能是post或get，其預設是post方法。 • Action屬性：指定Web表單處理的ASP.NET程式，預設是自已，如果是其他ASP.NET程式，其值是程式的URL網址。

  12. 伺服端控制項-說明 • Web表單是由伺服端控制項（Server Controls）組成，它是一種伺服端可程式化物件。 • ASP.NET程式可以使用HTML或Web控制項來建立表單使用介面。

  13. 伺服端控制項-HTML控制項(說明) • HTML控制項是.NET Framework物件，這些控制項都擁有對應的HTML/XHTML標籤，如下所示： <input type="TEXT" Id="Name" size ="20" Runat="server"> • 上述標籤和HTML/XHTML標籤並沒有什麼不同，其差異只在新增Runat和Id兩個屬性。

  14. 伺服端控制項-HTML控制項(種類)

  15. 伺服端控制項-Web控制項(說明) • Web控制項是一組和HTML/XHTML標籤完全無關的控制項，其語法是使用XML標籤寫法，如下所示： <asp:TextBox Id="name" Width="200px" Runat="server"/> • 上述Web控制項是使用asp字頭的XML標籤，在「:」符號後是控制項種類，以此例是TextBox控制項，Id屬性為控制項名稱，同樣需要Runat屬性值server，指明是位在伺服端處理。

  16. 伺服端控制項-Web控制項(種類)

  17. Page物件與控制項的事件-說明 • 當在瀏覽程式載入ASP.NET程式，或使用者在Web表單按下或選擇控制項等操作時，就會造成控制項的狀態改變，進而觸發事件；當事件產生時，可以建立事件處理程序來處理此事件。

  18. Page物件與控制項的事件-控制項事件 • 在Web表單的伺服端控制項都提供有相關事件。例如：按一下Button控制項button1時，就會觸發Click事件，其事件處理程序，如下所示： Protected Sub Button1_Click(ByVal sender As _ Object, ByVal e As System.EventArgs) Label1.Text = "按下Button控制項<br/>" End Sub

  19. Page物件與控制項的事件-Page物件的事件 • 當伺服端執行和編譯ASP.NET程式，每一頁ASP.NET程式的網頁就是一個Page物件，它會觸發一系列Page物件的事件。Page物件的常用事件，如下表所示：

  20. Web控制項的基礎-說明 • Web控制項是一組比HTML控制項功能更強大的控制項，不僅可以建立Web表單，它還包括資料顯示的相關控制項，其語法是使用XML標籤的寫法，如下所示： <asp:TextBox id="name" Width="200px" runat="Server"/> • Web控制項使用asp字頭的XML標籤，「:」符號後是控制項種類，以此例是TextBox控制項，id屬性為控制項名稱，同樣需要runat屬性值Server，指明是位在伺服端處理。

  21. HTML控制項 <input type=“TEXT” id=“Name” runat=“Server”> WEB <asp:TextBox id=“Name” runat=“Server”/> HTML控制項與WEB控制項的對照

  22. Web控制項的基礎-種類

  23. Web控制項的基礎-屬性

  24. Label標籤控制項-說明 • Label標籤控制項的目的是在網頁顯示文字內容，它會轉換成HTML的<span>標籤，一個Label標籤控制項的範例，如下所示： <asp:Label id="Name" Width="200px" BorderStyle="solid" BorderColor="#ccccff" runat="Server"/>

  25. Label標籤控制項-屬性

  26. 範例1 • <!-- 程式範例：Ch06_01.aspx --> • <%@ Page Language="VB" %> • <html> • <head> • <title>Label標籤控制項</title> • <script language="VB" runat="Server"> • Sub Page_Load(Sender As Object, e As Eventargs) • Name.Text = "ASP.NET網頁設計範例教本" • End Sub • </script> • </head> • <body> • <h2>Label標籤控制項</h2> • <hr> • <asp:Label id="Name" Width="200px" BorderStyle="solid" • BorderColor="#ccccff" runat="Server"/> • </body> • </html>

  27. 資料輸入控制項-建立 • Web資料輸入控制項就是TextBox控制項，相當於HTML/XHTML表單標籤或控制項的文字方塊、密碼欄位和文字區域。 • 在VWD設計檢視建立的Web表單，如下圖所示：

  28. 資料輸入控制項-標籤 • TextBox控制項標籤，如下所示： <asp:TextBox Id="name" Width="200px" Runat="server"/><br/> <asp:TextBox Id="pass" Width="200px" TextMode="Password" Runat="server"/><br/> <asp:TextBox Id="address" Width="200px" TextMode="Multiline" Rows="3" Runat="server"/> • 上述標籤建立3個TextBox控制項，TextMode屬性指定欄位種類為密碼欄位（Password）或文字區域（Multiline）。

  29. 資料輸入控制項-標籤屬性

  30. 資料輸入控制項-存取欄位值 • 在ASP.NET程式取得TextBox控制項的欄位值，就是使用Text屬性，如下所示： name.Text pass.Text address.Text

  31. <script language="VB" runat="Server"> Sub button_Click(Sender As Object, e As Eventargs) ' 顯示欄位值 msg.Text = "姓名: " & name.Text & “<br/>” msg.Text &= "密碼: " & pass.Text & “<br/>” msg.Text &= "地址: " & address.Text & “<br/>” End Sub <form runat="Server"> 姓名: <asp:TextBox id="name" Width="200px" runat="Server"/><br/> 密碼: <asp:TextBox id="pass" Width="200px" TextMode="Password" runat="Server"/><br/> 地址: <asp:TextBox id="address" Width="200px" TextMode="Multiline" Rows="3" runat="Server"/> <asp:Button id="Button" Text="送出" OnClick="button_Click" Runat="Server"/> </form> <asp:Label id=“msg" ForeColor=“red” runat="Server"/> 範例2

  32. 練習1 • 修改範例2的程式，使得按下〔送出〕的按鈕時，會判斷輸入密碼是不是１２３ ，不對時，會出現錯誤訊息

  33. Web表單的顯示狀態-說明 • ASP.NET的「顯示狀態」（ViewState）可以保留伺服端控制項的狀態，也就是每次執行HTTP請求時，保留使用者輸入的值。 • 例如：在Web表單TextBox控制項輸入值，不論表單送回多少次，除非更改控制項的值，顯示狀態都能夠自動保留欄位值。

  34. Web表單的顯示狀態 • ASP.NET顯示狀態是使用隱藏欄位儲存狀態資料，如下圖所示：

  35. Web表單的顯示狀態 • 請在瀏覽程式執行「檢視」→「原始檔」指令檢視原始程式碼，可以在表單標籤<form>看到<input type="hidden">標籤的隱藏欄位，如下圖所示：

  36. CheckBox核取方塊控制項-建立 • CheckBox核取方塊控制項是一個複選題，可以建立一組切換開關。在VWD設計檢視建立的Web表單，從左至右依序是3個CheckBox控制項，可以用來勾選多個選項，預設勾選使用電話，如下圖所示：

  37. CheckBox核取方塊控制項-標籤 • CheckBox控制項標籤，如下所示： <asp:CheckBox Id="Tel" Text="使用電話" Checked="True" Runat="server"/> <asp:CheckBox Id="Email" Text="使用電子郵件" Runat="server"/> <asp:CheckBox Id="Fax" Text="使用傳真" Runat="server"/> • 上述標籤建立名為Tel、Email和Fax的3個CheckBox控制項。

  38. CheckBox核取方塊控制項-標籤屬性

  39. CheckBox核取方塊控制項-存取欄位值 • 在ASP.NET程式是使用If條件敘述來檢查Checked屬性，以便知道是否有勾選核取方塊，如下所示： If Tel.Checked Then str &= "使用電話來確認<br/>" End If

  40. Sub Page_Load(Sender As Object, e As Eventargs) Tel.Checked = True End Sub Sub button_Click(Sender As Object, e As Eventargs) Dim str As String = "確認方式: " If Tel.Checked Then str &= "使用電話來確認<br>" End If If Email.Checked Then str &= "使用電子郵件來確認<br>" End If If Fax.Checked Then str &= "使用傳真來確認<br>" End If msg.Text = str End Sub <form runat="Server"> <b>訂單確認的方式</b><br> <asp:CheckBox id="Tel" Text="使用電話" runat="Server"/> <asp:CheckBox id="Email" Text="使用電子郵件" runat="Server"/> <asp:CheckBox id="Fax" Text="使用傳真" runat="Server"/><br/> <asp:button id="Button" Text="送出" OnClick="button_Click" runat="Server"/><br/> </form> <asp:Label id=“msg" font-size="10pt" ForeColor=“red” runat="Server"/> 範例3

  41. RadioButton選擇鈕控制項-建立 • RadioButton選擇鈕控制項是一個單選題，提供一組選項，只能選擇其中之一。在VWD設計檢視建立的Web表單，從左至右依序是3個RadioButton控制項，這是一組選項，可以用來選擇付款方式，預選信用卡，如下圖所示：

  42. RadioButton選擇鈕控制項-標籤 • RadioButton控制項標籤，如下所示： <asp:RadioButton Id="Card" Text="信用卡“ Checked="True" GroupName="Payment“ Runat="server"/> <asp:RadioButton Id="Tele" Text="劃撥" GroupName="Payment“ Runat="server"/> <asp:RadioButton Id="Cash" Text="到貨付款" GroupName="Payment" Runat="server"/> • 上述標籤的GroupName屬性值都是Payment，表示是一組RadioButton控制項。

  43. RadioButton選擇鈕控制項-存取欄位值 • 在ASP.NET程式是使用If ElseIf多條件敘述來檢查Checked屬性，以便知道使用者是否選取指定選擇鈕，如下所示： If Card.Checked Then msg.Text = Card.Text & "<br/>" Else If Tele.Checked Then msg.Text = Tele.Text & "<br/>" Else If Cash.Checked Then msg.Text = Cash.Text & "<br/>" End If

  44. Sub Page_Load(Sender As Object, e As Eventargs) Card.Checked = True End Sub Sub button_Click(Sender As Object, e As Eventargs) If Card.Checked Then msg.Text = Card.Text & "<br/>" Else If Tele.Checked Then msg.Text = Tele.Text & "<br/>" Else If Cash.Checked Then msg.Text = Cash.Text & "<br/>" End If End Sub <form runat="Server"> <b>訂單的付款方式</b><br/> <asp:RadioButton id="Card" Text="信用卡" Checked="True" GroupName="Payment" runat="server"/> <asp:RadioButton id="Tele" Text="劃撥" GroupName="Payment" runat="server"/> <asp:RadioButton id="Cash" Text="到貨付款" GroupName="Payment" runat="server"/><br> <asp:button id="Button" Text="送出" OnClick="button_Click" runat="Server"/><br/> </form> <asp:Label id=“msg" font-bold="true" foreColor=“red” runat="Server"/> 範例4

  45. 清單控制項 • DropDownList下拉式選單控制項 • ListBox清單方塊控制項 • CheckBoxList核取方塊清單控制項 • RadioButtonList選擇鈕清單控制項

  46. 清單控制項-屬性 • Web控制項有四種清單選擇功能的控制項：DropDownList、ListBox、CheckBoxList和RadioButtonList控制項。控制項都支援的屬性，如下表所示：

  47. 清單控制項-在VWD新增清單的ListItem控制項1 • 在VWD的【設計】標籤新增DropDownList、ListBox、CheckBoxList和RadioButtonList控制項後，都是顯示未繫結和沒有選項的控制項，即沒有項目ListItem控制項，如下圖所示：

  48. 清單控制項-在VWD新增清單的ListItem控制項2 • 請選取清單控制項，按一下上方箭頭圖示顯示「DropDownList工作」功能表，然後請按一下【編輯項目】超連結來新增ListItem控制項的項目，可以看到「ListItem集合編輯器」視窗。

  49. 清單控制項-在VWD新增清單的ListItem控制項3 • 請重複按【加入】鈕，即可新增清單所需的ListItem控制項，一個選項是一個ListItem控制項。其相關屬性說明，如下表所示：

  50. DropDownList下拉式選單控制項-建立 • DropDownList下拉式選單控制項是一個單選題，相當於單選HTML/XHTML標籤<select>的下拉式選單。在VWD設計檢視建立的Web表單，如下圖所示：

More Related