Ch06 建立 WEB 表單

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控制項 (種類 )

HTML控制項 HTML/XHTML標籤HtmlForm <form>

HtmlInputText <input type="TEXT">和<input type="PASSWORD">HtmlTextArea <textarea>

HtmlInputCheckBox <input type="CHECKBOX">HtmlSelect <select>

HtmlInputRadioButton <input type="RADIO">HtmlInputHidden <input type="HIDDEN">HtmlInputButton <input type="BUTTON">

HtmlButton <button>HtmlGenericControl 其他標籤，例如：<span>、<div>等

15

伺服端控制項 -Web控制項 (說明 )

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

16

伺服端控制項 -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 /> 影像按鈕

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物件的常用事件，如下表所示：

事件名稱說明PreInit 當伺服器準備從資料夾載入 ASP.NET時，產生此事件Load 當 ASP.NET程式已經載入記憶體時，產生此事件，可以在此

事件初始控制項屬性，和執行表單處理PreRender 在建立控制項前，產生此事件執行最後的控制項更新

Unload 當 ASP.NET程式完全執行之後，產生此事件

20

Web控制項的基礎 -說明Web控制項是一組比 HTML控制項功能更強大的控制項，不僅可以建立Web表單，它還包括資料顯示的相關控制項，其語法是使用 XML標籤的寫法，如下所示：

<asp:TextBox id="name" Width="200px" runat="Server"/>

Web控制項使用 asp字頭的 XML標籤，「 :」符號後是控制項種類，以此例是 TextBox控制項， id屬性為控制項名稱，同樣需要 runat屬性值 Server，指明是位在伺服端處理。

21

HTML控制項與WEB控制項的對照HTML控制項

<input type=“TEXT” id=“Name” runat=“Server”>

WEB<asp:TextBox id=“Name” runat=“Server”/>

22

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 /> 影像按鈕

23

Web控制項的基礎 -屬性屬性說明

Height 設定控制項的高度，可以使用 px像數或百分比

Width 設定控制項的寬度，可以使用 px像數或百分比

Font 設定控制項的字型，如下所示： Font-Name：字型名稱。 Font-Size：字型尺寸，以 pt為單位。 Font-Bold：粗體字。 Font-Underline：底線字。 Font-Italic：斜體字。

BackColor 設定控制項的背景色彩，可以使用色彩名稱或色彩值

ForeColor 設定控制項的前景色彩，可以使用色彩名稱或色彩值

BorderColor 設定控制項邊框的色彩

BorderStyle 設定控制項邊框的樣式，可以是 NotSet、None、Dotted、Dashed、Solid、Double、Groove、Ridge、Insert和 Outset

BorderWidth 設定控制項邊框的寬度

Style 在控制項使用局部套用的 CSS層級式樣式表

CSSClass 在控制項使用 Class的 CSS樣式名稱

24

Label標籤控制項 -說明Label標籤控制項的目的是在網頁顯示文字內容，它會轉換成 HTML的 <span>標籤，一個 Label標籤控制項的範例，如下所示：

<asp:Label id="Name" Width="200px" BorderStyle="solid"

BorderColor="#ccccff" runat="Server"/>

25

Label標籤控制項 -屬性屬性說明

Text 存取 Label控制項顯示的值

26

範例 11. 2. <%@ Page Language="VB" %>3. <html>4. <head>5. <title>Label標籤控制項 </title>6. <script language="VB" runat="Server">7. Sub Page_Load(Sender As Object, e As Eventargs)8. Name.Text = "ASP.NET網頁設計範例教本 "9. End Sub10. </script>11. </head>12. <body>13. <h2>Label標籤控制項 </h2>14. <hr>15. <asp:Label id="Name" Width="200px" BorderStyle="solid" 16. BorderColor="#ccccff" runat="Server"/>17. </body>18. </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

資料輸入控制項 -標籤屬性屬性說明

Columns 文字區域顯示的寬度，以字數為單位，只有當 TextMode屬性為Multiline時才需使用

MaxLength 設定控制項允許輸入文字的最大長度，不適用在 TextMode屬性為Multiline

ReadOnly 是否為唯讀控制項，True為是，預設值 False為不是 Rows 當 TextMode屬性為Multiline時，設定文字區域的高度有幾列 Text 存取文字控制項的內容

TextMode 設定文字控制項的狀態為密碼（Password）或文字區域（Mulitline）

Wrap 當 TextMode屬性為Multiline時，設定文字區域內容是否自動換行，預設值 True為自動換行，False為不換行

OnTextChanged 當使用者更改控制項內容時產生 TextChanged事件，需要配合AutoPostBack屬性才會有作用，詳細說明請參閱第 7-5節

30

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

31

範例 21. <script language="VB"

runat="Server">2. Sub button_Click(Sender As Object,

e As Eventargs)3. ' 顯示欄位值4. msg.Text = "姓名 : " & name.Text

& “<br/>”5. msg.Text &= "密碼 : " &

pass.Text & “<br/>”6. msg.Text &= "地址 : " &

address.Text & “<br/>”7. End Sub

1. <form runat="Server">2. 姓名 : <asp:TextBox id="name"

Width="200px" runat="Server"/><br/>

3. 密碼 : <asp:TextBox id="pass" Width="200px" TextMode="Password" runat="Server"/><br/>

4. 地址 : <asp:TextBox id="address" Width="200px" TextMode="Multiline" Rows="3" runat="Server"/>

5. <asp:Button id="Button" Text="送出 " OnClick="button_Click" Runat="Server"/>

6. </form>7. <asp:Label id=“msg"

ForeColor=“red” runat="Server"/>

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 核取方塊控制項 -標籤屬性屬性說明

Checked 檢查 CheckBox控制項是否勾選，預設值 False為沒有，True為勾選Text 存取控制項顯示的內容，即 CheckBox控制項的選項文字

TextAlign 設定選項文字和勾選方框的對齊方式，預設值為 Right靠右對齊，Left為靠左

OnCheckedChanged 當使用者勾選選項產生 CheckedChanged事件，需要配合 AutoPostBack屬性才會有作用，詳細說明請參閱第 7-5節

39

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

40

範例 31. Sub Page_Load(Sender As Object, e

As Eventargs)2. Tel.Checked = True3. End Sub4. Sub button_Click(Sender As Object, e

As Eventargs)5. Dim str As String = " 確認方式 : "6. If Tel.Checked Then7. str &= "使用電話來確認 <br>"8. End If9. If Email.Checked Then10. str &= "使用電子郵件來確認 <br>"11. End If12. If Fax.Checked Then13. str &= "使用傳真來確認 <br>"14. End If15. msg.Text = str16. End Sub

1. <form runat="Server">2. <b> 訂單確認的方式 </b><br>3. <asp:CheckBox id="Tel" Text="使用電話 " runat="Server"/>4. <asp:CheckBox id="Email" Text

="使用電子郵件 " runat="Server"/>

5. <asp:CheckBox id="Fax" Text="使用傳真 " runat="Server"/><br/>

6. <asp:button id="Button" Text="送出 " OnClick="button_Click" runat="Server"/><br/>

7. </form>8. <asp:Label id=“msg" font-

size="10pt" ForeColor=“red” runat="Server"/>

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

範例 41. Sub Page_Load(Sender As Object, e

As Eventargs)2. Card.Checked = True3. End Sub4. Sub button_Click(Sender As Object, e

As Eventargs)5. If Card.Checked Then6. msg.Text = Card.Text & "<br/>"7. Else If Tele.Checked Then8. msg.Text = Tele.Text & "<br/>"9. Else If Cash.Checked Then10. msg.Text = Cash.Text & "<br/>"11. End If12. End Sub

1. <form runat="Server">2. <b> 訂單的付款方式 </b><br/>3. <asp:RadioButton id="Card" Text

=" 信用卡 " Checked="True" GroupName="Payment" runat="server"/>

4. <asp:RadioButton id="Tele" Text=" 劃撥 " GroupName="Payment" runat="server"/>

5. <asp:RadioButton id="Cash" Text="到貨付款 " GroupName="Payment" runat="server"/><br>

6. <asp:button id="Button" Text="送出 " OnClick="button_Click" runat="Server"/><br/>

7. </form>8. <asp:Label id=“msg" font-

bold="true" foreColor=“red” runat="Server"/>

45

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

46

清單控制項 -屬性Web控制項有四種清單選擇功能的控制項：DropDownList、 ListBox、 CheckBoxList和RadioButtonList控制項。控制項都支援的屬性，如下表所示：屬性說明Items 取得清單控制項所有選項的集合物件

SelectedIndex 選取選項的最小索引值，如果是單選，就是選取選項的索引值，沒有選擇傳回-1

SelectedItem 取得最小選取索引值的 ListItem控制項OnSelectedIndexChanged 當使用者更改選項就會產生 SelectedIndexChanged事

件，需要配合 AutoPostBack屬性才會有作用，詳細說明請參閱第 7-5節

47

清單控制項 -在 VWD新增清單的ListItem控制項 1

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

48

清單控制項 -在 VWD新增清單的ListItem控制項 2請選取清單控制項，按一下上方箭頭圖示顯示

「 DropDownList工作」功能表，然後請按一下【編輯項目】超連結來新增 ListItem控制項的項目，可以看到「 ListItem 集合編輯器」視窗。

49

清單控制項 -在 VWD新增清單的ListItem控制項 3請重複按【加入】鈕，即可新增清單所需的 ListItem控制項，一個選項是一個

ListItem控制項。其相關屬性說明，如下表所示：屬性說明

Enabled 是否啟用此選項項目Selected 是否被選取，預設值為 False沒有選取，True為選取

Text 選項名稱Value 選項值

50

DropDownList下拉式選單控制項 -建立

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

51

DropDownList下拉式選單控制項 -屬性ListItem控制項相關屬性，如下表所示：屬性說明

ToolTip 存取當滑鼠移到控制項上時，顯示的文字內容

屬性說明

Selected 指出此選項是否被選取，預設值為 False 沒有選取，True

為選取

Text 設定和取得選項名稱

Value 設定和取得選項值

52

DropDownList下拉式選單控制項 -標籤

DropDownList控制項標籤，如下所示：<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>上述標籤建立 DropDownList控制項， ListItem控制項建立每一個選項。

53

DropDownList下拉式選單控制項 -使用在 DropDownList控制項可以檢查 SelectedIndex屬性值是否為 -1，以確定使用者是否選取，如下：If Shipment.SelectedIndex > - 1 Then ………End If如果使用者已經選取，接著使用 SelectedItem屬性取得 ListItem物件，以 Text和 Value屬性取得選項名稱和值，如下所示：Shipment.SelectedItem.TextShipment.SelectedItem.Value

54

範例 51. Sub button_Click(Sender As Object,

e As Eventargs)2. If Shipment.SelectedIndex > - 1

Then3. show.Text =

Shipment.SelectedItem.Text & _ Shipment.SelectedItem.Value

4. End If5. End Sub

1. <form runat="Server">2. <b> 訂單的寄送方式 </b><br>3. <asp:DropDownList id="Shipment"

Width="100px" runat="Server">4. <asp:ListItem Text=" 郵寄 "

Value="Mail"/>5. <asp:ListItem Text=" 快遞 "

Value="UPS"/>6. <asp:ListItem Text="自取 "

Value="Self"/>7. </asp:DropDownList>8. <asp:button id="Button" Text="送出 "

OnClick="button_Click" runat="Server"/>9. </form>10. <asp:Label id="show" font-bold="true"

runat="Server"/><br>

55

ListBox清單方塊控制項 -建立ListBox清單方塊控制項可以是單選或複選題，其顯示方式如同複選 HTML/XHTML標籤 <select>的清單方塊。在VWD設計檢視建立的Web表單，如下圖所示：

56

ListBox清單方塊控制項 -屬性屬性說明

Rows 設定和取得 ListBox控制項的高，預設值是 4

SelectionMode 設定控制項的選擇方式，Single為單選，Multiple為複選

ToolTip 存取當滑鼠移到控制項上時，顯示的文字內容

57

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，所以為多選。

58

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 IfNext i

Items屬性取得所有選項的集合物件， Count屬性取得選項數，Gifts.Items(i).Selected檢查選項是否選取， Text或 Value屬性取得選項名稱和值。

59

範例 61. Sub button_Click(Sender As

Object, e As Eventargs)2. Dim str As String = ""3. Dim i As Integer4. ' 取得所有的選項5. For i = 0 to Gifts.Items.Count-16. If Gifts.Items(i).Selected Then 7. str = str &

Gifts.Items(i).Text & "<br/>"8. End If9. Next i10. msg.Text = str11. End Sub

1. <form runat="Server">2. <b>選擇免費的禮物 ( 多選 )</b><br/>3. <asp:ListBox id="Gifts"

SelectionMode="Multiple" runat="Server">4. <asp:ListItem Text=" 滑鼠 " Value="1"

Selected="True"/>5. <asp:ListItem Text=" 鍵盤 " Value="2"/>6. <asp:ListItem Text=" 喇叭 " Value="3"/>7. <asp:ListItem Text=" 麥克風 "

Value="4"/>8. </asp:ListBox>9. <asp:button id="Button" Text="送出 "

OnClick="button_Click" runat="Server"/>10. </form>11. <asp:Label id=“msg" font-bold="true"

runat="Server"/><br/>

60

CheckBoxList 核取方塊清單控制項 -建立

CheckBoxList 核取方塊清單控制項是一組CheckBox控制項，它是複選的控制項，簡單的說，就是建立一個隱藏面版來編排CheckBox控制項。在 VWD設計檢視建立的Web表單，如下圖所示：

61

CheckBoxList 核取方塊清單控制項 -標籤屬性

CheckBoxList控制項相關屬性，如下表所示：屬性說明

CellPadding 儲存格中邊界和內容間的距離，預設值為-1CellSpacing 儲存格間的距離

RepeatColumns 使用多少欄來排列 CheckBox控制項，預設值為 0RepeatDirection 排列方向是預設值 Vertical垂直，或 Horizontal水平排列RepeatLayout 排列的版面配置，預設值 Table是使用表格，或是 Flow直

線排列TextAlign 選項文字和勾選方框的對齊方式，預設值為 Right靠右對

齊，Left為靠左

62

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>

63


Object, e As Eventargs)2. Dim str As String = ""3. Dim i As Integer4. ' 取得所有的選項5. For i = 0 to Gifts.Items.Count-16. If Gifts.Items(i).Selected Then 7. str = str & Gifts.Items(i).Text & _

"(" & Gifts.Items(i).Value & ")<br/>"

8. End If9. Next i10. msg.Text = str11. End Sub

1. <form runat="Server">2. <b>選擇免費的禮物 ( 多選 )</b><br/>3. <asp:CheckBoxList id="Gifts"

RepeatDirection="Horizontal" runat="Server">

4. <asp:ListItem Text=" 滑鼠 " Value="1" Selected="True"/>

5. <asp:ListItem Text=" 鍵盤 " Value="2"/>6. <asp:ListItem Text=" 喇叭 " Value="3"/>7. <asp:ListItem Text=" 麥克風 "

Value="4"/>8. </asp:CheckBoxList>9. <asp:button id="Button" Text="送出 "

OnClick="button_Click" runat="Server"/>10. </form>11. <asp:Label id=“msg" font-bold="true"

runat="Server"/><br/>

64

RadioButtonList選擇鈕清單控制項 -建立

RadioButtonList選擇鈕清單控制項是一組RadioButton控制項，屬於單選控制項，簡單的說，它就是提供面版來編排多個RadioButton控制項。在 VWD設計檢視建立的Web表單，如下圖所示：

65

RadioButtonList選擇鈕清單控制項 -標籤

RadioButtonList控制項是一組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>

66


Object, e As Eventargs)2. If Payment.SelectedIndex > - 1

Then3. show.Text =

Payment.SelectedItem.Text & _4. "(" &

Payment.SelectedItem.Value & ")"5. End If6. End Sub

1. <form runat="Server">2. <b> 訂單的付款方式 </b><br>3. <asp:RadioButtonList id="Payment"

RepeatDirection="Horizontal" runat="Server">

4. <asp:ListItem Text=" 信用卡 " Value="1" Selected="True"/>

5. <asp:ListItem Text=" 劃撥 " Value="2"/>6. <asp:ListItem Text=" 喇叭 " Value="3"/>7. <asp:ListItem Text="到貨付款 "

Value="4"/>8. </asp:RadioButtonList>9. <asp:button id="Button" Text="送出 "

OnClick="button_Click" runat="Server"/>10. </form>11. <asp:Label id="show" font-bold="true"

runat="Server"/><br>

67

Button按鈕控制項 -說明Button按鈕控制項的功能如同 HtmlButton和 HtmlInputButton控制項，如下所示：

<asp:Button id="Button" Text="送出 " OnClick="button_Click"

runat="Server"/>

68

Button按鈕控制項 -屬性與事件屬性與事件說明

CausesValidation 檢查當按下 Button控制項時，是否執行驗證，預設值 True

為是，False為否，需要配合第 8章的驗證控制項來使用

Text 設定和取得按鈕控制項顯示的標題名稱

OnClick 當按鈕按下時，觸發此事件

69

LinkButton 超連結按鈕控制項LinkButton 超連結按鈕控制項的功能如同Button控制項，只是顯示的外觀是超連結文字，如下所示：

<asp:LinkButton id="Button" Text="送出 " OnClick="button_Click" runat="Server"/>標籤建立名為 Button1的 LinkButton控制項，其相關屬性與事件和 Button控制項相同。

70

範例 9, 09_011. Sub button_Click(Sender As Object,

e As Eventargs)2. show.Text = "姓名 : " & name.Text

& "/" & Button.Text3. End Sub


Width="200px" runat="Server"/><br>3. <asp:LinkButton id="Button" Text

="送出 " OnClick="button_Click" runat="Server"/>

4. </form>5. <asp:Label id="show"

Width="200px" runat="Server"/>

71

ImageButton圖片按鈕控制項 -說明ImageButton圖片按鈕控制項的功能也是 Button控制項，只是以圖片顯示按鈕，如下所示：

<asp:ImageButton id="Button" ImageUrl="sample.jpg"

OnClick="button2_Click" runat="Server"/>標籤建立名為 Button的 ImageButton控制項，其相關屬性與事件和 Button控制項相似，只是沒有 Text屬性。

72

ImageButton圖片按鈕控制項 -屬性屬性說明

ImageUrl 設定和取得圖片的 URL網址

AlternateText 如果瀏覽程式無法顯示圖片時，顯示的替代文字

ImageAlign 設定和取得圖片的對齊方式，預設是 NotSet，可以是AbsBottom、AbsMiddle、Baseline、Bottom、Left、Middle、Right、TextTop和 Top

73

範例 101. Sub button_Click(Sender As Object,

e As ImageClickEventArgs)2. show.Text = "姓名 : " & name.Text

& "/" & Button.AlternateText3. End Sub


Width="200px" runat="Server"/><br>

3. <asp:ImageButton id="Button" 4. ImageUrl="sample.jpg" 5. AlternateText="按一下 " 6. OnClick="button_Click"

runat="Server"/>7. </form>8. <asp:Label id="show"

Width="200px" runat="Server"/>

74

練習 2:使用WEB控制項設計一個會員資料表類似右圖 :將個人資料內容取得後 , 做一些判斷後輸出例 : 依輸入的性別 ,判斷是先生或女士生日判斷可以判斷出星座

75

練習 3:使用WEB控制項設計圖片或影像按鈕使用者可以按下圖片來選購

76

Web表單送回功能Page物件的 IsPostBack屬性控制項的 AutoPostBack屬性

77

Web表單送回功能Web表單送回功能可以讓使用者在控制項輸入或選取的資料，送回伺服端來處理，預設送給 ASP.NET程式本身，其相關屬性說明如下所示：Page物件的 IsPostBack屬性：檢查是否是第

1 次載入 ASP.NET程式，或是已經在客戶端執行過送回。伺服端控制項的 AutoPostBack屬性：當控制項指定 AutoPostBack屬性為 True，表示當控制項資料變更時，就自動執行表單送回。

78

Page物件的 IsPostBack屬性在 Page_Load()事件處理程序，可以使用 Page物件的 IsPostBack屬性檢查是否是表單送回，如下所示：

If Page.IsPostBack Then If name.Text <> "" Then msg.Text = name.Text & " 歡迎進入網頁 !" End IfElse name.Text = " 江小魚 " lblName.Text = "使用者名稱 : "End If

79

控制項的 AutoPostBack屬性 -說明Web控制項如果擁有 AutoPostBack屬性，可以配合事件處理程序來自動送回控制項內容的變更，如下所示：

<asp:DropDownList Id="Username" Width="100px" Runat="server" AutoPostBack="True" OnSelectedIndexChanged="Change_Name"> <asp:ListItem Text=" 陳會安 " Value="001"/> <asp:ListItem Text=" 江小魚 " Value="002"/> <asp:ListItem Text=" 陳大安 " Value="003"/></asp:DropDownList>上述控制項的 AutoPostBack屬性為 True，表示當更改選項資料時，不用等到按【送出】鈕，就馬上自動送回。

80

控制項的 AutoPostBack屬性 -說明Web控制項支援 AutoPostBack屬性和其觸發事件，如下表所示：

Web控制項支援的事件TextBox TextChanged

CheckBox、RadioButton CheckChangedDropDownList、CheckBoxList、

ListBox、RadioButtonListSelectedIndexChanged

Documents

Ch06 建立 WEB 表單