1 / 141

第七章 伺服器控制項（二）

第七章 伺服器控制項（二） 在本章中，我們將介紹工具箱／標準頁籤中較為複雜的的控制項，包含 Table 、 Calendar 、 AdRotator 、 ImageMap 、 Wizard 、 MultiView 與 View 控制項等等。. 這些複雜控制項在實現上較為複雜，但在使用上則不一定複雜，這都要歸功於 ASP.NET 的強大功能（若您使用 PHP+JavaScript 要完成相同功能，通常必須撰寫非常多的程式）。 同時我們也會在適當時機補充介紹 Image 、 HyperLink 兩種控制項。以及介紹如何動態新增控制項，並為這些控制項註冊事件程序。.

haviva-stokes
Download Presentation

第七章 伺服器控制項（二）

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

E N D

Presentation Transcript

  1. 第七章伺服器控制項（二）在本章中，我們將介紹工具箱／標準頁籤中較為複雜的的控制項，包含Table、Calendar、AdRotator、ImageMap、Wizard、MultiView與View控制項等等。第七章伺服器控制項（二）在本章中，我們將介紹工具箱／標準頁籤中較為複雜的的控制項，包含Table、Calendar、AdRotator、ImageMap、Wizard、MultiView與View控制項等等。 這些複雜控制項在實現上較為複雜，但在使用上則不一定複雜，這都要歸功於ASP.NET的強大功能（若您使用PHP+JavaScript要完成相同功能，通常必須撰寫非常多的程式）。同時我們也會在適當時機補充介紹Image、HyperLink兩種控制項。以及介紹如何動態新增控制項，並為這些控制項註冊事件程序。

  2. 第七章 伺服器控制項（二） • 繼上一章介紹的控制項之後，相信讀者已經對控制項相關的操作非常熟悉，例如編輯清單的項目、設定色彩、設定XML資料來源等等。也對於AutoPostBack與容器的原理有相當程度的理解。 • 在本章中，我們將繼續介紹工具箱／標準頁籤的其他Web伺服器控制項。

  3. 7.1 Table表格控制項 7.2 圖片相關控制項 7.2.1 Image圖片控制項 7.2.2 AdRotator橫幅廣告控制項 7.3 Calendar月曆控制項 7.4 導向控制項 7.4.1 HyperLink超鏈結控制項 7.4.2 ImageMap圖片多方鏈結控制項 7.4.3 Wizard精靈引導控制項 7.5 分頁控制項 7.5.1 MultiView控制項 7.5.2 View控制項 7.5.3 製作Tab分頁 7.6 為動態產生的控制項註冊事件程序 7.7 本章回顧 大綱

  4. 7.1 Table表格控制項 • 表格在網頁設計中扮演非常重要的角色，它除了可以作為實體表格，也可以當作編排使用的無框線表格。 • 在Web伺服器控制項中，Table控制項可以製作表格，對應的類別是Table類別。 • 表格是由列所組成，而表格中所有的列由Rows屬性來代表，它是一個集合，對應的類別是TableRowCollection類別，而集合中的每一個項目（每一列）則為TableRow類別的物件。 • 列又是由儲存格組成，而列中所有的儲存格由Cells屬性來代表，它是一個集合，對應的類別是TableCellCollection類別，而集合中的每一個項目（每一個儲存格）則為TableCell類別的物件。 • 若在程式中想要產生表格，則必須反向來製作，也就是先製作Cell，放入Row的Cells集合中，然後再將Row加入Table的Rows集合中。

  5. 7.1 Table表格控制項 • Table控制項的相關資訊如下： • 類別：System.Web.UI.WebControls.Table類別 • 功能：可產生表格。 • 輸出的標籤：<table><tr><td>。若設定Caption 屬性，則有<caption>標籤。 • 類別重要的新增成員：

  6. 【Rows屬性說明】 • Rows屬性的回傳值是一個TableRowCollection集合，它的每一個元素都是一個TableRow物件，並且可以透過多種方法進行加入、移除元素，或者尋找特定元素等操作。

  7. 7.1 Table表格控制項 • TableRowCollection類別(Table.Rows屬性的型別)重要的成員：

  8. 7.1 Table表格控制項 • TableRow類別(TableRowCollection集合項目的型別)重要的成員： • 【Cells屬性說明】 • Cells屬性的回傳值是一個TableCellCollection集合，它的每一個元素都是一個TableCell物件，並且可以透過多種方法進行加入、移除元素，或者尋找特定元素等操作。

  9. 7.1 Table表格控制項 • TableCellCollection類別(TableRow.Cells屬性的型別)重要的成員：

  10. 7.1 Table表格控制項 • TableCell類別(TableCellCollection集合項目的型別)重要的成員：

  11. 7.1 Table表格控制項 • 【註】 • TableCell具有容器性質，可以透過Controls.Add()加入子項目於儲存格中，詳見範例7-2。 • 使用範例：見範例7-1。 • 【範例7-1】 • 使用Table控制項製作表格，並動態修改表格內容。 • 範例7-1： • 網站目錄 ASPNET\ch07\ch07_01\（檔案ch07_01.aspx）

  12. 7.1 Table表格控制項 • Step1：先在網頁介面中產生一個Button1控制項，設定為絕對配置，按鈕文字修改為「增加一列」，然後在工具箱中拖曳「Table控制項」至網頁上方。

  13. 7.1 Table表格控制項 • Step2：此時會出現Table1控制項，將之稍微拉大，然後於屬性窗格中，按下Rows屬性值旁的按鈕。

  14. 7.1 Table表格控制項 • Step3：此時會出現TableRow集合編輯器，它與上一章介紹的ListItem集合編輯器的使用方式類似，請自行建立兩個TableRow。第一列的HorizontalAlign屬性設定為Left，第二列將的HorizontalAlign屬性設定為Right。

  15. 7.1 Table表格控制項

  16. 7.1 Table表格控制項 • Step4：切回TableRow集合編輯器的第0個項目，點選Cells屬性值旁的按鈕。

  17. 7.1 Table表格控制項 • Step5：此時會出現TableCell集合編輯器，它與TableRow集合編輯器使用方式類似，請自行建立三個TableCell項目。Text屬性分別設定為「專科」、「大學」、「研究所」。

  18. 7.1 Table表格控制項 • Step6：仿照Step4、5，編輯TableRow集合第1個項目的Cells屬性，同樣加入三個TableCell項目如下。

  19. 7.1 Table表格控制項 • Step7：編輯完畢後，回到介面設計時，您會發現Table1控制項內容已經出現，也就是剛才所設定的集合以及集合中的集合。稍微拉大Table1控制項，使資料能夠充分呈現。然後設定Table1控制項GridLines屬性為Both，使之出現格線。

  20. 7.1 Table表格控制項 • Step8：撰寫Button1_Click事件程序如下：

  21. 7.1 Table表格控制項 • 範例說明： • (1)第10~16行：這是製作一個新列，其中第11~15行是製作新列的每一個儲存格，並將儲存格加入到Cells集合中。 • (2)第17行是將新列插入到表格中，事實上也就是在Rows中插入一個新的項目。 • (3)第19行，我們仍可以對表格內容進行相關設定。若要設定表格第0列的內容為粗體，則應該針對Rows(0)進行設定。 • Step9：執行程式。

  22. 7.1 Table表格控制項

  23. 7.2 圖片相關控制項 • Web 伺服器控制項中與圖片有關的控制項，除了上一章介紹的ImageButton圖片按鈕之外，還有Image 圖片控制項與AdRotator 橫幅廣告控制項。 • 7.2.1 Image圖片控制項 • Image 圖片控制項是比較單純的控制項。可以用來加入圖片到網頁中。 • Image 控制項的相關資訊如下： • 類別：System.Web.UI.WebControls.Image類別 • 功能：可加入圖片。 • 輸出的標籤：<img />。

  24. 7.2.1 Image圖片控制項 • 類別重要的新增成員：

  25. 7.2.1 Image圖片控制項 • 使用範例：見範例7-2。 • 【範例7-2】 • 動態產生圖片控制項，並加入到Table控制項中。 • 學習重點： • 1. 動態產生控制項（本範例為動態產生Image控制項物件） • 2. 在具有容器性質的控制項（本範例為TableCell控制項物件）中加入控制項 • 範例7-2： • 網站目錄 ASPNET\ch07\ch07_02\（檔案ch07_02.aspx）

  26. 7.2.1 Image圖片控制項 • Step1：仿造範例7-1，建立一個Table控制項，包含2列×3儲存格，但儲存格內容皆為空。另外配置三個控制項，除表格外，皆採用絕對定址，結果如圖。 • Step2：撰寫事件程序如下： • 程式部分內容：

  27. 7.2.1 Image圖片控制項

  28. 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：執行程式。

  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> </Advertisements >

  37. 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. 7.2.2 AdRotator橫幅廣告控制項

  40. 7.3 Calendar月曆控制項 • Calendar控制項可以在網頁中製造一個月曆，並且可以在使用者按下某個日期時，進行某些特定的回應。以往要在網頁中出現一個月曆，必須花費許多功夫撰寫客戶端的JavaScript程式碼並且需要使用表格進行日期的對齊，隨著越來越多的公司網頁中，需要使用月曆來表示每日活動，因此ASP.NET也將之納入為控制項，讓程式設計師減少了許多的麻煩。 • Calendar控制項的相關資訊如下： • 類別：System.Web.UI.WebControls.Calendar類別 • 功能：建立一個月曆。 • 輸出的標籤：以巢狀<table><tr><td>表格編排，包含<a>標籤建立鏈結外觀。包含JavaScript進行PostBack。 • 類別重要的新增成員：

  41. 7.3 Calendar月曆控制項 • 【選取類之屬性說明】 • 大部分程式運作的依據都是來自選取類的屬性，例如您想要取得使用者選取了哪一天，則可以讀取SelectedDate屬性值。 • 【事件說明】 • 主要將使用者動作分為兩大類 • (1)按下某一日期（也就是選取某一日時，也包含選取整周或整月）。 • (2)按下上方的往上或往下月巡覽。可針對這兩種事件分別進行不同的處理。

  42. 7.3 Calendar月曆控制項 • 【範例7-4】 • 建立一個月曆，允許使用者選取某一日或某一周，並對照該選取日是否有特殊活動決定顯示結果。（上下月份中，也各記錄一日活動）若活動已過當日，則顯示活動已舉行完畢。 • 範例7-4： • 網站目錄 ASPNET\ch07\ch07_04\（檔案ch07_04.aspx） • Step1：配置兩個Label控制項，並將Text屬性設為空字串，然後在工具箱中拖曳Calendar控制項至網頁上方。

  43. 7.3 Calendar月曆控制項 • Step2：此時會出現Calendar1控制項，然後於屬性窗格中，設定SelectionMode 屬性為DayWeek，結果如下圖。

  44. 7.3 Calendar月曆控制項 • Step3：撰寫<script>內的程式碼如下（產生事件程序請在Calendar1控制項上按兩下）： • 程式部分內容：

  45. 7.3 Calendar月曆控制項 • 範例說明： • (1)第7~14行：記錄活動日期與對應的表示字串。 • (2)第16~36行：按下月曆中，任何一個呈現超鏈結底線的日期或巡覽都會產生PostBack。（Calendar控制項不需要設定AutoPostBack），但只有選取日期改變時，才會執行此事件程序，您可以藉由Label2的輸出觀看是否執行了本事件程序。 • (3)第22~34行：包含兩層的迴圈，外層迴圈是依序將陣列日期與選取日期進行比對。而內層迴圈則是因為可能選取整周，故選取日期是一個SelectedDates集合，所以也需要一一比對。至於第26~30行則是將選取日期與本日進行比對，筆者撰寫時日期恰好跨越本日前後，故可測試，讀者可以修該第7~11行的日期後進行測試。 • (4)執行時，可以選取單日或單周，也可以按下上月巡覽與下月巡覽，選取其他月份的日期。

More Related