第15章 豐富控制項.

Presentation on theme: "第15章 豐富控制項."— Presentation transcript:

1 第15章 豐富控制項

2 15-1 豐富控制項 15-1-1 Calendar控制項 15-1-2 AdRotator控制項 15-1-3 MultiView控制項
Wizard控制項

3 15-1 豐富控制項 ASP.NET的「豐富控制項」（Rich Controls）之所以稱為豐富控制項，因為這種伺服端控制項提供複雜使用者介面，在客戶端會自動產生複雜的HTML標籤和相關程式碼。 換句話說，豐富控制項可以在網頁產生進階使用者介面，而不需撰寫任何HTML標籤或程式碼，例如：Calendar、AdRotator、MultiView和Wizard控制項。

4 Calendar控制項-說明 Calendar控制項可以在網頁顯示萬年曆，只需更改屬性值就可以指定月曆的顯示方式，或使用事件處理來執行日期等相關操作。

5 Calendar控制項-新增 在「工具箱」視窗展開【標準】區段，選【Calendar】控制項，然後拖拉至<div>標籤即可插入Calendar控制項。

6 Calendar控制項-屬性

7 15-1-1 Calendar控制項-事件處理相關屬性

8 Calendar控制項-相關事件 Calendar控制項提供三種事件，其說明如下表所示：

9 15-1-1 Calendar控制項- 事件處理程序的參數
在VisibleMonthChanged事件處理程序傳入的參數是MonthChangedEventArgs物件。其相關屬性說明如下表所示：

10 15-1-1 Calendar控制項- SelectionChanged事件1
13: protected void Calendar1_SelectionChanged( object sender, EventArgs e) 14: { 15: // 顯示選取日期的範圍 16: switch (Calendar1.SelectedDates.Count) 17: { 18: case 0: // None 19: lblOutput.Text = "沒有選擇日期資料....."; 20: break; 21: case 1: // Day 22: lblOutput.Text = "選擇的日期: " + Calendar1.SelectedDate.ToShortDateString(); 23: break;

11 15-1-1 Calendar控制項- SelectionChanged事件2
24: case 7: // Week 25: lblOutput.Text = "選擇星期的開始: " + Calendar1.SelectedDate.ToShortDateString(); 26: break; 27: default: // Month 28: lblOutput.Text = "選擇月的開始: " + 29: break; 30: } 31: }

12 15-1-1 Calendar控制項- VisibleMonthChanged事件
33: protected void Calendar1_VisibleMonthChanged( object sender, MonthChangedEventArgs e) 34: { 35: lblOutput.Text = "新月份: " + e.NewDate.Month.ToString() + 36: "<br/>原始前一月份: " + 37: e.PreviousDate.Month.ToString(); 38: }

13 15-1-1 Calendar控制項- 範例網站 ASP.NET網站：Ch15_1_1
在ASP.NET網頁的Calendar控制項新增SelectionChanged和VisibleMonthChanged事件處理程序，可以使用2個DropDownList控制項選取目前的月份和選取模式，如右圖所示：

14 AdRotator控制項-說明 AdRotator控制項是一種廣告圖片的管理元件，控制項是以亂數產生權值來隨機選擇顯示的廣告圖片，每一張圖片都是一個圖片超連結，可以連接目的地的URL網址。

15 15-1-2 AdRotator控制項- XML文件設定檔內容
<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>images/CS101.gif</ImageUrl> <Width>140</Width> <Height>190</Height> <NavigateUrl>Details.aspx?No=CS101</NavigateUrl> <AlternateText>CS101</AlternateText> <Keyword>Concept</Keyword> <Impressions>25</Impressions> <Caption>計算機概論</Caption> </Ad> …………………… </Advertisements>

16 15-1-2 AdRotator控制項- XML文件設定檔標籤說明
定義廣告圖片的相關子標籤，其說明如下表所示：

17 15-1-2 AdRotator控制項- XML文件設定檔的自訂標籤
在XML文件的<Ad>標籤除了預設標籤外，我們也可以新增自訂的子標籤。例如：新增<Caption>標籤，如下所示： <Ad> <ImageUrl>images/CS203.gif</ImageUrl> <Width>140</Width> <Height>190</Height> <NavigateUrl>Details.aspx?No=CS203</NavigateUrl> <AlternateText>CS203</AlternateText> <Keyword>Programming</Keyword> <Impressions>50</Impressions> <Caption>程式語言</Caption> </Ad>

18 AdRotator控制項-使用說明 在ASP.NET網頁新增AdRotator控制項後，只需指定廣告圖片資訊的XML文件，就可以使用亂數以權值來隨機選擇顯示的廣告圖片。 AdRotator控制項除了使用XML文件外，我們也可以使用資料庫作為資料來源，也就是建立資料來源控制項，此時資料表欄位名稱就是<Ad>標籤的子標籤名稱。

19 15-1-2 AdRotator控制項- 新增AdRotator控制項
在「工具箱」視窗展開【標準】區段，選【AdRotator】控制項，然後拖拉至<div>標籤中表格的第1列即可插入AdRotator控制項。

20 AdRotator控制項-常用屬性 AdRotator控制項的常用屬性

21 15-1-2 AdRotator控制項-AdCreated事件
lblOutput.Text = e.AdProperties["Caption"].ToString(); lblOutput.Text += "連結網址: " + e.NavigateUrl; 因為上一節<Ad>元素有新增<Caption>子標籤，可以使用AdProperties物件取得值，參數是自訂標籤Caption的名稱，然後取得XML標籤的屬性NavigateUrl的值（<Ad>子標籤內容就是屬性值）。

22 15-1-2 AdRotator控制項-範例網站 ASP.NET網站：Ch15_1_2
在ASP.NET網頁AdRotator控制項指定相關屬性後，建立顯示課程教課書封面的廣告圖片，篩選條件為Concept，如右圖所示：

23 MultiView控制項-說明 MultiView控制項可以在網頁預先建立多個View控制項，每次只顯示其中一個View控制項，可以用來切換顯示不同View控制項的網頁內容。 MultiView控制項最常的應用是處理太長的Web表單，或是結合Menu控制項來建立標籤頁的使用介面。 MultiView控制項 View控制項

24 15-1-3 MultiView控制項-常用屬性 MultiView控制項的常用屬性
例如：在Page_Load()事件處理程序指定顯示第1個View控制項，即索引值0，如下所示： MultiView1.ActiveViewIndex = 0;

25 15-1-3 MultiView控制項- 在View控制項新增巡覽按鈕
因為MultiView控制項擁有多個View控制項，此時，我們需要在View控制項新增巡覽按鈕，例如：Button、LinkButton或ImageButton控制項來切換至下一個或前一個View控制項。 在Button、LinkButton或ImageButton控制項只需指定CommandName屬性值，就可以建立預設功能的按鈕控制項，其說明如下表所示：

26 15-1-3 MultiView控制項- 範例網站 ASP.NET網站：Ch15_1_3
在ASP.NET網頁使用MultiView和View控制項建立登入表單，每一個View控制項只顯示部分表單內容，網頁提供巡覽按鈕來切換顯示每一個View控制項，如下圖所示：

27 Wizard控制項-說明 Wizard控制項可以在網頁建立多步驟的精靈頁面，每一個步驟就是一個WizardStep控制項，我們可以活用Wizard控制項來收集使用者輸入的資訊。

28 Wizard控制項-屬性 Wizard控制項的常用屬性，如下表所示：

29 Wizard控制項-編輯步驟 開啟「Wizard工作」功能表，選【新增/移除WizardSteps】超連結來編輯精靈步驟，可以看到「WizardStep集合編輯器」對話方塊。 按左下方【加入】鈕新增步驟

30 15-1-4 Wizard控制項- WizardStep控制項屬性

31 15-1-4 Wizard控制項-範例網站 ASP.NET網站：Ch15_1_4
在ASP.NET網頁新增和自動格式化Wizard控制項後，建立類似第15-1-3節三步驟的精靈頁面，如右圖所示：