1. 第 6 章 Web 表單的處理 6-1 ASP.NET 的 Web 表單 6-2 Web 表單欄位 - HTML 控制項 6-3 Web 表單欄位 - Web 控制項 6-4 再談伺服端控制項

2. 6-1 ASP.NET 的 Web 表單 6-1-1 HTML 表單與 Web 表單 6-1-2 ASP.NET 的 Web 表單 6-1-3 ASP.NET 的 Page 與控制項事 件

3. 6-1-1 HTML 表單與 Web 表單 -1 ASP 的 HTML 表單處理

4. 6-1-1 HTML 表單與 Web 表單 -2 ASP.NET 的 Web 表單處理

5. 6-1-2 ASP.NET 的 Web 表單 - 在 ASP.NET 取得使用者資料 Web 表單的主要目的是讓使用者輸入資料，在 ASP.NET 一共有三種方法取得使用者輸入的資 料，如下所示： – 使用.htm 的 HTML 表單網頁，將欄位資料送給伺服 端的 ASP.NET 程式。 – 使用.aspx 的 ASP.NET 建立的 Web 表單，將資料送給 伺服端其它的 ASP.NET 程式。 – 使用.aspx 的 ASP.NET 建立的 Web 表單，將資料送給 伺服端同一個 ASP.NET 程式，換句話說，這個 ASP.NET 程式除了擁有 Web 表單外，也包含處理表 單資料的程式碼。

6. 6-1-2 ASP.NET 的 Web 表單 - Web 表單的 Form 控制項 Web 表單的控制項是置於 的 HTML 控制項之間，它是一個 HtmlForm 控制項物件， 如下所示： ……… 上述 runat 屬性，這個屬性將 HTML 表單轉換成 ASP.NET 的 Web 表單， 控制項屬 性，如下所示： –method 屬性：控制項值的送出方式，預設是 POST 方法，如果 需要使用 Web 表單預設的顯示狀態管理，值只可以是 POST 或 GET 。 –action 屬性：指定處理 Web 表單控制項資料的 ASP.NET 程式， 預設是自已，如果是其它的 ASP.NET 程式，就是其 URL 網址。

7. 6-1-3 ASP.NET 的 Page 與控制項 事件 每當使用者請求 ASP.NET 程式的 Web 表單，或 是「表單送回」（ Postback ）即將表單欄位資 料送回伺服端，在產生回應的網頁內容時會觸 發一系列 Page 物件的事件， Page 物件的主要事 件，如下表所示：

8. 6-2 Web 表單欄位 - HTML 控制 項 6-2-1 HTML 控制項的基礎 6-2-2 文字與密碼方塊 6-2-3 文字區域 6-2-4 核取方塊 6-2-5 下拉式清單方塊 6-2-6 選擇鈕 6-2-7 隱藏欄位和影像按鈕

9. 6-2-1 HTML 控制項的基礎 HTML 控制項是對應 System.Web.UI.HtmlControls 名稱 空間的物件，這些控制項都對應到 HTML 標籤，如下 所示： 上述標籤和 HTML 標籤並沒有什麼不同，其差異只在 新增的 runat 和 id 兩個屬性，如下表所示：

10. 6-2-2 文字與密碼方塊 文字方塊是表單欄位使用最頻繁的欄位，因為 它可以直接傳遞使用者輸入的資料，例如：姓 名、地址、電話等資料。密碼欄位只是輸入的 字串以星號取代，在使用上和文字方塊並沒有 什麼不同，如下所示： 上述標籤建立名為 Name 的 HtmlInputText 控制 項，如果 type 屬性為 PASSWORD 就是密碼欄位。 取得控制項值是使用 Value 屬性，如下所示： Name.Value

11. 6-2-3 文字區域 文字區域和文字方塊都是讓使用者輸入 資料，不過文字區域允許輸入一整篇文 字內容，特別適用在地址、描述或備註 的文字內容，如下所示： 上述標籤建立名為 Address 的 HtmlTextArea 控制項。取得控制項值也 是使用 Value 屬性，如下所示： Address.Value

12. 6-2-4 核取方塊 核取方塊是 Web 表單的開關，可以讓使用者選擇是否 開啟功能或設定某些參數，核取方塊控制項允許複選， 如下所示： 使 用電話 使用電子郵 件 使用傳真 上述標籤建立三個名為 Tel 、 Email 和 Fax 的 HtmlInputCheckBox 控制項。控制項是否選取是使用 Checked 屬性，如下所示： If Tel.Checked Then str &= " 使用電話來確認 " End If 上述程式碼的 Checked 屬性值為 True ，表示使用者選取 核取方塊。

13. 6-2-5 下拉式清單方塊 下拉式清單方塊和選擇鈕欄位的功能十分相似， 只是顯示的方式不同，我們需要指定 value 屬性， 因為傳送到伺服器的就是此屬性值，如下所示： 郵寄 UPS 自取 上述標籤建立名為 Ship 的下拉式清單方塊，擁 有三個選項，其值分別為 Mail 、 UPS 和 Self 的 HtmlSelect 控制項。控制項值是使用 Value 屬性 取得，如下所示： show.innerText = Ship.Value

14. 6-2-6 選擇鈕 選擇鈕一樣是選擇題，只是顯示的介面不同，目的都 是讓使用者選擇選項，如下所示： <input type="RADIO" id="Card" name="Payment" value=" 信用卡 " CHECKED runat="Server"> 信用卡 <input type="RADIO" id="Tele" name="Payment" value=" 劃撥 " runat="Server"> 劃撥 <input type="RADIO" id="Cash" name="Payment" value=" 到貨付款 " runat="Server"> 到貨付款 上述標籤建立三個名為 Card 、 Tele 和 Cash 的 HtmlInputRadioButton 控制項，屬於同一組選擇鈕。控 制項是否選取是使用 Checked 屬性，如下所示： If Card.Checked Then show.innerHTML = Card.Value & " " End If

15. 6-2-7 隱藏欄位和影像按鈕 隱藏欄位並不會在表單網頁顯示出來，它可以直接傳 送指定的值，即 value 屬性，而不用使用者輸入資料， 在 ASP.NET 程式常常用來傳遞 Web 應用程式所需的參 數，例如：訂單號碼，如下所示： 上述標籤建立名為 Order 的 HtmlInputHidden 控制項， value 屬性是傳遞值。取得控制項值也是使用 Value 屬性。 影像按鈕和 HtmlInputButton 按鈕擁有相同的功能，如 下所示 <input type=image id="ImageButton" src="sample.jpg" OnServerClick="Button1_Click" runat="Server"> 上述標籤建立名為 ImageButton 的 HtmlInputImage 影像 按鈕控制項， src 屬性指定圖片的 URL 網址，使用 OnServerClick 屬性指定事件處理程序。

16. 6-3 Web 表單欄位 - Web 控制項 6-3-1 Web 控制項的基礎 6-3-2 Label 標籤與 TextBox 文字控制項 6-3-3 CheckBox 核取方塊控制項 6-3-4 RadioButton 選擇鈕控制項 6-3-5 DropDownList 下拉式選單控制項 6-3-6 ListBox 清單方塊控制項 6-3-7 CheckBoxList 核取方塊清單控制項 6-3-8 RadioButtonList 選擇鈕清單控制項 6-3-9 LinkButton 與 ImageButton 按鈕控制 項

17. 6-3-1 Web 控制項的基礎 Web 控制項是一組比 HTML 控制項提供更多內 建功能的控制項，它不僅提供建立網頁表單的 元素，還包括資料顯示的控制項，它是一組和 HTML 標籤完全無關的控制項，其語法是使用 XML 標籤的寫法，如下所示： 上述 Web 控制項使用 asp 字頭的 XML 標籤，是 對應 System.Web.UI.WebControns 名稱空間的控 制項物件，「 : 」號後是控制項種類， id 屬性為 控制項名稱， runat 屬性，指明是在伺服端處理。

18. 6-3-2 Label 標籤與 TextBox 文字 控制項 Label 標籤控制項的目的是在網頁顯示文字內容， 轉換成 HTML 標籤是 標籤，如下所示： <asp:Label id="Lname" Width="200px" BorderStyle="solid" BorderColor="#ccccff" runat="Server"/> TextBox 文字控制項是 HTML 標籤的文字方塊和 文字區域，如下所示： <asp:TextBox id="address" TextMode="Multiline" Rows="3" runat="Server"/>

19. 6-3-3 CheckBox 核取方塊控制 項 CheckBox 核取方塊控制項是一個複選題， 可以建立一組切換開關，如下所示： ’ CheckBox 控制項的處理和 HtmlInputCheckBox 控制項相同，只需使用 If 條件檢查 Checked 屬性， 就可以知道是否勾選核取方塊，如下所示： If Tel.Checked Then str &= " 使用電話來確認 " End If

20. 6-3-4 RadioButton 選擇鈕控制項 RadioButton 選擇鈕控制項是一個單選題，提供 一組選項，只可以選擇其中之一，如下所示： <asp:RadioButton id="Tele" Text=" 劃撥 " GroupName="Payment" runat="server"/> RadioButton 控制項和 HtmlInputRadioButton 控制 項相同，只需使用 If ElseIf 多條件檢查 Checked 屬性，就可以知道使用者是否選取，如下所示： If Card.Checked Then show.Text = Card.Text & " " Else If Tele.Checked Then show.Text = Tele.Text & " " Else If Cash.Checked Then show.Text = Cash.Text & " " End If

21. 6-3-5 DropDownList 下拉式選單 控制項 DropDownList 下拉式選單控制項是一個單選題， 相當於單選的 HtmlSelect 控制項，如下所示： 使用 Text 和 Value 屬性取得選項名稱和值， 如下所示： Ship.SelectedItem.Text Ship.SelectedItem.Value

22. 6-3-6 ListBox 清單方塊控制項 -1 ListBox 清單方塊控制項可以設定單選或複選， 其顯示方式如同複選的 HtmlSelect 控制項，如 下所示

23. 6-3-6 ListBox 清單方塊控制項 -2 單選的 ListBox 控制項，其取得選取選項 的方式和 DropDownList 控制項相同，以 此例為複選，需要使用 For 迴路取得使用 者選取的選項，如下所示： For i = 0 to Gift.Items.Count-1 If Gift.Items(i).Selected Then str = str & Gift.Items(i).Text & " " End If Next

24. 6-3-7 CheckBoxList 核取方塊清 單控制項 CheckBoxList 核取方塊清單控制項是一組 CheckBox 控制項，這是一個複選的控制項，提 供屬性可以輕鬆編排多個 CheckBox 控制項，如 下所示： CheckBoxList 控制項取得選項方式和複選的 ListBox 控制項相同。

25. 6-3-8 RadioButtonList 選擇鈕清 單控制項 RadioButtonList 選擇鈕清單控制項是一組 RadioButton 控制項，這是一個單選的控制項， 提供屬性可以輕鬆編排多個 RadioButton 控制項， 如下所示： RadioButtonList 控制項取得選項方式和 DropDownList 控制項相同。

26. 6-3-9 LinkButton 與 ImageButton 按鈕控制項 -1 Button 按鈕控制項 –Button 按鈕控制項就是 HtmlButton 和 HtmlInputButton 控制項，如下所示： <asp:Button id="Button0" Text=" 按一下 " OnClick="button_Click" runat="Server"/> <asp:Button id="Button" Text=" 按一下 " CommandName=" 排序 " CommandArgument=" 由小到大 " OnCommand="Command_Click" runat="server"/>

27. 6-3-9 LinkButton 與 ImageButton 按鈕控制項 -2 LinkButton 控制項 –LinkButton 控制項的功能是 Button 控制項， 但是顯示外觀是超連結，如下所示： <asp:LinkButton id="Button1" Text=" 按一下 " OnClick="button1_Click" runat="Server"/> – 上述標籤建立名為 Button1 的 LinkButton 控制 項，其相關屬性與事件和 Button 控制項相同。

28. 6-3-9 LinkButton 與 ImageButton 按鈕控制項 -3 ImageButton 控制項 –ImageButton 控制項的功能也是一個 Button 控 制項，只是以圖片顯示按鈕，如下所示： <asp:ImageButton id="Button2" ImageUrl="sample.jpg" OnClick="button2_Click" runat="Server"/>

29. 6-4 再談伺服端控制項 6-4-1 超連結控制項 6-4-2 圖片控制項 6-4-3 表格控制項 6-4-4 在控制項套用 CSS

30. 6-4-1 超連結控制項 Web 表單伺服端 HTML 控制項的 HtmlAnchor 和 Web 控制項的 HyperLink 都可以建立超連結。首 先是 HtmlAnchor 控制項，如下所示： 上述標籤建立名為 Link1 的 HtmlAnchor 控制項。 如果使用 Web 控制項，如下所示：

31. 6-4-2 圖片控制項 Web 表單伺服端 HTML 控制項的 HtmlImage 和 Web 控制項的 Image 都可以在網頁上顯示圖片。 首先是 HtmlImage 控制項，如下所示： 上述標籤建立名為 Digit1 的 HtmlImage 控制項。 如果使用 Web 控制項，如下所示： <asp:Image id="Digit" ImageUrl="0.gif" AlternateText=" 數字 0" runat="Server"/>

32. 6-4-3 表格控制項 -HtmlTable 、 HtmlTableRow 和 HtmlTableCell 控 制項 HtmlTable 、 HtmlTableRow 和 HtmlTableCell 控 制項 –HtmlTable 、 HtmlTableRow 和 HtmlTableCell 控制項 是 HTML 控制項，對應 HTML 表格標籤的 、 和 ，只是加上 id 和 runat 屬性，如下所示： ………………… ……………………

33. 6-4-3 表格控制項 -HtmlTable 、 HtmlTableRow 和 HtmlTableCell 控 制項 VB.NET 程式碼處理表格，例如：新增表格的 列和儲存格，其程式碼如下所示： Dim objRow As HtmlTableRow = New HtmlTableRow() Dim objCell As HtmlTableCell = New HtmlTableCell() objCell.Controls.Add(New LiteralControl("……")) objRow.Cells.Add(objCell) NewTable.Rows.Add(objRow) 上述程式碼建立 HtmlTableRow 和 HtmlTableCell 物件，然後使用 Add 方法新增 objCell 物件的內 容，這是 LiteralControl 物件的文字內容，其參 數是文字內容的字串，將 objCell 新增到 objRow ， 最後將 objRow 新增到 HtmlTable 物件 NewTable 。

34. 6-4-3 表格控制項 -Table 、 TableRow 和 TableCell 控制項 Table 、 TableRow 和 TableCell 控制項是 Web 控制 項，對應 HTML 表格標籤的 、 和 ，表格 Web 控制項標籤，如下所示： ………………… ……………………

35. 6-4-3 表格控制項 -Table 、 TableRow 和 TableCell 控制項 VB.NET 程式碼處理表格，例如：新增表格的 列和儲存格，其程式碼如下所示： Dim objRow As TableRow = New TableRow() Dim objCell As TableCell = New TableCell() objCell.Controls.Add(New LiteralControl("………")) objRow.Cells.Add(objCell) NewTable.Rows.Add(objRow) 上述程式碼和前面的 HTML 控制項相同，只是 改為 TableRow 和 TableCell 物件。

36. 6-4-4 在控制項套用 CSS-Classes Web 表單的伺服端控制項在轉換輸出到瀏覽程式，顯 示的仍然是 HTML 標籤，一樣可以使用 CSS 美化控制項 的顯示，首先定義 CSS 樣式名稱的 Classes ，如下所示：.spanStyle { font: 12pt 細明體 ; font-weight:500; color:orange; }.buttonStyle { font: 18pt 標楷體 ; background-color:lightgreen; border-color:black; width:150 }.button1Style{ font: 14pt 新細明體 ; background-color:yellow; border-style:dashed; border-color:red; width:100; }

37. 6-4-4 在控制項套用 CSS- HTML 控制項套用 CSS 在 HTML 控制項可以使用 class 屬性套用樣 式名稱，如下所示： 在 HTML 控制項套用 CSS 第二個按鈕 如果使用局部套用樣式，請在 style 屬性指定， 如下所示： <button id="Button1" style="font: 12pt 細明體 ;color:red;background-color:lightblue; border-color:green;height=40;width:200" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightblue'" runat="Server"> 移到我這裡 - 使用 CSS

38. 6-4-4 在控制項套用 CSS-Web 控 制項套用 CSS 在 Web 控制項可以使用 CSSClass 屬性套用樣式 名稱，如下所示： <asp:Button id="Button4" Text=" 第四個按鈕 " CSSClass="button1Style" runat="Server"/> 如果使用局部套用樣式，也是在 Style 屬性指定， 如下所示： <asp:Label id="Laddress" Width="300px" BorderStyle="solid" BorderColor="#ccccff" Text=" 在 Web 控制項套用 CSS" Style="font: 16pt 細明體 ;font-weight:700;color:red" runat="Server"/> <asp:Button id="Button3" Text=" 第三個按鈕 " Style="background-color:lightblue;color:purple" runat="Server"/>