Transcript 第7章伺服器控制項（二）

第七章
伺服器控制項（二）
在本章中，我們將介紹工具箱／標準頁籤中較為複雜的的控制項，
包含Table、Calendar、AdRotator、ImageMap、Wizard、
MultiView與View控制項等等。
這些複雜控制項在實現上較為複雜，但在使用上則不一定複雜，
這都要歸功於ASP.NET的強大功能（若您使用PHP+JavaScript要
完成相同功能，通常必須撰寫非常多的程式）。
同時我們也會在適當時機補充介紹Image、HyperLink兩種控制項。
以及介紹如何動態新增控制項，並為這些控制項註冊事件程序。
1
第七章 伺服器控制項（二）
• 繼上一章介紹的控制項之後，相信讀者已經對控制項相關的
操作非常熟悉，例如編輯清單的項目、設定色彩、設定XML
資料來源等等。也對於AutoPostBack與容器的原理有相當程
度的理解。
• 在本章中，我們將繼續介紹工具箱／標準頁籤的其他Web伺
服器控制項。
2
大綱
• 7.1 Table表格控制項
• 7.2 圖片相關控制項
• 7.5 分頁控制項
– 7.5.1 MultiView控制項
– 7.5.2 View控制項
– 7.5.3 製作Tab分頁
– 7.2.1 Image圖片控制項
– 7.2.2 AdRotator橫幅廣告控制項
• 7.6 為動態產生的控制項註冊事
件程序
• 7.7 本章回顧
• 7.3 Calendar月曆控制項
• 7.4 導向控制項
– 7.4.1 HyperLink超鏈結控制項
– 7.4.2 ImageMap圖片多方鏈結控制項
– 7.4.3 Wizard精靈引導控制項
3
7.1 Table表格控制項
• 表格在網頁設計中扮演非常重要的角色，它除了可以作為實
體表格，也可以當作編排使用的無框線表格。
• 在Web伺服器控制項中，Table控制項可以製作表格，對應的
類別是Table類別。
– 表格是由列所組成，而表格中所有的列由Rows屬性來代表，它是一個
集合，對應的類別是TableRowCollection類別，而集合中的每一個項
目（每一列）則為TableRow類別的物件。
– 列又是由儲存格組成，而列中所有的儲存格由Cells屬性來代表，它是
一個集合，對應的類別是TableCellCollection類別，而集合中的每一
個項目（每一個儲存格）則為TableCell類別的物件。
– 若在程式中想要產生表格，則必須反向來製作，也就是先製作Cell，
放入Row的Cells集合中，然後再將Row加入Table的Rows集合中。
4
7.1 Table表格控制項
• Table控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.Table類別
– 功能：可產生表格。
– 輸出的標籤：<table><tr><td>。若設定Caption 屬性，則有
<caption>標籤。
– 類別重要的新增成員：
5
– 【Rows屬性說明】
• Rows屬性的回傳值是一個TableRowCollection集合，它的每一個
元素都是一個TableRow物件，並且可以透過多種方法進行加入、
移除元素，或者尋找特定元素等操作。
6
7.1 Table表格控制項
– TableRowCollection類別(Table.Rows屬性的型別)重要的成員：
7
7.1 Table表格控制項
– TableRow類別(TableRowCollection集合項目的型別)重要的成員：
– 【Cells屬性說明】
• Cells屬性的回傳值是一個TableCellCollection集合，它的每一個元
素都是一個TableCell物件，並且可以透過多種方法進行加入、移
除元素，或者尋找特定元素等操作。
8
7.1 Table表格控制項
– TableCellCollection類別(TableRow.Cells屬性的型別)重要的成員：
9
7.1 Table表格控制項
– TableCell類別(TableCellCollection集合項目的型別)重要的成員：
10
7.1 Table表格控制項
– 【註】
• TableCell具有容器性質，可以透過Controls.Add()加入子項目於儲
存格中，詳見範例7-2。
– 使用範例：見範例7-1。
• 【範例7-1】
– 使用Table控制項製作表格，並動態修改表格內容。
• 範例7-1：
– 網站目錄 ASPNET\ch07\ch07_01\（檔案ch07_01.aspx）
11
7.1 Table表格控制項
– Step1：先在網頁介面中產生一個Button1控制項，設定為絕對配置，
按鈕文字修改為「增加一列」，然後在工具箱中拖曳「Table控制項」
至網頁上方。
12
7.1 Table表格控制項
– Step2：此時會出現Table1控制項，將之稍微拉大，然後於屬性窗格
中，按下Rows屬性值旁的按鈕。
13
7.1 Table表格控制項
– Step3：此時會出現TableRow集合編輯器，它與上一章介紹的
ListItem集合編輯器的使用方式類似，請自行建立兩個TableRow。第
一列的HorizontalAlign屬性設定為Left，第二列將的HorizontalAlign屬
性設定為Right。
14
7.1 Table表格控制項
15
7.1 Table表格控制項
– Step4：切回TableRow集合編輯器的第0個項目，點選Cells屬性值旁
的按鈕。
16
7.1 Table表格控制項
– Step5：此時會出現TableCell集合編輯器，它與TableRow集合編輯器
使用方式類似，請自行建立三個TableCell項目。Text屬性分別設定為
「專科」、「大學」、「研究所」。
17
7.1 Table表格控制項
– Step6：仿照Step4、5，編輯TableRow集合第1個項目的Cells屬性，
同樣加入三個TableCell項目如下。
18
7.1 Table表格控制項
– Step7：編輯完畢後，回到介面設計時，您會發現Table1控制項內容
已經出現，也就是剛才所設定的集合以及集合中的集合。稍微拉大
Table1控制項，使資料能夠充分呈現。然後設定Table1控制項
GridLines屬性為Both，使之出現格線。
19
7.1 Table表格控制項
– Step8：撰寫Button1_Click事件程序如下：
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Dim newRowStr() As String = {"電子科", "資工系", "資科系"}
Dim newRow As New TableRow()
'宣告一個newRow物件用以代表新的一列
For Each s As String In newRowStr
Dim newCell As New TableCell()
'宣告newCell物件
newCell.Text = s
newRow.Cells.Add(newCell) '將新的Cell加入到新列的Cells集合中
Next
newRow.HorizontalAlign = HorizontalAlign.Center '新列內容置中對齊
Table1.Rows.AddAt(1, newRow)
'插入新列
Table1.Rows(0).Font.Bold = True
Button1.Visible = False
End Sub
'第0列設為粗體
20
7.1 Table表格控制項
– 範例說明：
• (1)第10~16行：這是製作一個新列，其中第11~15行是製作新列的
每一個儲存格，並將儲存格加入到Cells集合中。
• (2)第17行是將新列插入到表格中，事實上也就是在Rows中插入一
個新的項目。
• (3)第19行，我們仍可以對表格內容進行相關設定。若要設定表格
第0列的內容為粗體，則應該針對Rows(0)進行設定。
– Step9：執行程式。
21
7.1 Table表格控制項
22
7.2 圖片相關控制項
• Web 伺服器控制項中與圖片有關的控制項，除了上一章介紹
的ImageButton圖片按鈕之外，還有Image 圖片控制項與
AdRotator 橫幅廣告控制項。
• 7.2.1
Image圖片控制項
• Image 圖片控制項是比較單純的控制項。可以用來加入圖片
到網頁中。
• Image 控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.Image類別
– 功能：可加入圖片。
– 輸出的標籤：<img />。
23
7.2.1
Image圖片控制項
– 類別重要的新增成員：
24
7.2.1
Image圖片控制項
– 使用範例：見範例7-2。
• 【範例7-2】
– 動態產生圖片控制項，並加入到Table控制項中。
• 學習重點：
– 1. 動態產生控制項（本範例為動態產生Image控制項物件）
– 2. 在具有容器性質的控制項（本範例為TableCell控制項物件）中加入
控制項
– 範例7-2：
– 網站目錄 ASPNET\ch07\ch07_02\（檔案ch07_02.aspx）
25
7.2.1
Image圖片控制項
– Step1：仿造範例7-1，建立一個Table控制項，包含2列×3儲存格，但
儲存格內容皆為空。另外配置三個控制項，除表格外，皆採用絕對定
址，結果如圖。
– Step2：撰寫事件程序如下：
• 程式部分內容：
26
7.2.1
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Image圖片控制項
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
For i = 0 To Table1.Rows.Count - 1
For j = 0 To Table1.Rows(i).Cells.Count - 1
Dim newPic As New Image()
newPic.ImageUrl = TextBox1.Text
'設定圖片來源
newPic.Height = 80 : newPic.Width = 80 '設定圖片長寬
newPic.AlternateText = "您指定的圖片"
'設定圖片說明文字
Table1.Rows(i).Cells(j).Controls.Add(newPic) '將圖片加入到Cell
Next
Next
End Sub
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
TextBox1.Text = "http://www.drmaster.com.tw/image/logo.gif"
End Sub
27
7.2.1
Image圖片控制項
– 範例說明：
• (1)第8~16行：利用雙層迴圈，在每一個儲存格中加入圖片控制項。
因有六個儲存格，故迴圈一共會執行6次。請注意，迴圈執行時，
每次執行第10行，newPic都會參考到新產生的Image物件實體。
• (2)第10~13行：動態產生控制項，控制項也是一個物件，因此可
以使用New產生實體，並且透過屬性來設定相關資訊。
• (3)第14行：動態產生的控制項必須加入到某個具有容器性質的控
制項中，才會在輸出時，於網頁中產生效果，而TableCell具有容
器性質，故可以透過Controls.Add(newPic)方式加入子控制項。
• (4)事實上，由於Page也是一個容器，故您可以在第17行加入
Page.Controls.Add(New Image)敘述，在執行結果中，就會發現
表格外也有一個圖片控制項。
– Step3：執行程式。
28
29
7.2.2 AdRotator橫幅廣告控制項
• 橫幅廣告是網頁常見的一種新型態廣告手法，在ASP.NET中，我們可以
透過AdRotator控制項來動態更替網頁中的各種橫幅廣告，使得每一個使
用者每一次瀏覽同一網頁時，隨機出現不同的橫幅廣告以增加廣告效力。
• AdRotator控制項使用資料來源方式設定相關資訊，而資料來源可以是
XML檔案或資料庫
– 因此若廣告橫幅的圖片來源位址、目標網頁位址改變了，我們並不需要改變
網頁內容的程式碼，只需要在資料來源處修改即可
– 這使得我們在發展常需要變換橫幅廣告內容的網頁時，得以節省開發程式的
時間並利於維護。
30
7.2.2 AdRotator橫幅廣告控制項
• AdRotator控制項資料來源XML的規定標籤
– 當使用的資料來源為XML時，它必須包含某些XML標籤，以便
ASP.NET取得相關資訊製作橫幅廣告，典型的XML內容如下：
<Advertisements >
<Ad>
<ImageUrl>圖片來源（圖檔網址）</ImageUrl>
<NavigateUrl>連結的目標網址</NavigateUrl>
<AlternateText>圖片說明文字</AlternateText>
<Keyword>分類關鍵字</Keyword>
<Impressions>權重值（數值）</Impressions>
<Height>廣告高度</Height>
<Width>廣告寬度</Width >
</Ad>
<Ad> ………</Ad>
<Ad> ………</Ad>
<Ad> ………</Ad>
</Advertisements >
31
7.2.2 AdRotator橫幅廣告控制項
• 【說明】
–
–
–
–
–
–
(1)根標籤應該是<Advertisements >。
(2)每一個廣告都必須使用一個<Ad>標籤來對應。
(3)<ImageUrl>是記錄該廣告的圖片來源。
(4)<NavigateUrl>是記錄該廣告被按下時，要連到哪一個網址。
(5)<AlternateText>是記錄當圖片不在圖片來源時要顯示的文字。
(6)<Keyword>是記錄關於該廣告的分類關鍵字，它可以使得當利用
AdRotator控制項KeywordFilter屬性進行廣告篩選時有所依據。
– (7)<Impressions>是記錄該廣告的權重，ASP.NET會計算所有廣告的
權重比值，決定廣告出現的機率。
• 例如有兩個橫幅廣告，第一個的權重值為2，第二個的權重值為3，
則顯示機率分別為2/(2+3)=40%、3/(2+3)=60%。
32
7.2.2 AdRotator橫幅廣告控制項
– (8)<Height>與<Width>：以像素為單位，設定該廣告高度與寬度。
– (9)以上標籤不需使用時則不必設定，例如不將廣告分類，則不必設定
<Keyword>。
– (10) 以上標籤名稱大小寫必須正確。
• AdRotator控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.AdRotator類別
– 功能：輸出橫幅廣告。
– 輸出的標籤：<a ><img /></a>。
33
7.2.2 AdRotator橫幅廣告控制項
– 類別重要的新增成員：
34
7.2.2 AdRotator橫幅廣告控制項
35
7.2.2 AdRotator橫幅廣告控制項
– 【註】
• 由於廣告可能會執行惡意指令碼，因此應該只接受可信任的廣告來源。而
為了防止未經授權的網際網路存取（為了保護廣告檔），微軟建議了一些
保護措施，方法之一是將廣告檔儲存在App_Data 子目錄中，並將此子目
錄設定為拒絕網際網路存取任何類型的檔案，或者，您也可以將副檔名替
換為非xml。
– 使用範例：見範例7-3。
• 【範例7-3】
– 使用XML檔案作為資料來源，製作橫幅廣告。
• 範例7-3：
– 網站目錄 ASPNET\ch07\ch07_03\（檔案ch07_03.aspx）
– Step0：預先準備好兩個圖檔，放置於\ch07\ch07_03\中，預先準備好一個
XML檔案，檔名為MyAdRotator.xml，放置於子目錄
\ch07\ch07_03\App_Data\中，其內容如下：
36
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements >
<Ad>
<ImageUrl>books.gif</ImageUrl>
<NavigateUrl>http://www.drmaster.com.tw/</NavigateUrl>
<AlternateText>初學指引系列</AlternateText>
<Impressions>5</Impressions>
<Height>150</Height>
<Width>400</Width >
</Ad>
<Ad>
<ImageUrl>time2.jpg</ImageUrl>
<NavigateUrl>http://www.timetime.com.tw/</NavigateUrl>
<AlternateText>Time研究室</AlternateText>
<Impressions>2</Impressions>
<Height>150</Height>
<Width>400</Width >
</Ad>
<Ad>
<ImageUrl>none.gif</ImageUrl>
<NavigateUrl>http://www.nctu.edu.tw/</NavigateUrl>
<AlternateText>交通大學</AlternateText>
<Impressions>3</Impressions>
<Height>150</Height>
<Width>400</Width >
</Ad>
37
</Advertisements >
7.2.2 AdRotator橫幅廣告控制項
– Step1：在網頁介面中換行後，配置一個Label1標籤，修改Text屬性。
然後在工具箱中拖曳「AdRotator控制項」到網頁中。
– Step2：出現AdRotator1控制項，點選旁邊的方向鈕，執行<新資料來
源>。
38
7.2.2 AdRotator橫幅廣告控制項
– Step3：參考範例6-11的Step3，選取MyAdRotator.xml作為資料來源
的XML檔，完成後會出現一個XmlDataSource1物件，如下圖。
– Step4：設定AdRotator1控制項的Target屬性值為「_blank」，代表鏈
結目標是開啟新視窗。
– Step5：執行程式。
39
40
7.2.2 AdRotator橫幅廣告控制項
41
7.3 Calendar月曆控制項
• Calendar控制項可以在網頁中製造一個月曆，並且可以在使用者按下某個
日期時，進行某些特定的回應。以往要在網頁中出現一個月曆，必須花費
許多功夫撰寫客戶端的JavaScript程式碼並且需要使用表格進行日期的對
齊，隨著越來越多的公司網頁中，需要使用月曆來表示每日活動，因此
ASP.NET也將之納入為控制項，讓程式設計師減少了許多的麻煩。
• Calendar控制項的相關資訊如下：
– 類別：System.Web.UI.WebControls.Calendar類別
– 功能：建立一個月曆。
– 輸出的標籤：以巢狀<table><tr><td>表格編排，包含<a>標籤建立鏈結外觀。
包含JavaScript進行PostBack。
– 類別重要的新增成員：
42
43
44
7.3 Calendar月曆控制項
• 【選取類之屬性說明】
– 大部分程式運作的依據都是來自選取類的屬性，例如您想要取得使用者選取
了哪一天，則可以讀取SelectedDate屬性值。
• 【事件說明】
– 主要將使用者動作分為兩大類
• (1)按下某一日期（也就是選取某一日時，也包含選取整周或整月）。
• (2)按下上方的往上或往下月巡覽。可針對這兩種事件分別進行不同的處
理。
45
7.3 Calendar月曆控制項
• 【範例7-4】
– 建立一個月曆，允許使用者選取某一日或某一周，並對照該選取日是否有特
殊活動決定顯示結果。（上下月份中，也各記錄一日活動）若活動已過當日，
則顯示活動已舉行完畢。
• 範例7-4：
– 網站目錄 ASPNET\ch07\ch07_04\（檔案ch07_04.aspx）
– Step1：配置兩個Label控制項，並將Text屬性設為空字串，然後在工具箱中
拖曳Calendar控制項至網頁上方。
46
7.3 Calendar月曆控制項
– Step2：此時會出現Calendar1控制項，然後於屬性窗格中，設定
SelectionMode 屬性為DayWeek，結果如下圖。
47
7.3 Calendar月曆控制項
– Step3：撰寫<script>內的程式碼如下（產生事件程序請在Calendar1
控制項上按兩下）：
• 程式部分內容：
7
8
9
10
11
12
13
14
15
Dim actDate() As Date = {DateTime.Parse("2011
DateTime.Parse("2011
DateTime.Parse("2011
DateTime.Parse("2011
DateTime.Parse("2011
/
/
/
/
/
5
6
6
6
7
/
/
/
/
/
28"), _
3"), _
4"), _
30"), _
15")}
Dim act() As String = {"端午划龍舟預賽", "禁煙活動", "划龍舟總決賽", _
"年中大特賣", "夏季大特賣"}
48
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Protected Sub Calendar1_SelectionChanged(sender As Object, e As System.EventArgs)
Dim i As Integer
Dim str As New String("")
Label2.Text = "執行了Calendar1_SelectionChanged事件程序"
Label1.Text = "無活動"
For i = 0 To actDate.Count - 1
For Each d As Date In Calendar1.SelectedDates
If d = actDate(i) Then
str &= CStr(actDate(i)) & " " & act(i)
If d < Date.Today Then
str &= "(活動已結束)<br />"
Else
str &= "<br />"
End If
Exit For
'跳出內層迴圈
End If
Next
Next
If str <> "" Then Label1.Text = str
End Sub
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
Label2.Text = ""
49
End Sub
7.3 Calendar月曆控制項
– 範例說明：
• (1)第7~14行：記錄活動日期與對應的表示字串。
• (2)第16~36行：按下月曆中，任何一個呈現超鏈結底線的日期或
巡覽都會產生PostBack。（Calendar控制項不需要設定
AutoPostBack），但只有選取日期改變時，才會執行此事件程序，
您可以藉由Label2的輸出觀看是否執行了本事件程序。
• (3)第22~34行：包含兩層的迴圈，外層迴圈是依序將陣列日期與
選取日期進行比對。而內層迴圈則是因為可能選取整周，故選取
日期是一個SelectedDates集合，所以也需要一一比對。至於第
26~30行則是將選取日期與本日進行比對，筆者撰寫時日期恰好跨
越本日前後，故可測試，讀者可以修該第7~11行的日期後進行測
試。
• (4)執行時，可以選取單日或單周，也可以按下上月巡覽與下月巡
覽，選取其他月份的日期。
50
7.3 Calendar月曆控制項
– Step4：執行程式。
51
7.3 Calendar月曆控制項
52
7.4 導向控制項
• 在此之前介紹的控制項，大多是傳送資料的目標為網頁本身，
這是ASP.NET為了實現事件驅動而做的設計。故而大多數以
按鈕型式出現的控制項或AutoPostBack都採用此一策略。
• 若使用者想要將網頁移往它處，除了可以使用傳統HTML所構
成的HTML伺服器控制項之外，也可以利用HyperLink、
ImageMap控制項釋放網頁的主導權。
• 而本節也將介紹Wizard控制項，它是一個非常強勢的主導網
頁執行流程的控制項，一般可用於精靈引導網頁。
53
7.4.1
HyperLink超鏈結控制項
• HyperLink控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.HyperLink類別
功能：可產生超鏈結文字。
輸出的標籤：<a>...</a>或<a><Img /></a>。
類別重要的新增成員：
54
7.4.1
HyperLink超鏈結控制項
– 使用範例：見範例7-5。
55
7.4.2
控制項
ImageMap圖片多方鏈結
• ImageMap控制項可以製作圖片多方鏈結，藉由按下滑鼠時的座標決定要
鏈結的目標。它並不需要透過Image控制項設定圖片來源，因為它已經繼
承了Image類別，故仍有ImageUrl 屬性可以設定圖片來源。
• ImageMap控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.ImageMap類別
功能：可產生圖片多方鏈結。
輸出的標籤： img usemap="#地圖 " /><map ><area/></map>。
重要的繼承類別：
• 本類別繼承自System.Web.UI.WebControls.Image類別
– 類別重要的新增成員：
56
– 【HotSpots屬性說明】
• 由於ImageMap可製作多方超鏈結，故需要存放各區域的座標以及
目標網址，這些將會存放在一個HotSpotCollection物件中（這是
一個集合），並且成為ImageMap.HotSpots屬性的回傳值。
57
7.4.2
控制項
ImageMap圖片多方鏈結
– HotSpotCollection類別（ImageMap.HotSpots屬性之型別）重要的新
增成員如下：
58
7.4.2
控制項
ImageMap圖片多方鏈結
– HotSpot類別（ImageMap.HotSpots(i)屬性之型別）重要的新增成員如下：
59
7.4.2
控制項
ImageMap圖片多方鏈結
– 【HotSpot的衍生類別】
• HotSpot被三個類別所繼承，分別是CircleHotSpot、
PolygonHotSpot、RectangleHotSpot，因此，HotSpotCollection
集合的元素也可以是這三種類別的物件，其特殊屬性簡介如下：
60
7.4.2
控制項
ImageMap圖片多方鏈結
• 【範例7-5】
– 設計一個網頁，包含文字超鏈結以及圖片多方超鏈結。
• 圖片多方超鏈結包含四項：一個圓形，一個矩形，一個三角形，
一個PostBack的三角形。
• 範例7-5：
– 網站目錄 ASPNET\ch07\ch07_05\（檔案ch07_05.aspx）
– Step0：預先預備好一個taiwan.jpg，放置於\ch07\ch07_05\目錄下。
61
7.4.2
控制項
ImageMap圖片多方鏈結
– Step1：網頁介面設計如下（所有控制項皆採相對定位），包含一個
HyperLink控制項、一個ImageMap控制項、一個Label控制項（設為
空字串）。
– Step2：依照下列屬性表設定HyperLink1控制項與ImageMap1控制項
的屬性。
62
7.4.2
控制項
ImageMap圖片多方鏈結
– Step3：屬性設定完畢後，介面會呈現下圖模式，選取ImageMap1控
制項，按下屬性窗格的HotSpots集合旁的按鈕。
63
7.4.2
控制項
ImageMap圖片多方鏈結
– Step4：此時會出現HotSpot集合項目的編輯視窗，它允許加入
CircleHotSpot、PolygonHotSpot、RectangleHotSpot三種項目，可按
下【加入】鈕旁的箭頭進行選擇。
64
7.4.2
控制項
ImageMap圖片多方鏈結
– Step5：設定第一個項目，種類為CircleHotSpot，設定資料
（Radius,X,Y,NavigateUrl, Target,HotSpotMode等六個屬性）如下圖。
65
7.4.2
控制項
ImageMap圖片多方鏈結
– Step6：設定第二個項目，種類為PolygonHotSpot，設定資料
（Coordinates, PostBackValue,HotSpotMode等三個屬性）如下圖。
（由於是三角形，故Coordinates提供了六個數值）
66
7.4.2
控制項
ImageMap圖片多方鏈結
– Step7：設定第三個項目，種類為PolygonHotSpot，設定資料
（Coordinates,NavigateUrl, Target,HotSpotMode等四個屬性）如下
圖。（由於是三角形，故Coordinates提供了六個數值）
67
7.4.2
控制項
ImageMap圖片多方鏈結
– Step8：設定第四個項目，種類為RectangleHotSpot，設定資料
（Left,Right,Top,Bottom, NavigateUrl, Target,HotSpotMode等七個屬
性）如下圖。
68
7.4.2
控制項
ImageMap圖片多方鏈結
– Step9：撰寫ImageMap1_Click事件程序（按兩下ImageMap1控制項
產生）如下：
• 程式部分內容：
7
8
9
Protected Sub ImageMap1_Click(sender As Object,
e As System.Web.UI.WebControls.ImageMapEventArgs)
Label1.Text = "您選擇了PostBack,取得的值為" & e.PostBackValue
End Sub
– 範例說明：
• (1)事實上，只有按下圖片中交通大學的三角形區域才會進行
PostBack，正如Step6設定的PostBackValue，e.PostBackValue
將會取得「交通大學」字串。
• (2)執行時，不論您是按下文字超鏈結或非「交通大學區域」的圖
片多方超鏈結，都會開啟新視窗載入鏈結目標，因為Target都設定
為_blank。
69
7.4.2
控制項
ImageMap圖片多方鏈結
• (3)若要取得圖片內相關區域的座標有困難，可以藉助影像編輯軟
體來觀察。
• (4)下圖是當您按下交通大學的三角形區域的結果。
– Step10：執行程式。
70
7.4.3
Wizard精靈引導控制項
• 在某些場合中，我們需要使用精靈引導方式，Step By Step強勢主導使用
者的輸入，例如新會員註冊的流程就非常適用。ASP.NET為此特別規劃
了Wizard控制項可以輕鬆完成此項要求。
• Wizard控制項將所有步驟分類，稱為StepType，一共有開始(Start)、中
間(Step)、結束(Finish)、完成(Complete)等四種步驟，並且中間步驟可以
有多個。
– 在每一個步驟中，我們可以加入控制項收集使用者輸入的資料，Wizard控制
項會協助管理，直到Complete 步驟時，便可以存取所有資料。
• 使用Wizard控制項不但能夠強制主導使用者進行輸入，事實上，它也允許
使用者在步驟之間進行前後移動，若顯示提要欄位 (Sidebar)，使用者甚
至可以隨意跳至個別步驟。
71
7.4.3
Wizard精靈引導控制項
• Wizard控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.Wizard類別
功能：產生精靈引導式網頁。
輸出的標籤：<table>為對應的輸出標籤，使用無框線表格分配區域。
重要的繼承類別：
• Wizard繼承自System.Web.UI.WebControls.CompositeControl
– 其中Controls屬性可以取得子控制項的集合。
– 而FindControl方法則可以尋找特定的子控制項。
– 類別重要的新增成員：
72
7.4.3
Wizard精靈引導控制項
73
74
7.4.3
Wizard精靈引導控制項
• 【重要欄位說明】
– 每一個步驟頁面（除Complete步驟），可以區分為四大區域，分別是
頁首區域(Head)、容器區域(Step)、巡覽區域(Navigation)、提要欄位
區域(Sidebar)，而容器區域中，則可以加入該步驟所需要的控制項。
如下圖所示：
圖7-1 Wizard控制項每一個步驟的內容
75
7.4.3
Wizard精靈引導控制項
• 【按鈕說明】Wizard控制項的按鈕分為兩大類
– 一類是出現在左方提要欄位區域(Sidebar)內的按鈕，一般以超鏈結型式出現，
可提供使用者快速跳至某一步驟
– 另一類則是出現在巡覽區域(Navigation) 內的按鈕，此區域會出現的按鈕，又
依照該步驟的Step Type種類區分為下列幾項：
• CancelButton： 【取消】鈕（須設定DisplayCancelButton屬性才會出現）
• StartNextButton：：當Step Type=Start時的【下一頁】鈕。
• StepNextButton：當Step Type=Step時的【下一頁】鈕。
• StepPreviousButton：：當Step Type=Step時的【上一頁】鈕。
• FinishPreviousButton：當Step Type=Finish時的【上一頁】鈕。
• FinishCompleteButton：當Step Type=Finish時，右下角的【完成】鈕。
– 操作流程之按鈕，如下圖示意：
76
7.4.3
Wizard精靈引導控制項
圖7-2 Wizard控制項每一個步驟的各按鈕名稱
77
7.4.3
Wizard精靈引導控制項
– 使用範例：範例7-6。
• 【範例7-6】
– 設計一個網頁，使用精靈強勢引導使用者按照步驟輸入相關資訊。若輸入錯
誤，則回原步驟，使用者無法自行跳躍步驟，也無法回到上一步驟。
• 範例7-6：
– 網站目錄 ASPNET\ch07\ch07_06\（檔案ch07_06.aspx）
78
7.4.3
Wizard精靈引導控制項
– 步驟0：預先製作Exit.aspx，放置於\ch07\ch07_06\目錄內，檔案內容
請自行開啟參閱。
– 步驟1：設計網頁介面，拖曳「Wizard控制項」至網頁中，然後按下
右邊的箭頭，執行【新增／移除WizardSteps】。
79
7.4.3
Wizard精靈引導控制項
– 步驟2：設計網頁介面，
建立五個步驟項目。詳
細資訊如下表格（未標
示屬性者採預設值即
可）。
80
7.4.3
Wizard精靈引導控制項
– 步驟3：回到網頁介面後，於屬性窗格中，設定下列Wizard1控制項的
屬性。
81
7.4.3
Wizard精靈引導控制項
– 步驟4：設定完成後，Wizard1控制項會呈現下圖外觀，按下右邊的箭
頭，選擇【Step 1】。
82
7.4.3
Wizard精靈引導控制項
– 步驟5：現在可編輯「Step1」的內容，配置Label控制項到容器中
（絕對位置），修改文字，結果如下圖，然後按下右邊的箭頭，選擇
【Step 2】，準備編輯Step2的內容。
83
7.4.3
Wizard精靈引導控制項
– 步驟6：現在可編輯「Step2」
的內容，配置Label、TextBox
控制項到容器中（絕對位置），
修改文字、屬性，結果如下圖，
然後按下右邊的箭頭，選擇
【Step 3】，準備編輯「Step3」
的內容。
84
7.4.3
Wizard精靈引導控制項
– 步驟7：現在可編輯「Step3」的內容，配置Label、CheckBox控制項
到容器中（絕對位置），修改文字，結果如下圖，然後按下右邊的箭
頭，選擇【Step 4】，準備編輯「Step4」的內容。
85
7.4.3
Wizard精靈引導控制項
– 步驟8：現在可編輯「Step4」的內容，配置Label控制項到容器中
（絕對位置），修改文字，結果如下圖，然後按下右邊的箭頭，選擇
【Step 5】，準備編輯「Step5」的內容。
86
7.4.3
Wizard精靈引導控制項
– 步驟9：現在可編輯「Step5」的內容，由於被設定為Complete步驟，
故整頁都是容器，配置Label控制項到容器中，修改文字，結果如下圖。
– 步驟10：切換到原始碼分頁，編輯Wizard1_NextButtonClick事件程序
如下。
• 程式部分內容：
87
7.4.3
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Wizard精靈引導控制項
Protected Sub Wizard1_NextButtonClick(sender As Object,
e As System.Web.UI.WebControls.WizardNavigationEventArgs)
Select Case Wizard1.ActiveStepIndex
Case 1
Label_Step2_4.Text = ""
If TextBox_Step2_1.Text = "" Then
Label_Step2_4.Text = "請勿輸入空的帳號"
Wizard1.ActiveStepIndex = 0 '要補上下一行才有作用
Wizard1.ActiveStepIndex = 1
ElseIf TextBox_Step2_2.Text = "" Then
Label_Step2_4.Text &= "請勿輸入空的密碼"
Wizard1.ActiveStepIndex = 0
Wizard1.ActiveStepIndex = 1
ElseIf TextBox_Step2_3.Text <> TextBox_Step2_2.Text Then
Label_Step2_4.Text = "密碼錯誤,請重新輸入密碼"
Wizard1.ActiveStepIndex = 0
Wizard1.ActiveStepIndex = 1
Else
Label_Step3_1.Text = TextBox_Step2_1.Text + "您好"
End If
88
26
27
28
29
30
31
32
Case 2
If CheckBox_Step3_1.Checked = False Then
Wizard1.ActiveStepIndex = 1
Wizard1.ActiveStepIndex = 2
End If
End Select
End Sub
– 範例說明：
• (1)第7~32行：不論是按下哪一頁的【下一頁】鈕，都會執行此事
件程序。但我們依照Wizard1.ActiveStepIndex的值，決定要執行
哪些對應，只有該值為1或2時，才需要動作。請注意，在Step 1
頁面按【下一頁】鈕時，讀取到Wizard1.ActiveStepIndex的值為0，
而在Step 2頁面按【下一頁】鈕時，讀取到
Wizard1.ActiveStepIndex的值為1，依此類推。
• (2)第13~14行：由於帳號輸入錯誤，故我們希望它停留在Step 2的
頁面（ActiveStepIndex=1）重新輸入，因此在第14行設定
Wizard1.ActiveStepIndex為1，但由於進入該決策時，
Wizard1.ActiveStepIndex原本的值就是1，若直接設定則不會產生
正確的反應，所以要在第13行將之先移回上一頁，再移回本頁。
若您要移往其他頁（例如直接移往最末頁），就不需要第13行。
89
7.4.3
Wizard精靈引導控制項
– 步驟11：執行程式前，按下右邊的箭頭，選擇【Step 1】，回到第0
個頁面，然後才執行程式，如此才會從第0個頁面開始執行。
– 步驟12：執行程式。
90
91
92
93
7.5 分頁控制項
• 上一小節介紹的Wizard控制項具有分頁導覽的特性，事實上，
為了充分利用網頁版面，也為了與視窗程式介面更為接近，
ASP.NET還規劃了MultiView與View等控制項進行分頁。
– MultiView控制項本身並沒有太多作用，它無法放入View以外的控制項，
但可以包含一個以上的View控制項，換句話說，它可以作為View控制
項的外部容器。
– 而View控制項本身也是一個容器，其內可以包含其他控制項，因此應
用於分頁時，每一個View控制項代表的就是一個分頁。
94
7.5.1
MultiView控制項
• MultiView控制項會一次可以顯示一個View控制項。藉由設定
ActiveViewIndex屬性，設計者可以指定要顯示的View控制項。
– 您可以將 MultiView 控制項的 ActiveViewIndex 屬性，設定為想要顯
示之 View 控制項的索引值，以便在檢視之間移動。
– MultiView與View控制項也提供了自行製作巡覽按鈕的功能，我們將於
下一小節中說明。
• MultiView控制項的相關資訊如下：
– 類別： System.Web.UI.WebControls.MultiView類別
– 功能：可包含多個View控制項進行分頁的製作。
– 輸出的標籤：無。
95
7.5.1
MultiView控制項
– 類別重要的新增成員：
– 使用範例：見範例7-7、7-8。
96
7.5.2
View控制項
• MultiView控制項只能控制View的顯示，真正要製作網頁分頁的內容，必
須使用View控制項。
• View控制項是一個容器，其內可包含許多控制項，這些控制項將出現在
Controls 集合屬性中，當然也可以透過Controls.Add動態加入控制項。
– 雖然View控制項與Panel控制項都同樣是一種容器，但View控制項本身並不會
輸出任何HTML標籤，所以它沒有Height、Width等屬性供設定容器的區域。
• 在介面設計時它會依照其內的控制項最高者與最寬者決定編輯區域。因此，
為了方便編輯區域內的控制項，一般我們會先在其中加入一個Panel面板，
然後再將控制項加入Panel面板之中。
– 此時由於Panel面板作為View內的唯一子控制項，故可以拖曳改變Panel面板
進而方便編輯區域內的控制項。
97
7.5.2
View控制項
• View控制項的相關資訊如下：
–
–
–
–
類別：System.Web.UI.WebControls.View類別
功能：進行分頁的製作。
輸出的標籤：無。
類別重要的新增成員：
98
7.5.2
View控制項
– 使用範例：見範例7-7、7-8。
• 【範例7-7】
– 設計一個網頁，功能與範例6-16相同，但使用MultiView控制項控制要
顯示的分頁。並將右方的兩個選項清單放置於兩個View控制項中。
• 範例7-7：
– 網站目錄 ASPNET\ch07\ch07_07\（檔案ch07_07.aspx）
99
7.5.2
View控制項
– Step0：參考範例6-16，但使用相對位置，預先配置上方及下方的相
關控制項，結果如下圖。
100
7.5.2
View控制項
– Step1：拖曳「MultiView控制項」至網頁中央部份，並且將游標移往
其內，按下【Enter】鍵，使之內容向下擴張，以便放入兩個View控
制項。
101
7.5.2
View控制項
– Step2：拖曳「View控制項」至MultiView1內的空白處，會出現View1
控制項，如下圖。
102
7.5.2
View控制項
– Step3：同上一步驟，再拖曳一個「View控制項」至MultiView1內的
空白處，會出現View2控制項，如下圖。
103
7.5.2
View控制項
– Step4：拖曳RadioButtonList控制項至View1控制項內的空白處，會出
現RadioButtonList2控制項，然後編輯RadioButtonList2控制項，結果
如下圖。
104
7.5.2
View控制項
– Step5：同上一步驟，拖曳RadioButtonList控制項至View2控制項內的
空白處，會出現RadioButtonList3控制項，然後編輯RadioButtonList3
控制項，結果如下圖。
105
7.5.2
View控制項
– Step6：設定MultiView1控制項的ActiveViewIndex屬性為0，代表一開
始要顯示的是View1控制項所代表的分頁。
– Step7：撰寫RadioButtonList1_SelectedIndexChanged（按兩下
RadioButtonList1產生）、Button1_Click（按兩下Button1產生）、
Button2_Click（按兩下Button2產生）等事件程序如下。
• 程式部分內容：
7
8
9
10
11
12
13
14
Protected Sub RadioButtonList1_SelectedIndexChanged(sender As Object,
e As System.EventArgs)
If RadioButtonList1.SelectedIndex = 0 Then '決定哪一個View要顯示
MultiView1.ActiveViewIndex = 0
Else
MultiView1.ActiveViewIndex = 1
End If
End Sub
106
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Dim person As String
Label1.Text = ""
If MultiView1.ActiveViewIndex = 0 Then '依照顯示的View決定
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)
MultiView1.ActiveViewIndex = 0
'設定預設View
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
107
7.5.2
View控制項
– 範例說明：
• (1) 程式邏輯和範例6-16都差不多，只不過此時是依照
MultiView1.ActiveViewIndex決定相關流程，而非Panel.Visible。
程式執行時，按下RadioButtonList1的按鈕可以決定要顯示哪一個
View。
• (2)這個範例只有網頁部分內容被設定為MultiView，如果您想要將
整個網頁都設定為MultiView也可以，只要Web Form內僅加入
MultiView控制項即可。
– Step8：執行程式。
108
109
7.5.2
View控制項
• 使用MultiView與View控制項製作引導網頁
– 由於View控制項不能單獨存在於MultiView控制項以外，因此，
ASP.NET為了方便製作導覽分頁（如同Wizard控制項），也同時提供
將View控制項內的按鈕製作為巡覽按鈕的功能。
• 您必須將按鈕放在MultiView的作用範圍內，並將其
CommandName和CommandArgument屬性設定為下表各值，才
能成為巡覽按鈕。
110
7.5.2
View控制項
• 【範例7-8】
– 使用MultiView與View控制項，搭配Panel控制項，製作範例7-6的導引
網頁之前兩個步驟與最後步驟。
• 範例7-8：
– 網站目錄 ASPNET\ch08\ch07_08\（檔案ch07_08.aspx）
111
7.5.2
View控制項
– Step0：參考範例7-7，於空網頁中加入一個MultiView控制項，並在其
內加入三個View控制項，結果如下圖：
112
7.5.2
View控制項
– Step1：拖曳Panel控制項至View1控制項的空間內，然後調整Panel控
制項的大小。
113
7.5.2
View控制項
– Step2：同上一步驟，另外各拖曳一
個Panel控制項至View2、View3控
制項的空間內，並調整其大小，結果
如右圖。
– Step3：拖曳各控制項進入各Panel
中，全部都採用相對位置，並設定屬
性（其中Label有文字者，請多加一
個空白字元在尾部，以便與右方元件
間隔）。
• Panel1：包含一個Label、一個
按鈕。
• Panel2：包含四個Label、三個
TextBox、一個按鈕。
• Panel3：包含一個Label。
114
7.5.2
View控制項
115
7.5.2
View控制項
– Step4：設定MultiView1控制項的ActiveViewIndex屬性為0，代表一開
始要顯示的是View1控制項所代表的分頁。
– Step5：於屬性窗格中設定View1Btn控制項的CommandName屬性為
NextView，如此該按鈕就具有巡覽下一頁的功能。
– Step6：於屬性窗格【切換到事件頁籤】中設定View2Btn控制項的
Click事件程序為View2Btn_Click。
– Step7：於原始碼分頁中撰寫View2Btn_Click事件程序內容如下：
• 程式部分內容：
116
7.5.2
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
View控制項
Protected Sub View2Btn_Click(sender As Object, e As System.EventArgs)
View2Label4.Text = ""
If View2TextBox1.Text = "" Then
View2Label4.Text = "請勿輸入空的帳號"
MultiView1.ActiveViewIndex = 1
ElseIf View2TextBox2.Text = "" Then
View2Label4.Text &= "請勿輸入空的密碼"
MultiView1.ActiveViewIndex = 1
ElseIf View2TextBox3.Text <> View2TextBox2.Text Then
View2Label4.Text = "密碼錯誤,請重新輸入密碼"
MultiView1.ActiveViewIndex = 1
Else
View3Label.Text = View2TextBox1.Text & "您好<br />" & _
"您可以開始使用會員功能"
MultiView1.ActiveViewIndex = 2
End If
End Sub
117
7.5.2
View控制項
– 範例說明：
• (1)第7~23行：只有當顯示View2並按下按鈕時才會執行本程序，
其中利用重設MultiView1.ActiveViewIndex的值，決定下一頁呈現
那一個View。
• (2)我們不用撰寫View1Btn的事件程序，因為我們已經設定了
CommandName屬性為NextView，故ASP.NET會在該按鈕被按下
後，自動將MultiView1.ActiveViewIndex的值遞增1。
– Step8：存檔並執行程式。
118
119
120
7.5.3
製作Tab分頁
• 在視窗程式中，我們常常為了利用有限的視窗空間，故會採用頁籤分頁方
式配置元件，藉由切換頁籤，達到頁面空間共用的目的
• 在VB.NET中，它提供了一個TabControl控制項如下圖，很容易就可以製
作Tab分頁的效果，可是ASP.NET並未直接提供此類控制項，因此我們必
須自行組合各種控制項來模擬。
121
7.5.3
製作Tab分頁
• 因應雲端架構的發展，應用程式Web化是未來的趨勢（例如有些Web
Mail已經提供類似Outlook的介面），因此Tab分頁的需求越來越常見，以
往在ASP.NET還未盛行時，就已經有很多方法可以達成Tab分頁的功能
– 例如使用CSS製作區塊，甚至有些免費或付費軟體還提供了介面來產生其相
對的CSS碼，供使用者直接複製使用。
– 而ASP.NET雖然沒有直接附上此類控制項，但使用本節所學習的MultiView與
View控制項也可以達到同樣的功能。
• 聰明的您，應該很容易可以注意到，只要將上面的Tab頁籤以按鈕來呈現，
每當按下一個按鈕時，切換下方的View來顯示即可。
– 的確沒錯，這確實是一個簡單的方法，並且由於按鈕可以設定為巡覽按鈕，
因此按鈕部分可以完全不用撰寫程式就可以達成所需功能。
– 至於另一個方法則是透過Menu控制項來製作，我們將留待後面章節進行介紹。
122
7.5.3
製作Tab分頁
• 【範例7-9】
– 使用MultiView與View控制項，搭配LinkButton控制項，製作Tab分頁。
• 範例7-9：
– 網站目錄 ASPNET\ch07\ch07_09\（檔案ch07_09.aspx）
– Step0：參考範例7-7，於空網頁中加入一個MultiView控制項，並在其
內加入一個View控制項（並在View1的空間中換行），結果如下圖：
123
7.5.3
製作Tab分頁
– Step1：設定MultiView1控制項的ActiveViewIndex屬性為0。
– Step2：拖曳三個LinkButton控制項與一個Panel控制項至View1控制
項的空間內，將Panel放大到您所希望之每一頁的大小。然後設定其
文字與屬性。
124
7.5.3
製作Tab分頁
125
7.5.3
製作Tab分頁
– Step3：點選View1控制項，切換到原始碼頁籤，應該會出現代表它以
及屬於它的控制項標籤如下，將之全部複製起來。
<asp:View ID="View1" runat="server">
<asp:LinkButton ID="LinkButton1" …>【分頁A】</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" …>【分頁B】</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" …>【分頁C】</asp:LinkButton>
<br />
<asp:Panel ID="Panel1" runat="server" BackColor="DeepSkyBlue" Height="128px">
</asp:Panel>
</asp:View>
– Step4：按下【Enter】鍵，將複製的標籤段，貼上於
</asp:MultiView>之前兩次，結果標籤型式會如下：
126
7.5.3
製作Tab分頁
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
…………………
<br />
<asp:Panel ID="Panel1" runat="server" BackColor="DeepSkyBlue" Height="128px">
</asp:Panel>
</asp:View>
複製
<asp:View ID="View2" runat="server">
…………………
<asp:Panel ID="Panel2" runat="server" BackColor="DeepSkyBlue" Height="128px">
</asp:Panel>
</asp:View>
複製
<asp:View ID="View3" runat="server">
…………………
<asp:Panel ID="Panel3" runat="server" BackColor="DeepSkyBlue" Height="128px">
</asp:Panel>
</asp:View>
</asp:MultiView>
127
7.5.3
製作Tab分頁
– Step5：由於VWD在
複製元件時會自動編
號，因此，此時會出
現View2~3、
Panel2~3、
LinkButton4~9等等
的控制項，如右圖：
128
7.5.3
製作Tab分頁
– Step6：為了區分各頁，我們可以修改Panel2、Panel3的背景顏色如
下屬性。
– Step7：為了區分各頁，我們也可以修改LinkButton1、LinkButton5、
LinkButton9的字型為粗體，如下屬性。（如果您想要換成別的樣式，
請自行設計）
129
7.5.3
製作Tab分頁
– Step8：存檔並執行程式。
– Step9：您可以回到VWD中，在Panel1~3中加入所需要的控制項了。
130
7.6 為動態產生的控制項註冊
事件程序
• 我們即將結束標準頁籤控制項的介紹，除了少數的控制項之
外，大多數的控制項已經在本章及上一章介紹過了，並且我
們也在本章動態產生圖片控制項並將之加入於表格中。
– 不過我們並未介紹如何為動態產生的控制項撰寫事件程序。
• 以往在VB6時代，控制項可以組成控制項陣列，並且共用同
一個事件。而在VB.NET中，控制項無法透過屬性窗格修改為
一個包含陣列元素的名稱，例如Button(0)
– 不過VB.NET仍舊允許我們自行宣告控制項陣列（也就是陣列元素為
控制項）。如果要在網頁中，出現控制項陣列的控制項，則必須動態
加入到某容器中（例如加入Panel面板中）。
131
7.6 為動態產生的控制項註冊
事件程序
• 而在VB.NET或ASP.NET中，不同控制項共用同一事件程序
並不需要特別設計，因為它傳入的sender參數可以作為判別
觸發事件的來源依據，您只要透過屬性窗格的事件頁籤來設
定相同的事件處理程序即可達到共用事件程序的目的。
– 不過，對於動態增加的控制項，就無法透過屬性窗格進行設定了。
132
7.6 為動態產生的控制項註冊
事件程序
• 動態新增控制項的事件程序撰寫方式，其實和一般事件程序相同。只不過，
您必須為控制項註冊事件程序，兩者才會產生關聯。
• 註冊事件程序使用的是AddHandler敘述，並且應該要將事件程序的參考
位址註明其內，語法如下：
AddHandler 控制項名稱.某一事件, AddressOf 對應的事件處理程序名稱
• 【說明】
– 上述語法是註冊一個事件程序給控制項的某一個事件。事實上，我們在屬性
窗格事件頁籤中設定事件處理程序時，VWD內部就幫我們完成了此一功能。
– 例如，想要新增Button1的Click事件的事件程序為Button1_Click，則應該要如
下撰寫
AddHandler Button1.Click, AddressOf Button1_Click
133
7.6 為動態產生的控制項註冊
事件程序
– 以下，我們透過範例來說明，如何為動態新增的控制項註冊事件程序。
• 【範例7-10】
– 動態新增控制項陣列的三個按鈕控制項，並且為其註冊一個Click事件
的事件程序。
• 範例7-10：
– 網站目錄 ASPNET\ch07\ch07_10\（檔案ch07_10.aspx）
– Step1：於空網頁中加入一個Panel1控制項以及在Panel1控制項之外
加入一個Label1控制項，結果如下圖：
134
7.6 為動態產生的控制項註冊
事件程序
– Step2：切換到原始碼頁籤，撰寫下列程式碼。
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script runat="server">
Dim arrButton(2) As Button
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
For i As Integer = 0 To arrButton.Length - 1
arrButton(i) = New Button()
arrButton(i).Width = 40
arrButton(i).Height = 40
arrButton(i).Text = "按鈕" & i
AddHandler arrButton(i).Click, AddressOf myButton_Click '註冊事件程序
Panel1.Controls.Add(arrButton(i))
'加入控制項到Panel1中
Next
End Sub
135
19
20
21
22
23
24
25
26
Protected Sub myButton_Click(sender As Object, e As System.EventArgs)
If sender.Equals(arrButton(1)) = True Then
Label1.Text = "按鈕1被按下"
Else
Label1.Text = "非按鈕1被按下"
End If
End Sub
</script>
– 範例說明：
• (1)第6行：宣告arrButton ()陣列，它將是Page的一個欄位。
• (2)第8~17行： Page_Load事件程序，會於網頁被輸出前執行。其
中包含了一個迴圈，迴圈內第10行使用New動態產生三個Button
控制項實體，並由arrButton(i)陣列元素參考到它。
– 第11~13行，設定動態產生的Button控制項的屬性。
– 第14行是為動態產生的Button控制項註冊Click事件的事件程序
為myButton_Click()。
– 而第15行則是將動態產生的Button控制項加入到Panel1中。
136
7.6 為動態產生的控制項註冊
事件程序
• (3)第19~25行 ：動態產生的控制項的事件處理程序。格式與一般
Button按鈕的事件程序相同，同樣包含sender與e兩個參數。只不
過由於第14行是在迴圈中註冊它為arrButton(0)、arrButton(1)、
arrButton(2)控制項的Click事件處理程序，故它被三個控制項共用。
– 第20行則是判斷事件來源者是否為arrButton(1)，使用的是
Equals()，它可以進行兩個物件參考的比較，若sender與
arrButton(1)參考到同一個物件，則回傳True。
• (4)在執行結果中，網頁中的Panel1控制項會變成<div>標籤，由於
已經動態加入了三個按鈕控制項，故會出現三個按鈕。而不論按
下哪一個按鈕，都會執行myButton_Click()事件處理程序，並在
Label1顯示比較的結果。
137
7.6 為動態產生的控制項註冊
事件程序
– Step3：執行程式。
138
7.7 本章回顧
• 在本章中，我們介紹了工具箱標準頁籤中的Table、Calendar、
Image、AdRotator、HyperLink、ImageMap、Wizard、
MultiView與View等等的控制項。
– 其中，Calendar月曆控制項功能強大，但使用簡單，因為ASP.NET已
經幫我們做好相關的設定與對應的輸出。
– 而Wizard控制項則可以製作精靈引導式的網頁。
– MultiView與View是製作分頁的控制項，通常它會在View內搭配Panel
面板容器進行單頁內容的配置。
• 同時，我們也示範了如何使用這兩種控制項製作精靈引導式網頁
以及Tab分頁。
139
7.7 本章回顧
• 除了控制項的介紹之外，在本章中，我們首度透過程式的執
行，動態新增控制項於容器中
– 包含增加Image控制項於TableCell容器中，以及增加Button控制項於
Panel容器中。
– 除此之外，我們也介紹了如何為動態新增的控制項註冊其事件程序。
• 至此為止，您應該能夠使用ASP.NET設計大多數的網頁了。
從下一章開始，我們將介紹更多工具箱非標準頁籤的控制項，
這些控制項將可以免除網頁程式設計的許多麻煩。
140
本章習題
141