Transcript 第6章伺服器控制項（一）

第六章 伺服器控制項（一）
在本章中，我們介紹工具箱／標準頁籤中的常
用控制項，並且探討ASP.NET如何利用
Postback完成網頁的事件驅動模型。至於較為
複雜的伺服器控制項，則留待下一章中介紹。
1
大綱
• 6.1 控制項簡介
– 6.1.1
– 6.1.2
Web伺服器控制項的種類
Web伺服器控制項的共通屬性
• 6.2 文字輸出控制項
– 6.2.1
– 6.2.2
Label控制項
Literal控制項
• 6.3 HiddenField隱藏資訊控制項
• 6.4 文字輸入控制項
– 6.4.1
– 6.4.2
– 6.4.3
TextBox控制項
讀取網頁與PostBack
AutoPostBack屬性
• 6.5 傳送控制項
– 6.5.1
– 6.5.2
– 6.5.3
Button控制項
ImageButton控制項
LinkButton控制項
2
大綱
• 6.6 選擇控制項
–
–
–
–
–
–
6.6.1
6.6.2
6.6.3
6.6.4
6.6.5
6.6.6
CheckBox多選控制項
CheckBoxList多選清單控制項
RadioButton選項按鈕（單選）控制項
RadioButtonList選項按鈕（單選）清單控制項
ListBox控制項
DropDownList控制項
• 6.7 多控制項的管理
– 6.7.1
– 6.7.2
控制項順序與快速切換
容器與Panel面板控制項
• 6.8 本章回顧
3
第六章 伺服器控制項（一）
• 在本章中，我們將介紹常用的Web伺服器控制項，並介紹何
謂PostBack，以及如何應用面板(Panel)來管理眾多控制項。
4
6.1 控制項簡介
• VWD的工具箱中提供的元件稱之為控制項(Control)，其完整名稱為伺服
器控制項(server control)，伺服器控制項在原始碼中，同樣以標籤型式出
現，但伺服器端的編譯器能夠理解並處理這些標籤。
• 除了自訂的控制項之外，ASP.NET提供的伺服器控制項可以分為兩大類：
– 1.HTML伺服器控制項(HTML Server Controls)：
• HTML伺服器控制項是由HTML標籤衍生而來，您可以先在工具箱的HTML
頁籤中選取HTML元件，這些HTML元件都是由簡單的HTML標籤所構成
• 當您在網頁中加入了HTML元件後，只需要在原始碼頁籤中，將其標籤加
上runat=“server”屬性即可（若無ID或id屬性，則也必須補上，例如Image：
HTML伺服器控制項）。
• 如下範例：
5
6
6.1 控制項簡介
7
6.1 控制項簡介
• 經由加入runat=“server”屬性的動作後，該HTML元件已經變成了
HTML伺服器控制項
• 換句話說，它可以被伺服器處理，因此，我們可以在撰寫程式時
使用它，而代表該控制項的名稱則為其標籤的id屬性值「Text1」。
• 例如我們可以在Page_Load程序中，加入下列敘述，使得「HTML
伺服器控制項：文字方塊」的內容初始為「請輸入文字」。
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
Text1.Value = "請輸入文字"
'並非使用Text屬性
End Sub
8
6.1 控制項簡介
• 執行後就成為上圖結果，您可以注意到，我們並非使用Text1.Text
來設定文字方塊的文字，這是因為它是一個HTML伺服器控制項的
文字方塊，其類別為HtmlInputText類別，並且隸屬於
System.Web.UI.HtmlControls命名空間，它並不是一個Web伺服
器控制項。
• 因此當您查閱HtmlInputText類別的線上說明時，會發現設定方塊
中的值，應該是以Value屬性來替代，它並沒有Text屬性。
• 如果您回到VWD的介面中，在「HTML伺服器控制項：文字方塊」
上按兩下，會發現它出現的事件程序是客戶端的JavaScript函式
Text1_onclick()，而非伺服器端的程序。
【註】以上為產生HTML伺服器控制項的方法，以及如何應用HTML伺服器控
制項，但在本書中，我們將極少使用HTML伺服器控制項，因為所有的HTML
伺服器控制項都可以使用Web伺服器控制項來取代。
9
6.1 控制項簡介
– 2. Web伺服器控制項(Web Server Controls)：
• Web伺服器控制項是ASP.NET自己制定的控制項，它可以經由伺
服器編譯器的處理而產生一個以上的HTML標籤以及些許
JavaScript程式碼以完成控制項的功能
• 我們在前幾章中建立的網頁控制項都是屬於Web伺服器控制項。
• 在原始碼頁籤中，Web伺服器控制項會以ASP.NET自訂的標籤格
式出現，其標準格式如下：
<asp:控制項類別 ID="控制項名稱" runat="server" />
• 所有Web伺服器控制項的所屬類別都位於
System.Web.UI.WebControls命名空間中
– 例如System.Web.UI.WebControls.Button類別代表Web伺服
器控制項按鈕的類別。
10
6.1 控制項簡介
• 而Web伺服器控制項的類別都繼承自
System.Web.UI.WebControls.WebControl類別，在此類別中，定
義了所有Web伺服器控制項的屬性和方法，而它又繼承自
System.Web.UI.Control類別，Control類別則定義了所有伺服器控
制項共用的屬性和方法。
• 在工具箱的標準頁籤中，所有的控制項都是Web伺服器控制項。
但並非所有的Web伺服器控制項都位於標準頁籤中，有些會位於
其他標籤中
– 例如驗證控制項也是Web伺服器控制項，其中範圍驗證控制項
所屬之類別為System.Web.UI.WebControls.RangeValidator類
別，同樣位於System.Web.UI.WebControls命名空間中。
11
6.1.1
類
Web伺服器控制項的種
• Web伺服器控制項的種類有很多，並分散於工具箱的各頁籤中，而我們將
標準頁籤的各種Web伺服器控制項依照字母順序，整理於表6-1中。
12
6.1.1 Web伺服器控制項的種類
13
6.1.1 Web伺服器控制項的種類
14
6.1.2 Web伺服器控制項的共通
屬性
• 所有的Web伺服器控制項都繼承自System.Web.UI.WebControls類別，因
此WebControls類別的屬性將會是所有的Web伺服器控制項皆具備的屬性。
我們將之整理於表6-2(a)中（但不含定義於WebControls父類別Control的
屬性）：
15
6.1.2 Web伺服器控制項的共通
屬性
16
17
6.1.2 Web伺服器控制項的共通
屬性
• 至於Web伺服器控制項（WebControls類別）繼承自Control類別的屬性就
更多了，因為Control類別是所有控制項的基底，因此，我們只將其重要
的屬性整理於表6-2(b)。
18
6.2 文字輸出控制項
• 顯示文字的Web伺服器控制項有Label與Literal
– Label控制項可以設定文字的樣式變化
– Literal控制項無法設定文字的樣式變化
• 6.2.1
Label控制項
• Label控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.Label類別
– 功能：可產生樣式變化的文字標籤。
– 輸出的標籤：
• <span>（搭配style屬性設定CSS製作文字效果），但若設定
AssociatedControlID屬性，則變為<label>。
19
6.2.1
Label控制項
– 類別重要的新增成員：
– 【AssociatedControlID屬性說明】
• 當使用AssociatedControlID屬性將標籤控制項與某個控制項產生
關聯時，標籤設定的快速鍵（AccessKey屬性值）將會變成關聯控
制項的快速鍵。
20
6.2.1
Label控制項
• 舉例來說，若L1標籤控制項的AssociatedControlID屬性設定為T1
文字方塊控制項，而L1標籤控制項的AccessKey屬性設定為“W”，
則在執行時，於網頁中按下【Alt】+【W】鍵，游標就會自動移到
T1文字方塊中。
• 之所以能夠達到此項功能，是因為當設定AssociatedControlID屬
性後，標籤控制項將被轉換為<label for="AssociatedControlID屬
性值" accesskey屬性="AccessKey屬性">之HTML標籤輸出，而非
<span>，換句話說，此時Label控制項被當作是某個控制項的說明
文字。
– 使用範例：見範例6-1。
21
6.2.2
Literal控制項
• Literal控制項的相關資訊如下：
– 類別： System.Web.UI.WebControls.Literal類別
– 功能：直接輸出文字（不可產生樣式變化）。
– 輸出的標籤：無。若不更動Mode屬性，則會將Text屬性值直接輸出。
22
6.2.2
Literal控制項
– 類別重要的新增成員：
23
6.2.2
Literal控制項
– 【Mode屬性說明】
• 若Mode設定為PassThrough，則Text的內容不會被修改就輸出。
• 若Mode設定為Encode，則Text的內容會轉換成HTML編碼的字串，例如
「<」、「>」等都會被更動為「&lt;」、「&gt;」。
• 若Mode設定為Transform，則Text的內容中不支援的標籤會被移除（一般
使用於非HTML的瀏覽器，例如WML裝置）。
– 使用範例：見範例6-1、6-2。
• 【範例6-1】
– 設計一個網頁，使用某一個Label標籤描述某一個文字方塊，並設定快捷鍵為
【Alt】+【N】鍵，按下按鈕後，將輸入的文字使用Literal 控制項及Label標籤
輸出。
• 範例6-1：
– 網站目錄 ASPNET\ch06\ch06_01\（檔案ch06_01.aspx）
24
6.2.2
Literal控制項
– Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性
（其餘屬性參照屬性窗格）。
25
6.2.2
Literal控制項
– 【註】設定BackColor與ForeColor等色彩屬性時，除了可以直接輸入
數值外，也可以使用選取方式如下：
26
• 事實上，您也可以直接輸入顏色的英文代碼，例如#0000FF的英文代碼為
Blue。要查閱英文代碼，可於線上說明查閱System.Drawing.KnownColor
列舉型別。
27
6.2.2
Literal控制項
– Step2：撰寫Button1_Click事件程序碼如下：
• 程式部分內容：
7
8
9
10
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Literal1.Text = TextBox1.Text & TextBox2.Text
Label3.Text = TextBox1.Text & TextBox2.Text
End Sub
– 範例說明：
• 僅有兩行敘述，都是連結字串後設定為Literal1與Label3的Text屬
性。（因為大部分動作都已經在屬性窗格中完成設定）
– Step3：執行程式。
28
6.2.2
Literal控制項
– Step4：於瀏覽器中執行快顯功能表的【檢視原始檔】指令，結果如下。
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
…………………
<form name="form1" method="post" action="ch06_01.aspx" id="form1">
…………………
<div>
<span id="Label1">工作地點</span>
<input name="TextBox1" type="text" value="&lt;桃園縣>"
id="TextBox1" style="background-color:#FFFF99;" />
<br />
<label for="TextBox2" id="Label2" accesskey="N">職業類別</label>
<input name="TextBox2" type="text" value="程式設計"
id="TextBox2" style="color:#0066FF;" />
<input type="submit" name="Button1" value="送出"
id="Button1" style="height: 21px" />
<br />
&lt;桃園縣&gt;程式設計
<br />
<span id="Label3"><桃園縣>程式設計</span>
</div>
</form>
…………………
30
6.2.2
Literal控制項
– 【原始碼說明】
• (1)所有行號都是為了說明而編號，由於已經簡略了許多原始碼，
故行號不見得是真實行號，並且原始碼也經過整理。（往後的範
例也將採用此方式說明）
• (2)第5行與第9行都是Label控制項的輸出，但由於Label2控制項設
定了AssociatedControlID與AccessKey屬性，故成為<label>標籤，
可作為說明文字（也就是快速鍵對應元件焦點）。
• (3)第15行是Literal1控制項的輸出，由於設定了Mode屬性為
Encode，故字串會經過編碼後才輸出，所以<>被編碼為特定字元。
而此編碼功能並不會將空白字元進行編碼，若有需要，應使用範
例5-2示範的Replace自行進行替換。
• (4)這個範例不論是否設定Literal1的Mode屬性，都存在一個問題，
您可以試試看在TextBox1中輸入<a>，將會出現潛在危險警告。此
錯誤與驗證有關，我們將於第8章介紹。
31
6.2.2
Literal控制項
• 【範例6-2】
– 改寫範例4-13、5-1，使用不可見的Literal1控制項達到記錄資料的目
的。
– 範例6-2：
– 網站目錄 ASPNET\ch06\ch06_02\（檔案ch06_02.aspx）
– Step1：網頁介面設計同範例5-1，但新增一個不可見的Literal控制項。
（所有控制項皆採相對定位、其餘屬性參照屬性窗格）。
32
6.2.2
Literal控制項
– Step2：撰寫<script>內的程式碼如下：
• 程式部分內容：
33
6.2.2
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Literal控制項
<script runat="server">
Private num As Integer
'定義私用的欄位num,非Shared欄位
Sub Addk(ByVal k As Integer) '可將此程序看作是Page類別的方法
num = num + k
End Sub
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
num = CInt(Literal1.Text)
'將Literal1.Text值取出
Addk(3)
Addk(3)
num = num + 1
Label1.Text = num
Literal1.Text = CStr(num)
'存入新的Literal1.Text值
End Sub
</script>
34
6.2.2
Literal控制項
– 範例說明：
• (1)程式碼和範例4-13非常類似，不過由於我們多了一個不可見的Literal1
控制項可應用。故在執行前，先將Literal1的內容取出作為這次執行時
num的初值（第14行）。而最後則將結果值回存到Literal1的內容中（第
19行）。
• (2)由於Literal1控制項始終存在，因此不論網頁來回執行幾次，都能夠記
錄上一次的值。並且由於Literal1控制項不可見，因此，使用者並不會看
到保留的資訊。
• (3)這個範例不會出現範例5-1跨網頁共用變數的問題。因為每一個由他端
新開啟的網頁，都會被配置一個新的Literal1控制項，並且初值為0。
• (4)事實上，還有很多方法可以達到此功能，例如HiddenField控制項、
ViewState、Session物件等。
• (5)事實上，這個範例可以不使用num欄位變數，而直接使用Literal1控制
項來運算，因為它也是Page的一個成員，只不過您可能需要進行更多的
型別轉換。
35
6.2.2
Literal控制項
– Step3：執行程式。
36
6.3 HiddenField隱藏資訊控制項
• 在範例6-2中，我們希望某些資料被保留，但不顯示在網頁中，當時我們
採用的是不可見的Literal控制項，事實上，任何可存放資料的控制項只要
設定為不可見，都可以達到此目的，只不過Literal控制項消耗的系統資源
相對較少而已。
• 除了使用不可見的控制項保存資料外，我們也可以採用HiddenField控制
項來記錄資料。
– 但這種做法會讓客戶端瀏覽器在執行【檢視原始檔】後，看到我們保留的資
料，因此只適合資料不具保密性，也不怕被竄改時使用。
• HiddenField控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.HiddenField類別
功能：建立一個隱藏資訊。
輸出的標籤： <input type="hidden">。
類別重要的新增成員：
37
6.3 HiddenField隱藏資訊控制項
• 【範例6-3】
– 改寫範例6-2，以HiddenField控制項取代不可見的Literal1控制項。
38
6.3 HiddenField隱藏資訊控制項
• 範例6-3：
– 網站目錄 ASPNET\ch06\ch06_03\（檔案ch06_03.aspx）
– Step1：網頁介面設計同範例6-2，但去除Literal1控制項、新增一個
HiddenField控制項。（所有控制項皆採相對定位、其餘屬性參照屬性
窗格）。
39
6.3 HiddenField隱藏資訊控制項
– Step2：撰寫<script>內的程式碼如下：
• 程式部分內容：
40
6.3 HiddenField隱藏資訊控制項
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script runat="server">
Private num As Integer
Sub Addk(ByVal k As Integer)
num = num + k
End Sub
'定義私用的欄位num,非Shared欄位
'可將此程序看作是Page類別的方法
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
num = CInt(HiddenField1.Value)
'將HiddenField1值取出
Addk(3)
Addk(3)
num = num + 1
Label1.Text = num
HiddenField1.Value = CStr(num)
'存入新的HiddenField1值
End Sub
</script>
41
6.3 HiddenField隱藏資訊控制項
– 範例說明：
• (1)程式碼和範例6-2非常類似，不過這次改用HiddenField控制項
來存放資訊。同樣地，這個程式也可以不使用num欄位變數。
• (2)在執行時，若於瀏覽器執行【檢視原始檔】後，會看到
HiddenField控制項產生的<input type="hidden">標籤，因此，不
具有保密性。這個方法並不常被程式設計師採用，想要在每一次
網頁來回時保留資訊，大多採用的是ViewState及Session物件。
不過ASP.NET時常採用這個技巧來保留資訊（但經過編碼）。例
如您在【檢視原始檔】中，也會看到其餘兩個<input
type="hidden">標籤，這是由ASP.NET自動產生的，我們會在後
面說明這兩個標籤的用處。
• Step3：執行程式。
• 【程式執行結果】：（同範例6-2）
42
6.3 HiddenField隱藏資訊控制項
– Step4：於瀏覽器執行【檢視原始檔】會看到下列<input
type="hidden">標籤。
43
6.4 文字輸入控制項
• 輸入文字的Web伺服器控制項為TextBox控制項。相對於HTML中，有單
行、密碼、多行等輸入文字的介面，在ASP.NET的Web伺服器控制項中，
全部都交由TextBox控制項來完成。
• 6.4.1TextBox控制項
• TextBox控制項的相關資訊如下：
– 類別： System.Web.UI.WebControls.TextBox類別
– 功能：可產生文字方塊。
– 輸出的標籤：
• <input type="text或password" />或<textarea>。
44
6.4 文字輸入控制項
– 類別重要的新增成員：
45
6.4.1
TextBox控制項
46
6.4.1
TextBox控制項
– 【Rows、Columns屬性說明】
• Height、Width、Rows、Columns 都可以設定文字方塊的外觀長寬，前者
以像素為單位，後者以字元為單位，但同時設定時，Height、Width會比
Rows、Columns優先考慮。
• 故透過介面拉動文字方塊大小後，才設定Rows、Columns就會變成無作
用（除非先刪除Height、Width屬性值）。
– 使用範例：見範例6-4、6-5、6-6。
47
6.4.1
TextBox控制項
• 【範例6-4】
– 設計一個網頁，包含三種不同的文字方塊，並處理多行文字方塊的換
行字元問題。
• 範例6-4：
– 網站目錄 ASPNET\ch06\ch06_04\（檔案ch06_04.aspx）
– Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性
（其餘屬性參照屬性窗格）。
48
6.4.1
TextBox控制項
49
6.4.1
TextBox控制項
– Step2：撰寫兩個事件程序如下：
• 程式部分內容：
50
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Dim str As New String("")
str = TextBox1.Text & "您好 <br />"
If Information.IsNumeric(TextBox2.Text) = False Then
str &= "請輸入數字密碼"
Label4.Text = str
Button2_Click(sender, e)
'呼叫
Return
'離開程序
End If
str &= "您的留言如下:<br />" & TextBox3.Text
Label4.Text = str.Replace(vbCrLf, "<br />") '處理換行字元
Button2_Click(sender, e)
'呼叫
End Sub
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
TextBox1.Text = ""
TextBox2.Text = ""
TextBox3.Text = ""
End Sub
51
6.4.1
TextBox控制項
– 範例說明：
• (1)由於TextMode屬性的設定，因此三個文字方塊將呈現不同功能。
TextBox1的寬度雖然較長，但仍舊只能輸入6個Unicode字元（因
為MaxLength屬性設定為6）
• (2)Button2按鈕是用來清除文字方塊的內容。而Button2_Click()也
可以讓其他其他程式碼呼叫，不過必須輸入正確的引數，因此在
第14、19行將獲得的參數當作引數傳遞即可。
• (3)第18行是將換行字元替換為<br />，否則在瀏覽器中，不會出現
換行效果。而換行字元是我們在TextBox3中，輸入文字時使用
【Enter】鍵造成的，因此這是一個不可見的特殊字元，VB為這些
常數規劃了Microsoft.VisualBasic.Constants類別，其中的vbCrLf
欄位可用來在程式中代表換行字元。至於如果輸入文字中包含空
白字元，則請參閱範例5-2，使用Replace(" ", "&nbsp;")來取代。
– Step3：執行程式。
52
53
6.4.1
TextBox控制項
• TextChanged事件
– 當資料回傳給伺服器端時，若文字方塊內容與上次回傳時不同，則會
產生TextChanged事件，並且ASP.NET會自動執行「實體名
_TextChanged()」程序。
• 【範例6-5】
– 設計一個留言網頁，若留言重複或空白，則出現警告訊息，並且不輸
出留言。（輸出後，不清除舊留言，除非使用者自己按下【清除】鈕）
• 範例6-5：
– 網站目錄 ASPNET\ch06\ch06_05\（檔案ch06_05.aspx）
– Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性
（其餘屬性參照屬性窗格）。
54
55
6.4.1
TextBox控制項
– Step2：撰寫四個程序如下：（要產生TextBox1_TextChanged()程序，
可以直接在TextBox1控制項上面按兩下）
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Protected Sub Page_Load(sender As Object, e As System.EventArgs))
Label1.Text = ""
Label2.Text = ""
End Sub
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
If Label2.Text = "" Then
Label1.Text = "請勿重複輸入相同的留言"
End If
If TextBox1.Text = "" Then
Label1.Text = "請勿輸入空白留言"
Label2.Text = ""
End If
End Sub
56
6.4.1
21
22
23
24
25
26
27
28
29
30
31
TextBox控制項
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
TextBox1.Text = ""
Label2.Text = ""
End Sub
Protected Sub TextBox1_TextChanged(sender As Object, e As System.EventArgs)
Dim str As New String("")
str &= "您的留言如下:<br />" & TextBox1.Text
Label2.Text = str.Replace(vbCrLf, "<br />")
'處理換行字元
End Sub
– 範例說明：
• (1)第7~10行：每一次執行網頁時，都一定會先執行Page_Load，
清除Label1與Label2的文字。
57
6.4.1
TextBox控制項
• (2)第27~31行：如果使用者修改了TextBox1文字方塊的內容，當資訊回
傳到伺服器時，會先執行TextBox1_TextChanged程序（在執行完
Page_Load之後）。而在本範例，資訊要回傳到伺服器，只有按下
Button1或Button2兩種可能。請注意，在本程序中，修改了Label2的內容。
• (3)第12~20行：若是按下Button1【送出】鈕，則會執行Button1_Click1程
序，此時若Label2.Text為空字串，代表前面只執行了Page_Load，而未
執行TextBox1_TextChanged程序，也就是文字方塊內容其實並未改變，
故第14行顯示勿輸入重複留言。而若TextBox1.Text為空字串（不論
Label2.Text是否為空字串），都在第17行將警告訊息改為勿輸入空白。
兩個If成立任一個，都會將Label2設為空字串，故只有在未輸入重複留言
且未輸入空白時，才會利用Label2顯示收到的留言訊息。
• (4)第22~25行：若是按下Button2【清除】鈕，則清除兩個欄位。至於
Label1為何不用清除，這是因為在Page_Load執行時已經清除，而所有程
式只有在執行Button1_Click程序時才可能改變Label1的內容，但
Button1_Click與Button2_Click只會執行其中一個，故不需要清除Label1
的內容。
58
6.4.1
TextBox控制項
• (5)這個範例告訴我們一件事實，每一次執行程式時，不一定只會執行一
個事件程序，並且TextBox1_TextChanged會比Button1_Click還先執行，
故我們可以擴充圖5-6的網頁生命週期，將本範例的網頁生命週期繪製如
下圖。
圖6-1 範例6-5的網頁生命週期
59
6.4.1
TextBox控制項
– Step3：執行程式。
60
6.4.1
TextBox控制項
• 上述的執行過程，其網頁生命週期一共有三次，過程可以繪製如
圖6-2，圖中標號了1,2,3，只有三次是傳送資料到伺服器端，並且
第1次只有標頭資料，並無其他資料，而第2次與第3次則稱之為
PostBack。
61
圖6-2 範例6-5執行過程中的三次網頁生命週期
62
6.4.2
讀取網頁與PostBack
• 在圖6-2中，第一次讀取網頁使用的是GET method，第二次與第三次都是
POST method，這是HTTP資料傳輸的兩大方法。
– GET較無保密性，資料會放在網址列的後面，以「?」區隔網址與資料，多筆
資料間則以「&」加以區隔。
– 而POST則會經過編碼包裝成一個封包(Package)來傳送。要在伺服器端判斷
該次客戶端傳送過來的資訊是使用GET還是POST，可以讀取
Page.Request.HttpMethod來達成
• 例如您可以在範例6-5中，增加一個標籤來顯示
Page.Request.HttpMethod的值，就可以判斷出每次客戶端送出要求時，
使用的是哪一個方法。
• 在ASP.NET的規劃下，除了第一次讀取網頁時使用GET method，其餘都
是使用POST method，因此每一個Web Form的<asp:form>輸出時，輸出
的HTML原始碼就包含下列資訊，代表未來將使用POST method傳送資訊。
<form name="表單名稱" method="post" action="網頁本身的網址" id="表單名稱">
…所有的控制項對應的HTML標籤…
</form>
63
6.4.2
讀取網頁與PostBack
– 因此，我們可以將圖6-2重新繪製如圖6-3與6-4，來解釋每一次網頁之
間的傳遞過程。
圖6-3
ASP.NET每一次網頁之間的傳遞過程
64
6.4.2
讀取網頁與PostBack
– 在圖6-3中，每一次的POST在ASP.NET中稱之為PostBack，因為對
於ASP.NET來說資料是回傳到伺服器端，故PostBack一般翻譯為「回
傳」，而它將發生在第二次以後的每次傳送。而ASP.NET之所以能夠
使用事件驅動方式來設計，主要就是因為它可以藉由PostBack來執行
對應的事件程序。
圖6-4 ASP.NET的行為循環
– 【註】
• 伺服器端的Page物件可以透過IsPostBack屬性，判斷此次網頁被
要求執行，是PostBack還是第一次連線。
65
6.4.2
讀取網頁與PostBack
• 要進行POST回傳資料（不考慮GET方式），客戶端只有兩種
方式可以達成：
– 1.在<form>標籤中，包含一個<input type=“submit”>形成的按鈕。按
下該按鈕後，就會將包含在<form>內的資料POST送往到伺服器action
對應的目標檔案。
– 2.使用JavaScript的指令進行POST送出資料到伺服器。
• 而Button控制項的輸出就是一個<input type="submit">，故而範例
6-5必須等到按下Button1或Button2按鈕時，客戶端才會送出資料
到伺服器端，而不是文字方塊內容變動時就送出資料。
66
6.4.3
AutoPostBack屬性
• 在前面我們已經說過，除了使用JavaScript之外，要回傳(PostBack)資料
給伺服器，只能透過submit按鈕（也就是Button控制項）完成。
• 而有些時候，我們希望在某個元件發生特定變化時，就能夠自動回傳
(PostBack)資料給伺服器，以便伺服器立即作出反應（例如選擇元件在項
目選取與未選取時加以出現某些提示訊息）。
– 遇到這種需求，我們可以將控制項的AutoPostBack屬性設定為True，就可以
達到目的了。
– 而設定AutoPostBack屬性後，實際上在進行AutoPostBack時，ASP.NET是利
用JavaScript的指令來完成的。
67
6.4.3
AutoPostBack屬性
– 不過，每一種控制項發生AutoPostBack的時機有些不同
• 例如選擇元件可以在控制項選擇改變時就自動AutoPostBack
• 但文字方塊控制項則必須要等到焦點移開文字方塊後，才會自動
AutoPostBack，這主要原因是在於它必須確保您已經完成了所有
文字的輸入（否則每輸入一個字就來回讀取網頁一次，將會造成
伺服器的負擔太大）。
– 我們透過一個範例來進行詳細的探討。
• 【範例6-6】
– 製作一個累加器，當使用者在文字方塊中輸入數值後，只要一將焦點
離開文字方塊，就立即執行加法並將結果呈現在旁邊的標籤中。
• 範例6-6：
– 網站目錄 ASPNET\ch06\ch06_06\（檔案ch06_06.aspx）
68
6.4.3
AutoPostBack屬性
– Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性
（其餘屬性參照屬性窗格）。
69
6.4.3
AutoPostBack屬性
– Step2：撰寫TextBox1_TextChanged程序如下：
• 程式部分內容：
7
8
9
10
Protected Sub TextBox1_TextChanged(sender As Object, e As System.EventArgs)
Label1.Text = CStr(CInt(Label1.Text) + CInt(TextBox1.Text))
TextBox1.Text = ""
End Sub
– 範例說明：
• 這個程式沒有按鈕，所以也沒有Button_Click程序。在TextBox1控
制項上按兩下即可產生上述程序，然後加入程式碼用以累加與清
除內容。
– Step3：執行程式。
70
71
6.4.3
AutoPostBack屬性
– Step4：重新執行程式，並於第一次執行後，於瀏覽器中執行快顯功
能表的【檢視原始檔】指令，結果如下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
………………
<form name="form1" method="post" action="ch06_06.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
72
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/ch06_06/WebResource.axd?d=Rv27NON6rxtFiA1VUkfCEA2&amp;t=
633777789737343750" type="text/javascript"></script>
<div>
<input name="TextBox1" type="text" id="TextBox1"
onchange="javascript:setTimeout('__doPostBack(\'TextBox1\',\'\')', 0)"
onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;"
style="top: 22px; left: 10px; position: absolute; height: 20px; width: 74px"
/>
</div>
</form>
…………………
73
6.4.3
•
AutoPostBack屬性
【原始碼說明】
– (1)上述原始碼已經刪減許多，而留下來的全都是為了完成文字方塊
內容改變時得以自動進行AutoPostBack所產生的HTML與JavaScript。
– (2)首先，第29行的onchange是當文字方塊內容發生變化時要執行的
內嵌JavaScript事件函式。由於setTimeout函式的緣故，所以它會在0
秒後呼叫__doPostBack(\‘TextBox1\’,\‘\’)函式。
– (3)至於__doPostBack函式則被定義在第15~20行，它有兩個參數，
第一個為取得事件目標，第二個為取得事件參數。
• 1.利用theForm變數取得網頁中的 form1物件。
• 2.第16行：此時是否為form1發生onsubmit事件，若是則不必利
用JavaScript進行處理而離開__doPostBack函式。
74
6.4.3
AutoPostBack屬性
• 3.第17~18行是將取得的兩個參數設定給第4、5行的二個隱藏欄位，
以便於回傳給伺服器時一起回送。
• 4.第19行是最重要的一行，它是將表單資料進行傳送伺服器的動作，
submit()也就是JavaScript中，用以產生PostBack行為的函式。
– (4)上述JavaScript程式碼對於一般初學者而言，是非常困難的，不過
您不用擔心，我們只需要設定控制項的AutoPostBack屬性為True，
ASP.NET就會自動幫我們在回傳給客戶端的資料中加入這些必要的
JavaScript程式碼，一行程式也不用寫。
75
6.5 傳送控制項
• 除了使用AutoPostBack方式自動回傳表單資料給伺服器，一般常使用的
方式仍是以submit按鈕來完成資料的傳送。而在ASP.NET中，與按鈕有
關的控制項一共有Button、ImageButton與LinkButton等三種控制項。
• 6.5.1Button控制項
• Button控制項就是我們在前面常使用的按鈕控制項，它以文字按鈕的外觀
呈現於網頁中。並且會在輸出時，轉換為<form>標籤內的<input
type="submit">標籤。
• Button控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.Button類別
– 功能：產生文字型式的按鈕。
– 輸出的標籤：
• <input type="submit">。若UseSubmitBehavior屬性設定為False，則輸出
為<input type="button">，並使用JavaScript進行submit動作。
– 類別重要的新增成員：
76
77
– 【PostBackUrl屬性說明】
• 在ASP.NET的規劃中，Web Form對應的<form>標籤之action屬性
將永遠記載為網頁本身的網址。
• 如果想要進行網頁轉向，則可以使用Response.Redirect，但如果
想要同時POST表單資料，則應該使用PostBackUrl屬性來完成。
• 一般我們並不建議這麼做，除非是想要POST的目標網頁是非
ASP.NET網頁，例如PHP、傳統ASP、JSP等。在ASP.NET中，
我們較常使用的方式仍舊是單一網頁型式並以事件驅動模型來開
發，如此較為單純。
78
6.5.1
Button控制項
– 使用範例：見之前的眾範例及範例6-7。
• 【範例6-7】
– 設計一個網頁，包含三個按鈕，功能為對樂透球號進行不同的顯示方
式。
• 範例6-7：
– 網站目錄 ASPNET\ch06\ch06_07\（檔案ch06_07.aspx）
– Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性
（其餘屬性參照屬性窗格）。
79
6.5.1
Button控制項
80
6.5.1
Button控制項
– 屬性窗格切換到事件頁籤，並將三個按鈕的Command事件都設定為
Button1_Command。
– Step2：撰寫<script>內的程式碼如下：
• 程式部分內容：
81
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script runat="server">
Dim balls() As Integer = {37, 14, 20, 6, 38, 42}
Dim specBall As Integer = 15
'若需從檔案載入球號,可以撰寫於Page_Load程序中
Protected Sub Button1_Command(sender As Object,
e As System.Web.UI.WebControls.CommandEventArgs)
Label1.Text = "球號" : Label2.Text = "特別號:"
Select Case e.CommandName
Case "Original"
Label1.Text &= "(原始順序):"
Case "Sort"
SortBy(CStr(e.CommandArgument))
Label1.Text &= "(排序):"
Case Else
Label1.Text &= " 發生錯誤"
End Select
For Each num In balls
Label1.Text &= CStr(num) & " "
Next
Label2.Text &= CStr(specBall)
End Sub
82
6.5.1
29
30
31
32
33
34
35
36
Button控制項
Sub SortBy(ByVal commandArg As String)
Array.Sort(balls)
'遞增排序
If commandArg = "遞減" Then
Array.Reverse(balls) '已遞增故反向即可
End If
End Sub
</script>
– 範例說明：
• (1)第11~28行：Button1_Command會在按鈕被按下後執行。其中
利用「e.CommandName」判斷是哪一個按鈕被按下，當然如果
您想要使用sender來判斷也可以。
83
6.5.1
Button控制項
– 這個範例是本書第一次示範事件物件e的使用方式，而此時的e
之型別為CommandEventArgs類別，您可以查閱它有兩個屬
性CommandArgument與CommandName屬性，恰好對應按
鈕物件的同名屬性。而由於CommandName屬性回傳值型別
為String，故可以直接用來在Select…Case中當作條件值。
• (2)第30~35行：由於CommandArgument屬性的型別為Object（事
實上，它是為了要對應可能出現的不定數量之參數而如此宣告），
因此第17行先使用CStr()將之轉換後呼叫SortBy()程序。由於必定
要經過排序，故先排序後再決定是否需要反轉。
– Step3：執行程式。
84
85
6.5.2
ImageButton控制項
• ImageButton控制項可以製作圖片型式的按鈕，您必須設定圖
片的來源位址，並且傳送時也可以接收到滑鼠游標在按下圖
片按鈕時的座標。
• ImageButton控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.ImageButton類別
– 重要的繼承類別：
• 本類別繼承自System.Web.UI.WebControls.Image類別
– 功能：產生圖片型式的按鈕。
– 輸出的標籤：<input type="image">。
– 類別重要的新增成員：
86
6.5.2
ImageButton控制項
87
6.5.2
ImageButton控制項
– 使用範例：見範例6-8。
88
6.5.3
LinkButton控制項
• LinkButton控制項可以製作超鏈結型式的按鈕，事實上，它就是一個超鏈
結，外觀上與HyperLink 控制項相同，但功能接近於Button控制項。
• 它的輸出是一個<a>錨標籤，不過href並不像一般超鏈結直接設定目標網
址，而是執行一個內嵌的JavaScript，並呼叫__doPostBack函式進行回傳
動作。
• LinkButton控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.LinkButton類別
– 功能：產生超鏈結型式的按鈕。
– 輸出的標籤：
• a href="javascript:__doPostBack('名稱','')">文字</a>。
– 類別重要的新增成員：
89
6.5.3
LinkButton控制項
– 使用範例：見範例6-8。
90
6.5.3
LinkButton控制項
• 【範例6-8】
– 圖形按鈕及超鏈結按鈕的練習。
• 範例6-8：
– 網站目錄 ASPNET\ch06\ch06_08\（檔案ch06_08.aspx）
– 【預備資源】：新網站建立後，將Time.jpg複製到網站目錄中
– Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性
（其餘屬性參照屬性窗格）。
91
6.5.3
LinkButton控制項
– 【加入圖片的方式：ImageUrl屬性】
• 先在介面中加入ImageButton1控制項，然後到屬性窗格中，點選
該控制項的ImageUrl屬性值，如下圖。
92
6.5.3
LinkButton控制項
93
6.5.3
LinkButton控制項
– Step2：撰寫兩個事件程序如下：
7
8
9
10
11
12
13
Protected Sub ImageButton1_Click(sender As Object,
e As System.Web.UI.ImageClickEventArgs)
Label1.Text = "您按下了圖片按鈕,按下時的游標座標為(" & e.X & "," & e.Y & ")"
End Sub
Protected Sub LinkButton1_Click(sender As Object, e As System.EventArgs)
Label1.Text = "您按下了鏈結按鈕"
End Sub
– 範例說明：
• (1)第11~13行：按下超鏈結按鈕後會執行LinkButton1_Click事件程序。
• (2)第7~9行：按下圖片按鈕後會執行ImageButton1_Click事件程序，其中
e.X與e.Y是取出滑鼠按下時的座標。
– Step3：執行程式。
94
95
6.6 選擇控制項
• ASP.NET提供的選擇控制項種類眾多，包含單選、複選、選單等種類，
有時我們會希望在選取某些項目時立即作出反應，此時通常搭配該控制項
的AutoPostBack屬性來完成。
• 6.6.1CheckBox多選控制項
– CheckBox控制項將會在網頁中出現一個核取方塊，使用者可以勾選該方塊，
代表選取對應的項目。
• CheckBox控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.CheckBox類別
– 功能：可產生一個核取方塊（包含其說明文字）。
– 輸出的標籤：
• 核取方塊以<input type=“checkbox” />標籤出現。
說明文字以<label for="方塊名稱">說明文字</label>標籤出現。
– 類別重要的新增成員：
96
97
6.6.1
CheckBox多選控制項
– 使用範例：見範例6-9。
• 【範例6-9】
– 核取方塊的練習。
• 範例6-9：
– 網站目錄 ASPNET\ch06\ch06_09\（檔案ch06_09.aspx）
– Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬
性參照屬性窗格）。
98
– Step2：撰寫兩個事件程序如下：
• 程式部分內容：
7
8
9
10
11
12
13
Protected Sub CheckBox3_CheckedChanged(sender As Object, e As System.EventArgs)
If CheckBox3.Checked = True Then
CheckBox3.Text = "螢幕(螢幕為代購, 不適用永久保固)"
Else
CheckBox3.Text = "螢幕"
End If
End Sub
99
6.6.1
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
CheckBox多選控制項
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
If (CheckBox1.Checked Or CheckBox2.Checked _
Or CheckBox3.Checked) = False Then
Label1.Text = "請選擇至少一樣產品"
Return
End If
Label1.Text = "您所訂購的產品如下:<br />"
If CheckBox1.Checked = True Then
Label1.Text &= CheckBox1.Text & "<br />"
End If
If CheckBox2.Checked = True Then
Label1.Text &= CheckBox2.Text & "<br />"
End If
If CheckBox3.Checked = True Then
Label1.Text &= CheckBox3.Text.Substring(0, 2) & "<br />"
End If
End Sub
100
6.6.1
CheckBox多選控制項
– 範例說明：
• (1)第7~13行：點選CheckBox3時，會自動立即執行（因為已經設
定該控制項的AutoPostBack屬性為True），藉由
CheckBox3.Checked判斷選項是否被選取。
• (2)第15~31行：按下按鈕後會執行，第16~20行是當三個選項都未
被按下時執行。
– Step3：執行程式。
101
102
6.6.2
控制項
CheckBoxList多選清單
• 假設我們有許多的核取方塊需要出現在網頁中，並且它們具有同一性質且
允許複選（例如使用者可選擇索取1~12月中任幾個月的交易資料），此
時除了可以使用CheckBox控制項一個一個的建立選項之外，也可以直接
使用CheckBoxList控制項，建立核取方塊清單。
• CheckBoxList控制項中的每個選項合起來會形成一個ListItemCollection集
合，並且還可以動態繫結XML或資料庫檔案，自動設定各選項的文字。
• CheckBoxList控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.CheckBoxList類別
重要繼承類別：本類別繼承自System.Web.UI.WebControls.ListControl類別
其他重要的類別： ListControl.Items屬性的型別則為ListItemCollection類別。
功能：可產生核取方塊清單。
103
6.6.2
控制項
CheckBoxList多選清單
– 輸出的標籤（1）：
• 若設定為Table配置方式，則整個清單包含在<table>表格內，垂直
顯示時，表格的每一列<tr>只有一個儲存格<td>，水平顯示時，則
只有一個<tr>，但有多個儲存格<td>。而每一個核取方塊選項都包
含在一個儲存格內。
– 輸出的標籤（2）：
• 若設定為Flow配置方式，垂直顯示時，使用<br />分隔各選項，水
平顯示時，沒有任何標籤作為區隔。
– 輸出的標籤（3）：
• 核取方塊選項則同樣採用<input type="checkbox" />、說明文字同
樣採用<label>標籤出現。而每一個選項的id名稱與name名稱都不
相同（以_與$分隔遞增編號）。
– CheckBoxList類別重要的新增成員：
104
105
6.6.2
控制項
CheckBoxList多選清單
– ListControl類別重要的新增成員：
106
6.6.2
控制項
CheckBoxList多選清單
107
6.6.2
控制項
CheckBoxList多選清單
– 【Items 屬性說明】
• ListControl.Items屬性的回傳值是一個ListItemCollection集合，它
的每一個元素都是一個ListItem物件，並且可以透過多種方法進行
加入、移除元素，或者尋找特定元素。
• 這個集合與範例5-9的集合類似，也是一種key-value集合，但此處
的兩個欄位分別稱為Text與Value。我們將相關方法與屬性整理於
表6-11(c)。
108
6.6.2
控制項
CheckBoxList多選清單
– ListItemCollection類別(ListControl.Items屬性的型別)重要的成員：
109
6.6.2
控制項
CheckBoxList多選清單
• 而由於ListItemCollection集合中，每個項目都是一個ListItem類別
的物件，故我們也將ListItem類別的重要屬性列於下表。
110
6.6.2
控制項
CheckBoxList多選清單
– ListItem類別重要的成員：
– 使用範例：見範例6-10、6-11。
• 【範例6-10】
– 使用核取方塊清單製作同範例6-9的網頁。
111
6.6.2
控制項
CheckBoxList多選清單
• 範例6-10：
– 網站目錄ASPNET\ch06\ch06_10\（檔案ch06_10.aspx）
– Step1：除了CheckBoxList控制項之外，其餘控制項皆與範例6-9相同。
您可以複製範例6-9的所有檔案後，更改檔名，刪除事件程序，然後刪
除三個CheckBox控制項即可完成下圖介面。
– Step2：在工具箱中拖曳CheckBoxList控制項至標籤與按鈕之間，然
後會出現CheckBoxList1控制項，點選旁邊的【編輯項目】指令。
112
113
6.6.2
控制項
CheckBoxList多選清單
– Step3：加入第一個ListItem項目到CheckBoxList控制項。
114
115
6.6.2
控制項
CheckBoxList多選清單
– Step4：仿照Step3，陸續加入另外兩個ListItem項目到CheckBoxList
控制項。
• 分別為(Text="鍵盤滑鼠"、Value="U2")、 (Text="螢幕"、
Value="Q")，結果如下，最後按下【確定】鈕。
116
6.6.2
控制項
CheckBoxList多選清單
– Step5：回到介面後，您會發現剛才設計的項目已經出現了，不過預
設為垂直排列。
117
6.6.2
控制項
CheckBoxList多選清單
– Step6：為了要和範例6-9的水平排列方式相同，我們設定
CheckBoxList1控制項的RepeatDirection屬性為Horizontal，結果如圖。
118
6.6.2
控制項
CheckBoxList多選清單
– Step7：設定CheckBoxList1控制項的AutoPostBack屬性為True。
– Step8：撰寫兩個事件程序如下：（產生程序方式，請在
CheckBoxList1控制項上按兩下以及在Button1控制項上按兩下）
• 程式部分內容：
7
8
9
10
11
12
13
Protected Sub CheckBoxList1_SelectedIndexChanged(sender As Object,
e As System.EventArgs)
If CheckBoxList1.Items(2).Selected = True Then
CheckBoxList1.Items(2).Text = "螢幕(螢幕為代購, 不適用永久保固)"
Else
CheckBoxList1.Items(2).Text = "螢幕"
End If
End Sub
119
6.6.2
控制項
14
15
16
17
18
19
20
21
22
23
24
25
26
27
CheckBoxList多選清單
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
If (CheckBoxList1.SelectedIndex) < 0 Then
Label1.Text = "請選擇至少一樣產品"
Return
End If
Label1.Text = "您所訂購的產品如下:<br />"
For i As Integer = 0 To CheckBoxList1.Items.Count - 1
If CheckBoxList1.Items(i).Selected = True Then
Label1.Text &= CheckBoxList1.Items(i).Text & "<br />"
End If
Next
End Sub
120
6.6.2
控制項
CheckBoxList多選清單
– 範例說明：
• (1)第7~13行：只要按下任何一個項目，都會自動立即執行（因為已經設
定AutoPostBack屬性為True），第8~12行與範例6-9的第8~12行功能完
全相同，是用來判斷第三個項目是否被選取。但此處必須藉由判斷
CheckBoxList1.Items(2).Selected來判斷，CheckBoxList1.Items是一個集
合，其內共有0、1、2三個ListItem項目，也就是我們剛才編輯的三個項目。
• (2)第15~27行：按下按鈕後會執行，功能和範例6-9的第16~20行相同，
不過此處以CheckBoxList1.SelectedIndex回傳值來判定是否有選項被選
取，若有選項被選取，則回傳值為0、1或2。而第22~26行則是以迴圈方
式檢查每一個項目是否被選取。明顯地，由於可以利用迴圈來撰寫程式，
當項目很多時，使用CheckBoxList控制項的程式會較為簡潔。
– Step9：執行程式。
• 【程式執行結果】：與範例6-9相同，但不論是按下哪一個選項（不一定
是最右邊那一個），都會發生PostBack動作。
121
6.6.2
控制項
CheckBoxList多選清單
• 【範例6-11】
– 使用XML檔案作為資料來源，改寫範例6-10。
• 範例6-11：
– 網站目錄 ASPNET\ch06\ch06_11\（檔案ch06_11.aspx）
– Step0：預先準備好一個XML檔案，檔名為list.xml，放置於\ch06\ch06_11\中，
其內容如下（您可以在VWD中，於方案總管中加入新項目，項目為XML檔）：
<?xml version="1.0" encoding="utf-8" ?>
<root>
<item num="U1" ProductName="電腦主機" />
<item num="U2" ProductName="鍵盤滑鼠" />
<item num="Q" ProductName="螢幕" />
</root>
– Step1：同範例6-10。
122
6.6.2
控制項
CheckBoxList多選清單
– Step2：同範例6-10，在工具箱中拖曳CheckBoxList控制項至標籤與
按鈕之間，然後會出現CheckBoxList1控制項，但此時點選旁邊的
【選擇資料來源】指令。
123
6.6.2
控制項
CheckBoxList多選清單
– Step3：設定資料來源為list.xml。
124
125
126
6.6.2
控制項
CheckBoxList多選清單
127
6.6.2
控制項
CheckBoxList多選清單
– Step4：此時回到介面中，您會發現它並不會馬上顯示每個項目的文
字，這是因為我們採用的XML繫結方式是一種動態繫結，換句話說，
在執行時，XML檔案的內容才會被取出來作為選項文字。
128
6.6.2
控制項
CheckBoxList多選清單
– Step5：上圖中，會出現一個XmlDataSource1物件，它在執行時並不
是一個可見元件，而功能則是作為將XML檔與CheckBoxList1控制項
繫結在一起的橋樑，使得CheckBoxList1控制項可以讀取XML檔案內
的資料。
– Step6：和範例6-10的Step6相同，將CheckBoxList1控制項的
RepeatDirection屬性設定為Horizontal。
– Step7：和範例6-10的Step7相同，將CheckBoxList1控制項的
AutoPostBack屬性設定為True。
– Step8：撰寫兩個事件程序，程式內容與範例6-10的Step8完全相同：
（產生程序方式，請在CheckBoxList1控制項上按兩下以及在Button1
控制項上按兩下）
– Step9：執行程式。
• 【程式執行結果】：與範例6-10完全相同。
129
6.6.3
RadioButton選項按鈕
（單選）控制項
• 有些時候我們希望某些選項只允許使用者選取其中一個選項，
此時，我們可以利用RadioButton控制項（稱之為選項按鈕）
來完成。
• RadioButton類別由於繼承了CheckBox類別，故大多數的屬
性都與CheckBox類別相同，而它並沒有新增的事件。
• RadioButton控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.RadioButton類別
– 功能：產生選項按鈕。
– 重要的繼承類別：
• 本類別繼承自System.Web.UI.WebControls.CheckBox類別
– 輸出的標籤：<input type="radio" name="群組名" />。
130
6.6.3
RadioButton選項按鈕
（單選）控制項
– 類別重要的新增成員：
– 【GroupName 屬性說明】
• 單選在HTML中，是依照<input type="radio" name="群組名" />的
群組名作為單選依據。所有群組名相同的選項按鈕，最多只能選
取其中一個。
131
6.6.3
RadioButton選項按鈕
（單選）控制項
–
• 而GroupName的屬性值在輸出時，就會變成name="群組名“
• 若未設定GroupName屬性值，則預設將會輸出為name=“控制項名
稱”，雖然控制項的名稱一定會不同，但我們不能確保沒有其他
RadioButton控制項的屬性曾被設定為該名稱
– （例如RadioButton9的GroupName的屬性設定為
RadioButton1，若RadioButton1未設定GroupName屬性，則
結果會被視為同一組），故最好是每一個RadioButton控制項
都自行設定GroupName屬性，自行分組
– 若真的只有一個選項想要單純自成一組，也應該設定。
使用範例：見範例6-12。
• 【範例6-12】
– 選項按鈕的練習，將範例6-9的選項改為同一組之單選，並設定另一組
選項按鈕。
132
6.6.3
RadioButton選項按鈕
（單選）控制項
• 範例6-12：
– 網站目錄 ASPNET\ch06\ch06_12\（檔案ch06_12.aspx）
– Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性
（其餘屬性參照屬性窗格）。
133
6.6.3
RadioButton選項按鈕
（單選）控制項
134
6.6.3
RadioButton選項按鈕
（單選）控制項
– Step2：撰寫三個事件程序如下：（在兩個按鈕上按兩下，在
RadioButton3控制項上按兩下產生）
• 程式部分內容：
7
8
9
10
11
12
13
14
Protected Sub RadioButton3_CheckedChanged(sender As Object,
e As System.EventArgs)
If RadioButton3.Checked = True Then
RadioButton3.Text = "螢幕(螢幕為代購, 不適用永久保固)"
Else
RadioButton3.Text = "螢幕"
End If
End Sub
135
6.6.3
RadioButton選項按鈕
（單選）控制項
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
If (RadioButton1.Checked Or RadioButton2.Checked _
Or RadioButton3.Checked) = False Then
Label1.Text = "請選擇至少一樣產品"
Return
End If
Label1.Text = "您所訂購的產品如下:<br />"
If RadioButton1.Checked = True Then
Label1.Text &= RadioButton1.Text & "<br />"
End If
If RadioButton2.Checked = True Then
Label1.Text &= RadioButton2.Text & "<br />"
End If
If RadioButton3.Checked = True Then
Label1.Text &= RadioButton3.Text.Substring(0, 2) & "<br />"
End If
If RadioButton5.Checked = True Then
Label1.Text &= "您是VIP會員,請於收到發票後兌換禮品<br />"
End If
End Sub
136
6.6.3
RadioButton選項按鈕
（單選）控制項
35
36
37
38
39
40
41
42
43
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
RadioButton1.Checked = False
RadioButton2.Checked = False
RadioButton3.Checked = False
RadioButton3.Text = "螢幕"
RadioButton4.Checked = True
RadioButton5.Checked = False
End Sub
– 範例說明：
• (1)第7~13行：邏輯上與範例6-9相同，只不過控制項由
CheckBox3改為RadioButton3。不過這個程序應該同時讓
RadioButton1,2,3同時都能夠於AutoPostBack時執行，故下個步
驟應該做些設定。
137
6.6.3
RadioButton選項按鈕
（單選）控制項
• (2)第15~34行：第15~30行邏輯上與範例6-9相同，只不過各控制
項由CheckBox改為RadioButton。第31行則可以換為
RadioButton4.Checked = False，因為兩者必定同時發生（我們已
經預選了RadioButton4，故要改為不選，除非是選取了
RadioButton5）。
• (3)第36~43行：回復到原本的初始狀態，除此之外，我們無法在
執行時，透過使用者的操作使RadioButton1,2,3由選取了某一個之
後又改為都不選。
– Step3：由於會使得RadioButton3產生變化，可能是因為按下了
RadioButton1或RadioButton2，因此在屬性窗格中，切換到事件頁籤，
將RadioButton1與RadioButton2的CheckedChanged 事件也設定為
RadioButton3_CheckedChanged（也就是使三個選項按鈕共用同一
個事件程序）
138
6.6.3
RadioButton選項按鈕
（單選）控制項
– Step4：執行程式。
139
140
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
• 同樣地，當有多個或多組選項按鈕時，使用RadioButtonList選項按鈕（單
選）會讓程式撰寫更為簡潔，尤其是同一組選項按鈕原本就具有單選性質，
每一個選項會影響同組的另一個選項，故使用清單將事件程序統一較為適
當。
• RadioButtonList類別與CheckBoxList類別都是繼承自ListControl類別，故
相關的屬性與方法、事件請參閱表6-11(a)(b)(c)(d)。
• RadioButtonList控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.RadioButtonList類別
– 重要繼承類別：
• 本類別繼承自System.Web.UI.WebControls.ListControl類別
– 其他重要的類別：
• ListControl.Items屬性的型別則為ListItemCollection類別。
– 功能：可產生選項按鈕清單。
141
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– 輸出的標籤（1）：若設定為Table配置方式，則整個清單包含在
<table>表格內，與CheckBoxList排列方式相同，不再累述。
– 輸出的標籤（2）：若設定為Flow配置方式，垂直顯示時，使用<br />
分隔各選項，水平顯示時，沒有任何標籤作為區隔。
– 輸出的標籤（3）：選項按鈕則採用<input type=“radio” name=“控制
項名稱” />，因為沒有GroupName屬性，故採用name=“控制項名稱”
即可達到同一組的目的。
• 說明文字同樣採用<label>標籤出現。
• 重要事項說明：一個選項按鈕清單內的所有選項都必定被設定為
同一組（只有一個可被選取），並沒有GroupName屬性可設定。
142
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– RadioButtonList類別重要的新增成員：
– ListControl類別重要的新增成員請見表6-11(b)。
– ListItemCollection類別(ListControl.Items屬性的型別)重要的成員見表
6-11(c) 。
– ListItem類別重要的成員見表6-11(d) 。
– 使用範例：見範例6-13。
143
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
• 【範例6-13】
– 使用按鈕選項清單製作同範例6-12的網頁。
• 範例6-13：
– 網站目錄 ASPNET\ch06\ch06_13\（檔案ch06_13.aspx）
– Step1：除了RadioButtonList控制項之外，其於控制項皆同範例6-12。
故複製範例6-12的所有檔案後，先刪除事件程序以及RadioButton控制
項即可完成下圖介面。
144
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– Step2：在工具箱中拖曳RadioButtonList控制項至標籤與按鈕之間，
然後會出現RadioButtonList1控制項，點選旁邊的【編輯項目】指令，
然後參考範例6-10的Step3、4設定相關選項，結果如圖。
145
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– Step3：設定RadioButtonList1控制項的RepeatDirection屬性為
Horizontal，結果如圖。
146
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– Step4：仿照Step2加入另外一個RadioButtonList2控制項，但編輯
ListItem時，將一般會員的Selected設定為True。
147
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– Step5：仿照Step3，設定RadioButtonList2控制項的RepeatDirection
屬性為Horizontal，結果如圖。
– Step6：設定RadioButtonList1控制項的AutoPostBack屬性為True。
– Step7：更改檔名為ch06_13.aspx。
148
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– Step7：撰寫三個事件程序如下：（產生程序方式，請在
RadioButtonList1控制項上按兩下以及在兩個按鈕控制項上按兩下）
• 程式部分內容：
7
8
9
10
11
12
13
14
Protected Sub RadioButtonList1_SelectedIndexChanged(sender As Object,
e As System.EventArgs)
If RadioButtonList1.Items(2).Selected = True Then
RadioButtonList1.Items(2).Text = "螢幕(螢幕為代購, 不適用永久保固)"
Else
RadioButtonList1.Items(2).Text = "螢幕"
End If
End Sub
149
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
If (RadioButtonList1.SelectedIndex) < 0 Then
Label1.Text = "請選擇至少一樣產品"
Return
End If
Label1.Text = "您所訂購的產品如下:<br />"
For i As Integer = 0 To RadioButtonList1.Items.Count - 1
If RadioButtonList1.Items(i).Selected = True Then
Label1.Text &= RadioButtonList1.Items(i).Text & "<br />"
End If
Next
If RadioButtonList2.Items(1).Selected = True Then
Label1.Text &= "您是VIP會員,請於收到發票後兌換禮品<br />"
End If
End Sub
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
RadioButtonList1.ClearSelection()
RadioButtonList1.Items(2).Text = "螢幕"
RadioButtonList2.ClearSelection()
RadioButtonList2.Items(0).Selected = True '預設選項
End Sub
150
6.6.4 RadioButtonList選項按鈕
（單選）清單控制項
– 範例說明：
• (1)第7~13行：與範例6-10相同，只不過控制項改為
RadioButtonList1。
• (2)第15~30行：其中第15~26行與範例6-10相同，只不過控制項改
為RadioButtonList1。第27~29行則是判斷是否為VIP會員。
• (3)第32~37行：ClearSelection方法可以進行清除選取狀態，所有
清單內的選項都會被設定為不選。因此，第36行必須再將預選項
目選上。
– Step8：執行程式。
• 【程式執行結果】：與範例6-12相同。
151
6.6.5
ListBox控制項
• ListBox控制項可以用來製作一連串的選項，使用者可以在清單中選擇所
需要的選項，稱之為『清單方塊』。同時ListBox控制項也允許設定為
「單選」或「複選」。
• 事實上，ListBox類別也是繼承自ListControl類別，它並沒有新增的事件，
表6-11(b)(c)(d)的屬性、方法、事件都可以使用。
• 而其中ListControl.Items屬性則為ListItemCollection集合，因此選項也是
以ListItem方式出現，並且構成一個集合。
• ListBox控制項的相關資訊如下：
– 類別： System.Web.UI.WebControls.ListBox類別
– 功能：產生單一或多重項目的清單方塊控制項。
– ListBox控制項外觀如右。
152
6.6.5
ListBox控制項
– 重要的繼承類別：
• 本類別繼承自System.Web.UI.WebControls.ListControl類別
– 其他重要的類別：
• ListControl.Items屬性的型別則為ListItemCollection類別。
– 輸出的標籤：
• 包含<select>與<option>標籤，其中<option>標籤是用來表示每一
個選項。
• <select size="顯示列數"><option value="值">文字
</option>…</select>
– 類別重要的新增成員：
153
6.6.5
ListBox控制項
– 使用範例：見範例6-14。
154
6.6.6
DropDownList控制項
• DropDownList控制項可以用來製作下拉式清單，使用者可以按下拉鈕，
在清單中選擇所需要的單一選項，故稱之為『下拉式清單』。
• 事實上，DropDownList類別也是繼承自ListControl類別，它並沒有新增的
事件，表6-11(b)(c)(d)的屬性、方法、事件都可以使用。
• 而其中ListControl.Items屬性則為ListItemCollection集合，因此選項也是
以ListItem方式出現，並且構成一個集合。
• DropDownList控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.DropDownList類別
– 功能：產生單一選擇的下拉式清單控制項。
– DropDownList控制項外觀如右。
155
6.6.6
DropDownList控制項
– 重要的繼承類別：
• 本類別繼承自System.Web.UI.WebControls.ListControl類別
– 其他重要的類別：
• ListControl.Items屬性的型別則為ListItemCollection類別。
– 輸出的標籤：
• 包含<select>與<option>標籤，其中<option>標籤是用來表示每一
個選項。
• <select><option value=“值”>文字</option>…</select>，
– 其中<select>不設定size屬性（預設值為1），就能夠出現『下
拉式清單』。
156
6.6.6
DropDownList控制項
– 類別重要的新增成員：
157
6.6.6
DropDownList控制項
– 使用範例：見範例6-14。
• 【範例6-14】
– 『下拉式清單』與『清單方塊』的練習，在介面設計時，設定複選的
清單方塊內容，並透過程式自動將下拉式清單設定與為清單方塊具有
相同的內容，然後多加一個選項（動態新增項目）。
• 範例6-14：
– 網站目錄 ASPNET\ch06\ch06_14\（檔案ch06_14.aspx）
158
6.6.6
DropDownList控制項
– Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性
（其餘屬性參照屬性窗格）。
159
6.6.6
DropDownList控制項
– Step2：編輯ListBox1控制項的Items，共五個項目(ListItem)。如圖：
160
6.6.6
DropDownList控制項
– Step3：設定DropDownList1控制項的AutoPostBack屬性為True，但
不編輯其項目內容。
– Step4：撰寫四個事件程序如下：（在兩個按鈕上按兩下，在
DropDownList1控制項上按兩下產生）
• 程式部分內容：
161
6.6.6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
DropDownList控制項
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
If Page.IsPostBack = True Then
Return
'若非第一次讀取網頁,則不作事
End If
'第一次讀取網頁才作下列事項
For i = 0 To ListBox1.Items.Count - 1
'加入項目
DropDownList1.Items.Add(ListBox1.Items(i))
Next
Dim it As New ListItem()
it.Text = "全部購買"
it.Value = "All"
it.Selected = False
it.Enabled = True
DropDownList1.Items.Add(it)
it = Nothing
End Sub
'加入最後一項
162
6.6.6
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
DropDownList控制項
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object,
e As System.EventArgs)
If DropDownList1.Items(5).Selected = True Then
Label3.Text = "全部購買免費延長保固1年"
Else
Label3.Text = ""
End If
End Sub
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
Label1.Text = "您所購買的產品為<br />"
For i = 0 To DropDownList1.Items.Count - 1
If DropDownList1.Items(i).Selected = True Then
Label1.Text &= DropDownList1.Items(i).Text & "<br />"
End If
Next
End Sub
163
6.6.6
43
44
45
46
47
48
49
50
DropDownList控制項
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Label1.Text = "您所購買的產品為<br />"
For i = 0 To ListBox1.Items.Count - 1
If ListBox1.Items(i).Selected = True Then
Label1.Text &= ListBox1.Items(i).Text & "<br />"
End If
Next
End Sub
– 範例說明：
• (1)第7~24行：由於每次網頁被讀取時都會執行Page_Load，而我
們想要作的事只有在第一次網頁被讀取時才需要，故在第8~10行，
利用Page.IsPostBack屬性判斷是否為第一次讀取網頁（其餘都屬
於PostBack）。
164
6.6.6
DropDownList控制項
• (2)第13~15行：以迴圈方式，將ListBox1.Items中的每一個
ListItem加入到DropDownList1.Items中。
• (3)第17~23行：動態新增一個DropDownList1.Items中的ListItem。
• (4)第26~32行：由於已經設定AutoPostBack，故會在下拉式清單
的選擇項目改變時，自動執行，若選到最後一個項目，則於
Label3顯示相關訊息。
• (5)第34~41行：按下Button2按鈕後執行，取出於DropDownList1
選取的項目並於Label1顯示訂購的項目。
• (6)第43~50行：按下Button1按鈕後執行，取出於ListBox1選取的
項目並於Label1顯示訂購的項目（可能不只一樣）。
165
6.6.6
DropDownList控制項
– Step5：執行程式。
166
167
6.7 多控制項的管理
• 當網頁上的控制項越來越多時，常常必須對控制項進行控管，
例如控制項的順序，是否顯示控制項等等。在本節中，我們
將示範如何管理多控制項。
• 6.7.1
控制項順序與快速切換
– 建立Web Form網頁時，會自動產生一個<form>標籤，事實上，它也
是一個控制項。只不過，它不是Web伺服器控制項，而是HTML伺服
器控制項，預設名稱為form1。由於設計Web Form網頁時所有的控制
項都是放入其中，故我們可以藉由form1控制項進行一些預設的設定。
– 使用滑鼠操作網頁並不需要進行特別的設定，可自行利用滑鼠的游標
改變目前的焦點(Focus)，或者按下某一個滑鼠按鈕。
168
6.7.1
控制項順序與快速切換
• 但有時候，為了方便使用者操作，我們也會考慮下列幾項鍵盤操作：
– 1.快速鍵（AccessKey屬性）：
• 可使用控制項的AccessKey屬性設定該控制項的對應快速鍵。
– 2.預設焦點（form1.DefaultFocus屬性）：
• 網頁的預設焦點代表的是XHTML被傳送到客戶端解讀為網頁型式後，預
設可輸入文字的第一個元件是哪一個。
• 例如假設我們有一個帳號與一個密碼欄位，當密碼輸入錯誤時，希望使用
者修改密碼（帳號欄位並未清除），此時可以將回傳時的預設焦點設定在
密碼欄位。
• 而要設定預設焦點，則只要設定form1控制項的DefaultFocus屬性即可。
– 【註】 form1控制項的DefaultFocus屬性將會在輸出時，產生一段
JavaScript程式碼，並於網頁被瀏覽器解讀後立即執行，其中將包含
執行一個WebForm_AutoFocus函式。
169
6.7.1
控制項順序與快速切換
– 3.預設按鈕（form1.DefaultButton屬性）：
• 表單中可能包含不只一個按鈕，若超過一個按鈕時，按下【Enter】
鍵代表的按鈕稱之為「預設按鈕」。而要設定預設按鈕，則只要
設定form1控制項的DefaultButton屬性即可。
– 【註】form1控制項的DefaultButton屬性將會在輸出時，設定
<form1>的onkeypress屬性，並執行一個JavaScript程式碼來
完成預設按鈕的作用。
170
6.7.1
控制項順序與快速切換
– 4.【Tab】鍵順序（TabIndex屬性）：
• 若網頁中包含多個控制項，則按下【Tab】鍵可以切換到不同控制
項進行操作，但其順序則可能因為當初加入控制項時的順序而導
致不同的結果，尤其是使用絕對位置配置控制項時更難預測控制
項輸出在HTML原始碼中的順序。
• 不過我們也可以設定每一個控制項的TabIndex屬性來進行元件順
序的控制，該屬性的預設值為0，只要依照數字加以遞增就可以完
成設定。
• 【範例6-15】
– 在表單中加入兩個文字方塊、一個單選清單控制項、兩個按鈕，其預
設焦點第一次放在帳號文字方塊，其餘則放置於密碼文字方塊，預設
按鈕設為【登入】鈕，並設定各控制項的【Tab】鍵順序。
171
6.7.1
控制項順序與快速切換
• 範例6-15：
– 網站目錄 ASPNET\ch06\ch06_15\（檔案ch06_15.aspx）
– Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性
（其餘屬性參照屬性窗格）。
172
6.7.1
控制項順序與快速切換
173
6.7.1
控制項順序與快速切換
– Step2：撰寫兩個事件程序如下：（在兩個按鈕上按兩下產生）
•Protected
程式部分內容：
7
Sub Button1_Click(sender As Object, e As System.EventArgs)
8
9
10
11
12
13
14
15
16
17
18
19
20
21
If TextBox2.Text = "gogo" Then
Label1.Text = TextBox1.Text & ",歡迎光臨<br />"
If RadioButtonList1.Items(1).Selected = True Then
Label1.Text &= "今日VIP會員有特殊優惠"
End If
Else
Label1.Text = "密碼錯誤"
TextBox2.Text = ""
If TextBox1.Text <> "" Then
form1.DefaultFocus = "TextBox2"
End If
End If
End Sub
174
6.7.1
22
23
24
25
26
27
控制項順序與快速切換
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
Label1.Text = ""
TextBox1.Text = ""
TextBox2.Text = ""
RadioButtonList1.Items(0).Selected = True
End Sub
– 範例說明：
• (1)第7~20行：我們假設密碼為「gogo」字串才是正確的密碼，此
時執行第9~12行。若密碼不正確，且帳號欄位TextBox1已經輸入
文字，則設定預設焦點在TextBox2密碼欄位。
• (2)第22~27行：按下【清除】鈕時執行的程序。
– Step3：執行程式。
175
176
177
178
6.7.2
容器與Panel面板控制項
• 容器(Container)是一種特殊的控制項特性，一個控制項若具有容器特性，
代表它可以包含其他許多控制項，判別方式很簡單，只要控制項具有
Controls屬性，就可以透過Controls.Add(子控制項)方式加入其他子控制
項。
– 舉例來說，Panel面板控制項就具有容器特性，其他如PlaceHolder與View等
控制項也具有容器性質。而面板中也可以包含內部面板，進行巢狀化管理。
• Panel面板控制項將會在輸出時成為<div>標籤，並且可以統一管理其內的
控制項之外觀。
• Panel面板也可以設定本身的外觀與捲軸，甚至可隱藏面板（隱藏時沒有
對應的HTML標籤輸出），這些動作將會同時影響到其內的控制項。
• Panel面板控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.Panel類別
功能：產生一個面板以統一其內的控制項外觀。
輸出的標籤： <div>…其內控制項所產生之標籤…</div>。
類別重要的新增成員：
179
6.7.2
容器與Panel面板控制項
180
6.7.2
容器與Panel面板控制項
– 使用範例：範例6-16。
• 【範例6-16】
– 設計一個多重選單，即時將使用者想要選擇的次選單顯示出來。
• 範例6-16：
– 網站目錄 ASPNET\ch06\ch06_16\（檔案ch06_16.aspx）
– Step1：先將網頁介面設計如下（所有控制項皆採相對定位）並設定
屬性（其餘屬性參照屬性窗格）。
181
6.7.2
容器與Panel面板控制項
182
6.7.2
容器與Panel面板控制項
– Step2：拖曳Panel控制項到中央空白處。
183
6.7.2
容器與Panel面板控制項
– Step3：此時會出現Panel1控制項，將之調整長寬為適當長寬，如下
圖。
184
6.7.2
容器與Panel面板控制項
– Step4：將RadioButtonList1控制項拖曳至Panel1控制項內部，如下圖。
185
6.7.2
容器與Panel面板控制項
– Step5：使用同樣方式
（Step2~4），加入另外兩個
Panel2、Panel3控制項，並將
RadioButtonList2、
RadioButtonList3控制項分別拖曳
至Panel內部，結果如右圖。
– Step6：於屬性窗格中設定Panel1、
Panel2、Panel3控制項的
BackColor（背景顏色）為Yellow、
Pink、Cyan，以便於調整位置。
186
6.7.2
容器與Panel面板控制項
– Step7：透過【格式／位置】指令，將所有控制項都設定為絕對位置。
然後調整到下圖位置。（其中，Panel2、Panel3控制項重疊置放）
187
6.7.2
容器與Panel面板控制項
– 【重疊置放技巧】
• 在上圖中，想要將Panel2與Panel3控制項重疊置放，光靠拖曳並
不容易達成，此時可以善用屬性窗格來完成
• 例如您可以將Panel2大小、位置定位後，然後切換到原始碼分頁
中，觀察Panel2的標籤<asp:Panel ID="Panle2">的屬性，然後將
Height、top、left、Width等屬性記錄起來，抄寫到<asp:Panel
ID="Panle3">的屬性欄位中即可。
188
6.7.2
容器與Panel面板控制項
– Step8：於屬性窗格中設定Panel1、Panel2、Panel3控制項的
GroupingText屬性值為「職位」、「選手」、「選手」。接著您會發
現面板出現了框線，若框線與面板區域大小差別過大，則進行調整面
板的大小，結果如下圖。
– Step9：於屬性窗格中設定Panel3控制項的.Visible屬性值為False。
189
6.7.2
容器與Panel面板控制項
– Step10：撰寫三個事件程序如下：（在兩個按鈕上按兩下，在
RadioButtonList1控制項上按兩下產生）
• 程式部分內容：
7
8
9
10
11
12
13
14
15
16
Protected Sub RadioButtonList1_SelectedIndexChanged(sender As Object,
e As System.EventArgs)
If RadioButtonList1.SelectedIndex = 0 Then '決定哪一個面板要顯示
Panel2.Visible = True
Panel3.Visible = False
Else
Panel2.Visible = False
Panel3.Visible = True
End If
End Sub
190
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Dim person As String
Label1.Text = ""
If Panel2.Visible = True Then
person = RadioButtonList2.Items(RadioButtonList2.SelectedIndex).Text
Else
person = RadioButtonList3.Items(RadioButtonList3.SelectedIndex).Text
End If
Label1.Text &= person & "得一票"
End Sub
Protected Sub Button2_Click(sender As Object, e As System.EventArgs)
Panel1.Visible = True
Panel2.Visible = True
Panel3.Visible = False
RadioButtonList1.ClearSelection()
'清除被選取項目
RadioButtonList1.Items(0).Selected = True '設定為預選
RadioButtonList2.ClearSelection()
RadioButtonList2.Items(0).Selected = True
RadioButtonList3.ClearSelection()
RadioButtonList3.Items(0).Selected = True
Label1.Text = ""
End Sub
191
6.7.2
容器與Panel面板控制項
– 範例說明：
• (1)第7~15行：由於已經設定AutoPostBack，故按下
RadioButtonList1的選項就會自動執行，依照選取項目決定右方要
顯示哪一個面板。
• (2)第17~26行：依照顯示面板（Visible屬性），決定被選取的對
象為哪一位選手。
• (3)第28~39行：回歸初始化狀態。
– Step11：執行程式。
192
193
6.7.2
容器與Panel面板控制項
194
6.8 本章回顧
• 在本章中，我們首先介紹了控制項的分類，其中Web伺服器控制項的基底
類別是System.Web.UI.WebControls.WebControl，當中規範了許多屬性，
這些屬性大多為各種Web伺服器控制項可使用的屬性（除非在繼承之後覆
寫為不可使用）。
– 而ASP.NET使用物件導向的繼承特色開發各種控制項，因此，有些類別在控
制項的使用方面是非常重要的，例如ListControl類別對於清單性質的控制項非
常重要。
• 在本章中，我們介紹的控制項包含文字輸出入控制項、隱藏控制項、選擇
控制項、傳送控制項、面板控制項等等。
– 其中具有清單性質的控制項通常都是利用集合來存放其中的項目。
– 而面板控制項更能有效地統一管理眾多控制項。
195
6.9 本章回顧
• 有些控制項具有特別的事件，要使得事件發生時就立即產生反應，應該要
設定該控制項的AutoPostBack屬性（除了按鈕性質的控制項之外），否
則我們並不建議撰寫事件處理程序，以免伺服器端必須執行按鈕的事件又
必須執行該控制項的事件（如此容易因為執行順序的預估錯誤，而導致程
式結果不如預期）。
• 當網頁包含了許多控制項時，為了方便使用者操作，您可以利用
AccessKey屬性設定快速鍵，或利用DefaultFocus及DefaultButton屬性設
定預設焦點及預設按鈕。
• 並且每一個控制項的TabIndex屬性，也將對應到輸出時控制項的【Tab】
鍵切換順序。
196
本章習題
197