Chapter 5 進階伺服器控制項.

Presentation on theme: "Chapter 5 進階伺服器控制項."— Presentation transcript:

1 Chapter 5 進階伺服器控制項

2 本章提要 5 - 1 以 CheckBox、RadioButton 控制項製作選項
5 - 2 CheckBoxList、RadioButtonList 控制項－多選、單選項目清單 5 - 3 DropDownList、ListBox 控制項－下拉式選單與選項列表 5 - 4 建立月曆的 Calendar 控制項 5 - 5 建立橫幅廣告輪播的 AdRotator 控制項 5 - 6 使用 Panel 控制項同時控制多個控制項

3 本章提要 5 - 7 使用 MultiView 與 View 控制項在同一區域顯示不同內容
5 - 8 以 Wizard 控制項製作步驟式程序 5 - 9 動態產生表格的 Table 控制項

4 5 - 1 以 CheckBox、RadioButton 控制項製作選項
一般網頁中, 除了提供輸入欄位讓使用者輸入文字外, 也常常會使用選項或選單讓使用者以勾選或點選的方式來輸入資料, 本節將說明如何使用控制項製作這些選項與選單。

5 多選與單選選項 網頁程式經常使用以下兩種單選與多選選項： 隨後會分別為您介紹這兩種控制項的製作與使用方式。

6 CheckBox 控制項－多選選項 請如下操作便可以建立多選選項：

7 CheckBox 控制項－多選選項 如果您希望使用者進入網頁時, 該選項預設就是勾選的狀態, 請設定 Checked 屬性為 "True"：

8 CheckBox 控制項－多選選項 而在程式中若要判斷使用者是否勾選某個選項, 只要檢查該選項的 Checked 屬性是 True (已勾選) 或是 False (未勾選) 即可。 下面例子說明如何判斷使用者勾選了哪些選項, 請如下在 Web Form 建立控制項並設定屬性：

9 CheckBox 控制項－多選選項

10 CheckBox 控制項－多選選項 筆者想要產生以下執行的結果：

11 CheckBox 控制項－多選選項 為了達到以上功能, 必須建立對應 Button1 按鈕 Click 事件的程序, 在程序中判斷有哪些 CheckBox 控制項被勾選, 然後進行相關處理。 所以請在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼即可：

12 CheckBox 控制項－多選選項

13 CheckBox 控制項－多選選項

14 RadioButton 控制項－單選選項 單選選項的建立方式與多選選項類似, 只要在 VWD 中使用 RadioButton 控制項即可。而同樣的, Text 屬性表示選項的文字, Checked 屬性代表是否被選取。 不過單選選項還有一個重要的屬性：GroupName, 用來將網頁上的選項分組, 同一組選項內只能選擇一個項目：

15 RadioButton 控制項－單選選項

16 RadioButton 控制項－單選選項 上面可以清楚看到 8 個選項共分成 2 組, 每一組內只能選一個項目, 前 4 個 RadioButton 控制項可以設定 GroupName 屬性為 q1, 後 4 個則設定為 q2, 這樣就可以明確地將 RadioButton 控制項分組。 請注意, 即使網頁上只有一組 RadioButton 控制項, 也應該設定 GroupName 屬性；如果未設定, 代表各 RadioButton 控制項沒有明確歸於一組, 會造成可以同時選擇多個 RadioButton 控制項的情形。

17 RadioButton 控制項－單選選項 下面例子將說明如何判斷使用者選擇了哪些 RadioButton 控制項, 請如下在 Web Form 建立控制項並設定屬性：

18 RadioButton 控制項－單選選項 筆者想要產生以下執行的結果：

19 RadioButton 控制項－單選選項 為了達到以上功能, 必須建立對應 Button1 按鈕 Click 事件的程序, 在程序中判斷使用者選擇了哪一個 RadioButton 控制項, 然後進行相關處理。 所以請在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 並輸入如下程式碼：

20 RadioButton 控制項－單選選項

21 RadioButton 控制項－單選選項

22 5 - 2 CheckBoxList、RadioButtonList 控制項－多選、單選項目清單
CheckBoxList 與 RadioButtonList 控制項的功能類似前面提到的 CheckBox 與 RadioButton 控制項, 可以用來產生多選與單選的選項。 不過 CheckBoxList 與 RadioButtonList 控制項的屬性與功能較多, 不但能夠動態增加或刪除選項, 還可以使用資料庫、XML...等來源的資料建立選項。

23 使用 CheckBoxList 控制項建立多選項目清單

24 使用 CheckBoxList 控制項建立多選項目清單

25 常用的 CheckBoxList 控制項屬性
CheckBoxList 是繼承 .NET Framework 的 ListControl 類別所產生的控制項, 本章稍後介紹的 RadioButtonList、DropDownList、ListBox 等控制項也是繼承同一類別, 所以會具有相同的屬性與方法, 本節介紹的這些屬性與方法, 之後也都可用在其他同類型的控制項。

26 常用的 CheckBoxList 控制項屬性
以下為筆者建立的多選項目清單：

27 常用的 CheckBoxList 控制項屬性
上面可以看到, CheckBoxList 內可以用 “ID.Items (index)” 存取各項目, 其中 index 是以 0 起始的索引編號, 也就是說所有項目都會被放置於 ID.Items 這個集合內 (關於集合的說明請參閱 3-50 頁)。 以下是常用的 CheckBoxList 項目屬性：

28 常用的 CheckBoxList 控制項屬性

29 常用的 CheckBoxList 控制項屬性
以上面筆者建立的多選項目清單為例, 下面列舉部分屬性讓您藉此瞭解其意義： CheckBoxList1.Items.Count = 3 CheckBoxList1.Items(0).Selected = False , 表示未被勾選 CheckBoxList1.Item(0).Text = "最新 Java 2 程式語言" CheckBoxList1.Item(0).Value 為 5-7 頁所設定的 "560"

30 常用的 CheckBoxList 控制項屬性
下面筆者將使用 CheckBoxList 控制項, 製作一個與前面程式 Ch05-01.aspx 類似功能的程式, 請建立如下控制項並設定屬性：

31 常用的 CheckBoxList 控制項屬性

32 常用的 CheckBoxList 控制項屬性
然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

33 常用的 CheckBoxList 控制項屬性

34 常用的 CheckBoxList 控制項屬性
在瀏覽器檢視執行結果

35 常用的 CheckBoxList 控制項屬性
將這個程式與程式 Ch05-01.aspx 相比較, 可以看到當選項具有群組性時, 使用 CheckBoxList 會比較方便存取各項目屬性。

36 常用的 CheckBoxList 控制項方法
CheckBoxList 除了方便存取具群組性的選項屬性外, 還具有動態新增 / 刪除選項的能力, 下面是常用的 CheckBoxList 控制項方法：

37 常用的 CheckBoxList 控制項方法
使用 ID.Items.Add (“字串”) 新增的項目會放在 CheckBoxList 的最後面, 新項目的 Text 屬性為 “字串”, 而 Value 屬性則預設與 Text 屬性相同。 如果您想要自行指定 Value 屬性的值, 需使用下面的語法：

38 常用的 CheckBoxList 控制項方法
在 ASP.NET 中所有看得到的都是物件, 因此 CheckBoxList 裡面的項目是使用 ListItem 類別所產生的物件。 當使用 ID.Items.Add ("字串") 新增項目時, 會自動替我們產生 ListItem 物件, 然後將您指定的字串設定該物件的 Text 屬性。

39 常用的 CheckBoxList 控制項方法
不過當您想要另外指定 Value 屬性時, 就不能使用自動產生物件的機制, 而必須如上自行使用 New ListItem() 產生物件, 同時設定 Text 與 Value 屬性。 下面例子將示範 CheckBoxList 動態新增與刪除選項的功能, 請如下在 Web Form 建立控制項並設定屬性：

40 常用的 CheckBoxList 控制項方法

41 常用的 CheckBoxList 控制項方法
筆者想要產生以下執行的結果：

42 常用的 CheckBoxList 控制項方法
為了達到以上功能, 必須建立以下程序與功能： Button1 的 Click 事件處理程序：讀取 TextBox1 (名稱) 與 TextBox2 (價格) 的值做為項目的 Text 與 Value 屬性, 然後將其加入 CheckBoxList1。

43 常用的 CheckBoxList 控制項方法
Button2 的 Click 事件處理程序：用迴圈逐一讀取 CheckBoxList1 所有項目的屬性, 如果 Selected 屬性為 True, 表示使用者已勾選, 所以要刪除該項目。 Button3 的 Click 事件處理程序：用迴圈逐一讀取 CheckBoxList1 所有項目的 Value 屬性並加總, 最後將總和顯示於 Label1 控制項。

44 常用的 CheckBoxList 控制項方法
所以請在設計模式下雙按各按鈕建立 Button1_Click、Button2_Click、Button3_Click 程序, 在其中輸入以下程式碼：

45 常用的 CheckBoxList 控制項方法

46 常用的 CheckBoxList 控制項方法

47 常用的 CheckBoxList 控制項方法

48 常用的 CheckBoxList 控制項方法
請注意, 因為 Button2_Click 程序會刪除勾選的項目, 所以迴圈一定要由後往前存取各項目。 為了說明迴圈由前往後時會發生的問題, 以下假設 CheckBoxList 共有 3 個項目, 若由前往後, 迴圈的定義將是 For Index = 0 To 2, 執行的流程如下：

49 常用的 CheckBoxList 控制項方法

50 常用的 CheckBoxList 控制項方法
由上面流程可以看到, 不但 ItemB 會變成第 1 個項目而沒有讀取到, 更嚴重的是迴圈最後找不到項目可存取, 此時將會產生執行時期錯誤, 導致程式中止執行, ASP.NET 則會直接顯示錯誤相關訊息 (參見第 8 章)。 至於 Button3_Click 程式只是單純讀取各項目屬性, 所以不論由前往後, 或是由後往前都不會有任何影響。

51 使用 RadioButtonList 控制項建立單選項目清單
如同 CheckBox 與 CheckBoxList 的差異, 除了使用 RadioButton 建立單選選項, ASP.NET 也提供了 RadioButtonList 控制項, 可以方便地建立群組性的單選項目, 而且也具備動態增刪項目的功能。

52 使用 RadioButtonList 控制項建立單選項目清單
RadioButtonList 與 CheckBoxList 都是繼承同一類別而產生的控制項, 所以兩者的屬性、方法都相同, 在 VWD 中建立的方式也一樣, 故不再贅述。此處將另外說明下面 3 個屬性：

53 使用 RadioButtonList 控制項建立單選項目清單

54 使用 RadioButtonList 控制項建立單選項目清單
當使用者選擇第三個項目時, R1.SelectedIndex 即為 “2” (索引編號的起始數字為 0), R1.SelectedValue 為 “c”, 而 R1.SelectedItem.Text 為 “ItemC”, R1.SelectedItem.Value 則是 “c”。

55 使用 RadioButtonList 控制項建立單選項目清單
所以只要使用上面 3 個屬性就可以很快速的取得使用者選擇的項目。這些屬性在 CheckBoxList 控制項中一樣可以使用, 不過因為 CheckBoxList 的項目允許多選, 所以實用性就不如單選的 RadioButtonList 來得好。 以下將使用 RadioButtonList 控制項, 製作一個與前面程式 Ch05-02.aspx 相同功能的程式, 請如右在 Web Form 建立控制項並設定屬性：

56 使用 RadioButtonList 控制項建立單選項目清單

57 使用 RadioButtonList 控制項建立單選項目清單
然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 並輸入以下程式碼：

58 使用 RadioButtonList 控制項建立單選項目清單

59 使用 RadioButtonList 控制項建立單選項目清單
在瀏覽器檢視執行結果

60 使用 RadioButtonList 控制項建立單選項目清單
這個程式比之前的 Ch05-02.aspx 多了顯示使用者答案的功能, 因為 RadioButtonList 可以很方便地取得使用者選擇的項目, 如果要以 RadioButton 達到相同功能, 就必須逐一去讀取所有項目是否被選擇。

61 使用 RadioButtonList 控制項建立單選項目清單
另外提醒您, 如果使用者沒有選擇任何項目時, 一旦存取 RadioButtonList.SelectedItem 便會產生程式錯誤。 為了避免這個問題, 您可以判斷 RadioButtonList.SelectedIndex, 若其值小於 0 便表示使用者沒有選擇任何項目。

62 5 - 3 DropDownList、ListBox 控制項－下拉式選單與選項列表
除了前面介紹的多選與單選項目外, 網頁程式也經常會使用下拉式選單與選項列表讓使用者選擇資料： 本節將說明這兩種控制項的使用方式。

63 DropDownList 控制項－下拉式選單
DropDownList 與 CheckBoxList 都是繼承同一類別而產生的控制項, 所以兩者的屬性、方法都相同, 在 VWD 中建立的方式也一樣, 故請參閱 5-2 節, 此處不再贅述。 以下直接示範 DropDownList 的使用方式, 下面是轉換網頁的下拉式選單, 當使用者選擇之後會直接轉往不同的網頁：

64 DropDownList 控制項－下拉式選單

65 DropDownList 控制項－下拉式選單

66 DropDownList 控制項－下拉式選單

67 DropDownList 控制項－下拉式選單

68 DropDownList 控制項－下拉式選單
當網頁載入時, 下拉式選單預設會選取第一個項目, 所以當使用者選擇其他項目時, 代表選擇的項目已經變更, 此時 DropDownList 會產生 SelectedIndexChanged 事件, 因為前面已經設定控制項自動 PostBack, 因此只要建立對應的事件處理程序, 判斷使用者選了哪一項目即可。

69 DropDownList 控制項－下拉式選單
請在設計模式下雙按 DropDownList 控制項建立 DropDownList1_SelectedIndexChanged 程序, 並輸入如下程式：

70 DropDownList 控制項－下拉式選單

71 ListBox 控制項－選項列表 ListBox 與 CheckBoxList 都是繼承同一類別而產生的控制項, 所以兩者的屬性、方法大半都相同, 在 VWD 中建立的方式也一樣, 故請參閱 5-2 節, 此處不再贅述。

72 ListBox 控制項－選項列表 ListBox 還可以依照開發者的設定, 允許多選或者只能單選：

73 ListBox 控制項－選項列表 要設定 ListBox 控制項允許多選或者只能單選, 只要在其 SelectionMode 屬性內設定即可：

74 ListBox 控制項－選項列表 為示範 ListBox 的使用方式, 我們在網頁中建立如下內容：

75 ListBox 控制項－選項列表 然後在設計模式下雙按 ListBox1 控制項, 建立 ListBox1_SelectedIndexChanged 程序, 在其中輸入以下程式碼：

76 ListBox 控制項－選項列表

77 ListBox 控制項－選項列表 在瀏覽器檢視執行

78 ListBox 控制項－選項列表

79 5 - 4 建立月曆的 Calendar 控制項 為了方便使用者瀏覽與選取日期, 網頁程式中經常會放置月曆, 使用者只要點選就可以將日期輸入程式中。 這種作法除了讓使用者不用自行輸入日期以外, 對於程式設計者而言, 代表再也不用去判讀 “96/11/07”、“ ”...等眾多格式。 所以不論是對於使用者或是程式設計者, 月曆都具備相當便利的優點。

80 使用 Calendar 控制項建立月曆 請在 VWD 中如下操作便可以使用 Calendar 控制項建立月曆：

81 使用 Calendar 控制項建立月曆

82 使用 Calendar 控制項建立月曆 設定完成後, 請在瀏覽器檢視執行結果

83 使用 Calendar 控制項建立月曆 前面設定了 SelectionMode 屬性為 “DayWeekMonth”, 表示允許使用者以日、週、月為單位選擇日期, 所以上面月曆可以使用左邊的 > 與 >> 鈕來選擇整週或整月。 該屬性預設值為 "Day", 表示只能以日來選擇, 此時月曆左邊便不會有整週與整月按鈕了, 同理, "DayWeek" 代表可以選日與週；若是設定為 "None", 則月曆只能瀏覽, 無法用來選擇日期。

84 使用 Calendar 控制項建立月曆 當您使用自動格式化功能設定月曆的外觀樣式時, 會發現用來切換至前後月份的月份巡覽按鈕有兩種不同的形式, 一種是前面的 < 與 > 鈕, 另一種則是如下會顯示月份名稱的形式：

85 使用 Calendar 控制項建立月曆 這個樣式是由 NextPrevFormat 屬性來控制, 當設定為 “ShortMonth” 或 "FullMonth" 時, 月份巡覽按鈕就會顯示月份名稱；若設定為 "CustomText", 就會依照 NextMonthText 與 PrevMonthText 屬性所設定的文字來顯示前後月份。

86 使用 Calendar 控制項建立月曆 除了使用 ASP.NET 預先設計好的樣式外, Calendar 控制項也有相當多屬性可以自訂外觀、格式、顏色...等, 這些在 VWD 的屬性窗格下面都有說明, 只要簡單測試即能瞭解, 所以本書不另行說明。

87 常用的 Calendar 控制項屬性 Calendar 控制項中被選擇的日期是以如下的屬性表示：

88 常用的 Calendar 控制項屬性

89 常用的 Calendar 控制項屬性 上面可以看到, Calendar 內可以用 ID.SelectedDates (index) 存取被選擇的日期, 其中 index 是以 0 起始的索引編號, 也就是說所有被選擇的日期都已經被放置於 ID.SelectedDates 這個集合內了。 如果想要知道總共被選擇了幾天, 可以使用 ID.SelectedDates.Count 屬性來取得。 如果月曆只允許選擇單日, 那麼直接使用 ID.SelectedDate 即可得知使用者選擇了哪一天。

90 常用的 Calendar 控制項屬性 下面筆者將使用 Calendar 控制項製作月曆, 然後使用程式讀取使用者選了什麼日期, 請建立如下控制項並設定屬性：

91 常用的 Calendar 控制項屬性

92 常用的 Calendar 控制項屬性 然後在設計模式下雙按 Calendar 控制項, 建立 Calendar1_SelectionChanged 程序, 這個程序會在月曆上選擇日期改變時觸發, 此時代表使用者已經選擇日期了。請在 Calendar1_SelectionChanged 程序中輸入以下程式碼：

93 常用的 Calendar 控制項屬性

94 常用的 Calendar 控制項屬性 在瀏覽器檢視執行結果

95 常用的 Calendar 控制項屬性 如果月曆允許使用者選擇整週、或整月的日期時, 因為天數不只一天, 所以 ID.SelectedDate 就不夠用了。 必須使用 ID.SelectedDates(index) 與 ID.SelectedDates.Count 來取得所有被選擇的日期。

96 常用的 Calendar 控制項屬性 請在 VWD 中將 Calendar1 控制項的 SelectionMode 屬性設定為 “DayWeekMonth”, 讓使用者可以選擇整週或整月的日期, 然後在 Calendar1_SelectionChanged 程序中輸入以下程式碼：

97 常用的 Calendar 控制項屬性

98 常用的 Calendar 控制項屬性 在瀏覽器檢視執行結果

99 5 - 5 建立橫幅廣告輪播的 AdRotator 控制項
為了達到宣傳與廣告的效果, 許多網站會擺放橫幅圖片, 希望能在使用者一進入就吸引其目光：

100 建立橫幅廣告輪播的 AdRotator 控制項
通常橫幅廣告都會有多張圖片, 每個不同連線隨機送出不同圖片, 不但能同時進行多項宣傳, 也能讓網站比較不那麼單調。 為了可以隨機送出不同圖片, 以往必須撰寫程式才能達到, 不過在 ASP.NET 中, 不需寫程式就可以輕鬆製作動態的橫幅廣告效果。

101 在 ASP.NET 建立橫幅廣告輪播的流程 以下是在網頁上建立橫幅廣告輪播的流程：

102 在 ASP.NET 建立橫幅廣告輪播的流程 想當然爾, 要先有圖片才能製作廣告輪播的機制, 建議圖片最好大小相同, 才不會因為圖片忽大忽小而影響版面。 圖片製作完成後, 便需要製作資料來源設定, 其目的是為了讓 ASP.NET 知道要使用哪些圖片進行廣告輪播。

103 在 ASP.NET 建立橫幅廣告輪播的流程 目前 ASP.NET 支援以 XML、Access、SQL Server 做為資料來源設定的存放媒體, 本章將以 XML 檔案為例說明。設定好資料來源, 最後便可以使用控制項來建立廣告輪播機制。

104 使用 AdRotator 控制項建立橫幅廣告輪播
目前筆者已經製作好三張圖片, 要用來進行廣告輪播。使用圖片前必須先將圖片檔案加入網站, 這樣 ASP.NET 才能存取得到這些圖片：

105 使用 AdRotator 控制項建立橫幅廣告輪播

106 使用 AdRotator 控制項建立橫幅廣告輪播
因為我們要使用 XML 做為資料來源的設定檔, 所以接著必須在方案總管窗格內, 如下新增一個 XML 檔案：

107 使用 AdRotator 控制項建立橫幅廣告輪播

108 使用 AdRotator 控制項建立橫幅廣告輪播
XML 檔案與 HTML 具有類似的格式, 都是以標籤定義各個項目, 如果您不熟悉 XML 語法, 可參閱本書附錄 C 的說明。 不過即使不懂 XML 語法, 只要依照隨後的說明與格式來編輯設定檔, 一樣可以順利製作廣告輪播機制。 請開啟剛才新增的 XML 檔案, 依照下面格式進行圖片來源設定：

109 使用 AdRotator 控制項建立橫幅廣告輪播

110 使用 AdRotator 控制項建立橫幅廣告輪播
在此設定檔中, <ImageUrl>...</ImageUrl> 標籤負責定義圖片的位置與檔案名稱, 請務必確定位置或檔名無誤, 否則 ASP.NET 會因為找不到檔案而無法送出圖片。 如果有多張圖片, 請依照上面格式新增 <Ad> <ImageUrl>...</ImageUrl></Ad> 項目即可。 編輯好 XML 並存檔後, 請依下面方式操作即可使用 AdRotator 控制項製作廣告輪播機制：

111 使用 AdRotator 控制項建立橫幅廣告輪播

112 使用 AdRotator 控制項建立橫幅廣告輪播

113 使用 AdRotator 控制項建立橫幅廣告輪播

114 使用 AdRotator 控制項建立橫幅廣告輪播
如此即完成廣告輪播的機制, 請在瀏覽器檢視執行結果：

115 設定出現次數的權重與連結網址 雖然各圖片是隨機送出的, 但是您可能希望某些圖片『比較』常出現, 某些圖片出現的機率少一點, 此時只要設定圖片的『權重』即可達成此目的。例如設定圖片 A 權重為 50、圖片 B 權重 10、圖片 C 權重 20, 此時各圖片出現的機率如下： 圖片 A： 50 / ( ) = 62.5% 圖片 B： 10 / ( ) = 12.5% 圖片 C： 20 / ( ) = 25%

116 設定出現次數的權重與連結網址 這表示平均每 100 次連線, 圖片 A 會出現 62.5 次, 所以權重可以讓重點宣傳圖片的出現機率比其他高。 另外您可能也會想設定各圖片連結到不同網址, 這樣當使用者看到有興趣的廣告時, 便可以直接點選進入相關網頁。 為了製作上面兩種功能, 必須在廣告的各 <Ad>...</Ad> 標籤中加入 <Impressions> 與 <NavigateUrl> 標籤設定：

117 設定出現次數的權重與連結網址

118 設定出現次數的權重與連結網址

119 設定出現次數的權重與連結網址 筆者在上面設定 banner1.gif 的權重為 10, 使用者點選時會連結到 這個網址。 編輯完成 XML 設定檔之後, 請依照前面說明, 使用 AdRotator 控制項並設妥資料來源, 即可製作不同權重、可連結其他網址的廣告輪播機制：

120 設定出現次數的權重與連結網址

121 5 - 6 使用 Panel 控制項同時控制多個控制項
您可以將 Panel 控制項看成一個容器 (Container), 裡面可以裝入許多其他控制項或網頁元件 (甚至也可以內含其他 Panel 控制項), 將多個控制項與元件裝在一起之後, 便可以視為一個單位進行統一控制。 本章將為您說明 Panel 控制項的優點與使用方式。

122 為什麼需要 Panel 控制項？ 假設我們想要製作以下功能：

123 為什麼需要 Panel 控制項？ 上面的功能並不困難, 只要使用本書第 4 章的觀念即可完成。
不過您應該已經想到, 當我們要開啟或關閉搜尋欄位時, 有 3 個 TextBox、3 個 Button 與 3 個 Label 控制項, 也就是說總共有 9 個控制項需要設定顯示或隱藏, 程式雖然不難寫, 但寫起來很麻煩！

124 為什麼需要 Panel 控制項？ 還記得本章第一句話嗎？Panel 控制項可以看成一個容器, 如果將這些控制項裝入一個 Panel 控制項, 便可以直接針對 Panel 設定顯示或隱藏, 只要 1 行程式碼就可以達到目的了。

125 建立 Panel 控制項 要以 Panel 控制項實作上面功能, 請如下在 Web Form 建立控制項並設定屬性：

126 建立 Panel 控制項

127 建立 Panel 控制項 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

128 建立 Panel 控制項

129 建立 Panel 控制項 只要修改 Panel1.Visible 屬性的值, 就可以一次控制 Panel1 內所有控制項顯示或隱藏, 而不需要逐一設定各個控制項了。

130 5 - 7 使用 MultiView 與 View 控制項在同一區域顯示不同內容
MultiView 與 View 控制項的關係以及 ActiveViewIndex 屬性 MultiView 與 View 控制項的使用方式 製作 Tab 分頁功能

131 MultiView 與 View 控制項的用途
程式中可能會需要在同一個區域依照狀況顯示不同的文字或控制項, 例如會員登入區域在登入後會改成顯示登出連結, 或是製作類似右圖的分頁功能時, 都會需要將許多控制項放在同一區域內, 然後控制其是否顯示：

132 MultiView 與 View 控制項的用途

133 MultiView 與 View 控制項的用途
如果要自行在程式中逐一控制各控制項是否顯示, 可說是相當麻煩的作法, 所以 ASP.NET 特別提供 MultiView 與 View 控制項, 讓我們可以輕鬆製作此類型的功能。

134 MultiView 與 View 控制項的關係以及 ActiveViewIndex 屬性

135 MultiView 與 View 控制項的關係以及 ActiveViewIndex 屬性
從上面可以看到, MultiView 控制項是一個可以放置多個 View 控制項的容器, 而 View 控制項則是放置其他控制項的容器, 然後透過 MultiView 控制項的 ActiveViewIndex 屬性, 控制現在要顯示哪一個 View 控制項, 便可以達到同一區域依狀況顯示不同控制項的功能。

136 MultiView 與 View 控制項的關係以及 ActiveViewIndex 屬性
ActiveViewIndex 屬性內設定以 0 為啟始的索引數字, 以上圖為例, 若 ActiveViewIndex = 1, 表示應顯示 View 控制項 B (第二個控制項)。 若設定為 -1, 則代表全部 View 控制項都不顯示於網頁上。

137 MultiView 與 View 控制項的關係以及 ActiveViewIndex 屬性
此外, MultiView 與 View 控制項並無法設定寬、高、背景顏色等外觀屬性, 所以如果您想要控制 MultiView 與 View 控制項的外觀, 可以將 MultiView 控制項放在 Panel 控制項內, 這樣便可以藉由 Panel 控制項的大小、顏色…等屬性來修改整體外觀。

138 MultiView 與 View 控制項的關係以及 ActiveViewIndex 屬性

139 MultiView 與 View 控制項的使用方式
本節將製作一個會員登入登出的例子, 讓您瞭解 MultiView 與 View 控制項的使用方式。請在網頁中建立如下 MultiView 與 View 控制項：

140 MultiView 與 View 控制項的使用方式

141 MultiView 與 View 控制項的使用方式
在設計模式下雙按 Button1 與 Button2 按鈕, 建立 Button1_Click 與 Button2_Click 程序, 在其中輸入以下程式碼即可：

142 MultiView 與 View 控制項的使用方式

143 MultiView 與 View 控制項的使用方式

144 MultiView 與 View 控制項的使用方式
在瀏覽器檢視執行結果

145 製作 Tab 分頁功能 如果要製作 Tab 分頁的功能, 在 ASP.NET 2.0 中最簡單的方法是以一個 MultiView 搭配 Menu 控制項：

146 製作 Tab 分頁功能 只要一行程式碼即可輕鬆完成 Tab 分頁功能：

147 製作 Tab 分頁功能 在瀏覽器檢視執行結果

148 製作 Tab 分頁功能 除了本節介紹的用途外, MultiView 與 View 控制項也可用來建立簡單的上一頁、下一頁的步驟式程序, 不過這種步驟式程序可採用下一節介紹的 Wizard 控制項來製作, 所以此處不多加說明。

149 5 - 8 以 Wizard 控制項製作步驟式程序 Wizard 控制項的用途 Wizard 控制項的使用方式
Wizard 控制項的步驟類型與 ActiveStepIndex 屬性 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟 Wizard 控制項的外觀格式

150 Wizard 控制項的用途 步驟式的程序目前已經成為相當常見的介面：

151 Wizard 控制項的用途 以往要製作這種步驟式的程序並不輕鬆, 程式中要自行撰寫所有步驟的畫面, 然後判斷目前所在步驟做出相對應的處理, 可說相當繁雜。 不過 ASP.NET 提供了一個方便的 Wizard 控制項, 可以讓我們很輕鬆地製作步驟式的程序。

152 Wizard 控制項的使用方式 本節先使用一個簡單的實例, 讓您能大致瞭解 Wizard 控制項的使用方式。假設要製作一個具有 3 個步驟的程式： 步驟 1 請使用者輸入姓名 步驟 2 輸入電話 最後步驟則顯示使用者所輸入的姓名與電話 請如下在網頁建立 Wizard 控制項並設定屬性：

153 Wizard 控制項的使用方式

154 Wizard 控制項的使用方式

155 Wizard 控制項的使用方式

156 Wizard 控制項的使用方式

157 Wizard 控制項的使用方式

158 Wizard 控制項的使用方式

159 Wizard 控制項的使用方式

160 Wizard 控制項的使用方式 此時會建立一個 Wizard1_FinishButtonClick 程序, 這個程序會由完成鈕的 Click 事件所觸發, 也就是當使用者按下完成鈕時, 就會執行這個程序。請在 Wizard1_FinishButtonClick 程序中輸入以下程式碼：

161 Wizard 控制項的使用方式

162 Wizard 控制項的使用方式 在瀏覽器檢視執行結果

163 Wizard 控制項的使用方式

164 Wizard 控制項的使用方式

165 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性
依照不同的類型, Wizard 控制項會顯示不一樣的按鈕, 而最後一個 Complete 步驟表示程序完成, 所以不會再有任何步驟式的按鈕。

166 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性
設定步驟時, 可以在 StepType 屬性設定該步驟的類型。 一般情況下只需指定 Complete 步驟, ASP.NET 會自動依照順序來判斷其他步驟的類型：

167 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性

168 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性
假設上面 Wizard 控制項的 ID 為 Wizard1, 則使用者進行到 Step 3 時, Wizard1.ActiveStepIndex 的值即為 2, 所以程式中可由此屬性判斷目前所在的步驟。

169 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性
此外, 如果以程式修改 Wizard1.ActiveStepIndex 屬性值, 例如設定 Wizard1.ActiveStepIndex = 1, 便可以直接跳至步驟 2。 除了上面作用外, ActiveStepIndex 也設定程式一開始執行時, 使用者會看到的第一個畫面, 所以如果在 Wizard 控制項的屬性窗格設定 ActiveStepIndex 的值為非 0 數字, 使用者連線網頁看到的第一個畫面就不會是步驟 1：

170 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性

171 Wizard 控制項的步驟類型與 ActiveStepIndex 屬性
由於在設計模式下切換步驟時, ActiveStepIndex 會自動指向目前的步驟, 所以請注意, 在網頁正式上線運作前, 請記得在 VWD 中切換回步驟 1, 或是手動更改 ActiveStepIndex 的屬性值, 否則連線執行程式時就不會從步驟 1 開始。

172 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟
瞭解步驟的類型與 ActiveStepIndex 屬性的用途後, 下面例子將示範如何使用 ActiveStepIndex 判斷目前所在的步驟, 並且說明如何跳至某一步驟。 假設要製作如下的網頁：

173 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

174 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

175 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

176 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟
請在網頁中建立 Wizard 控制項並設定屬性：

177 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

178 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

179 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

180 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

181 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

182 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟
FinishButtonClick 前面已經提到是按完成鈕的事件, 而 NextButtonClick 則是按下一頁鈕所產生的事件, 上面步驟會建立 Wizard1_FinishButtonClick 與 Wizard1_NextButtonClick 程序, 分別處理這兩個事件。 請在這兩個程序中輸入以下程式碼：

183 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

184 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟

185 使用 ActiveStepIndex 判斷目前步驟或跳至某一步驟
上面程式碼第 15 行使用 Wizard1.ActiveStepIndex 判斷目前所在的步驟, 如果在步驟 2 而且 NoPass 這個欄位已被勾選, 便於第 17 行設定密碼欄位為空白, 然後再於第 19 行設定 Wizard1.ActiveStepIndex = 3, 直接跳到步驟 4。

186 Wizard 控制項的外觀格式 前面已經提及, ASP.NET 已內建許多樣式可以直接套用成為 Wizard 控制項的外觀：

187 Wizard 控制項的外觀格式

188 Wizard 控制項的外觀格式 Navigation 是上一頁、下一頁、完成鈕所在的區域, 所以上圖中轉換為...Template 連結可以將各步驟按鈕區域與 SideBar 目前的外觀先轉換為樣版 (Template), 然後就能使用最下面編輯樣版連結修改其外觀。 以下將示範如何修改 SideBar 的外觀, 請先按轉換為 SideBarTemplate, 然後選擇編輯樣版, 如下操作：

189 Wizard 控制項的外觀格式

190 Wizard 控制項的外觀格式

191 Wizard 控制項的外觀格式

192 Wizard 控制項的外觀格式 其他區域的外觀修改方式也都是使用類似的方式, 您可以依照上面的說明, 自行設定想要的外觀。

193 5 - 9 動態產生表格的 Table 控制項 表格是網頁上相當重要的元件, 可以分欄分行清楚地條列多個項目。一般靜態的表格使用 HTML 語法即可製作, 另外也可以在 VWD 選單上執行『配置 / 插入表格』命令, 亦可方便地產生表格。 不過如果要以程式動態產生表格, 便需要使用 ASP.NET 的 Table 控制項, 本節將為您說明 Table 控制項的使用方式。

194 Table 控制項如何製作表格 在實際使用 Table 控制項之前, 必須先瞭解 Table 控制項如何處理表格的列與欄, 以下為示意圖：

195 Table 控制項如何製作表格 上面是一個 2 橫列 3 直欄的表格, 對於 Table 控制項而言, 這個表格是由 2 個 Row 所組成, 而第一、二個 Row 都包含了 3 個 Cell。 所以使用 Table 控制項時, 應該先在表格中產生 Row, 然後在 Row 中放置 Cell, 就可以製作出表格。 產生 Row 與 Cell 的方式有兩種：一種是使用 VWD 的圖形介面, 另一種則是以程式來產生, 隨後會分別說明這兩種方式。

196 使用 VWD 製作表格 請在 VWD 中如下操作便可以使用 Table 控制項製作表格：

197 使用 VWD 製作表格

198 使用 VWD 製作表格 回到 TableRow 編輯器後可按加入鈕繼續新增 Row, 完成後按確定鈕關閉對話窗

199 使用 VWD 製作表格

200 使用程式動態新增欄位 除了使用 VWD 製作表格並輸入內容外, Table 控制項也具備動態新增與修改欄位的功能, 本節先介紹如何新增欄位內容, 修改欄位的部分會於下一節說明。 前面曾經提到 Table 控制項所產生的表格是由 Row 與 Cell 所組成, 在 ASP.NET 中已經定義好 TableRow 與 TableCell 兩種類別可用來產生這兩個物件。

201 使用程式動態新增欄位 因此新增表格欄位前, 應先以這兩個類別建立 NewRow 與 NewCell 物件 (您可任意指定物件名稱), 然後依照下面示意圖將欄位新增至表格：

202 使用程式動態新增欄位 從圖中可以看到, NewRow 會成為表格新的橫列, 而 NewCell 則是 TableRow 中的欄位, 至於欄位內容就要以 NewCell.Text 屬性來設定。 整個流程可以寫成以下程式碼：

203 使用程式動態新增欄位

204 使用程式動態新增欄位 瞭解了新增欄位所需使用的相關物件、屬性與方法後, 隨後用一個可加入自訂欄位內容的範例來說明：

205 使用程式動態新增欄位

206 使用程式動態新增欄位 為了製作上述功能的程式, 請如下在 Web Form 建立控制項並設定屬性：

207 使用程式動態新增欄位 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

208 使用程式動態新增欄位

209 使用程式動態新增欄位

210 使用程式動態新增欄位 各控制項的 Text 屬性都是 .NET Framework 的 String 類別的物件, 此類字串物件都具有一個 Split() 方法可以用來切割字串, 使用時必須以分隔字元為參數, 而切割後會回傳一個字串陣列, 所以程式第 13 行將 TextBox1 內的字串切割後指定給陣列 AStrings。

211 使用程式動態新增欄位 請注意, 程式第 27 行產生 NewCell 物件的敘述務必放在迴圈內, 這樣在每一輪迴圈執行時都會產生新的 NewCell 物件；若放在迴圈外, 則會因為 NewCell 物件已經加入過 NewRow 物件, Add() 方法便不會再將同一物件加入新欄位中。

212 使用程式動態修改欄位內容 在 Table 控制項所建立的表格中, 各列與各欄都是以集合的型別所組成：

213 使用程式動態修改欄位內容 索引皆以 0 為起始數字, 假設 Table 控制項的 ID 為 Table1, 則第 1 列為 Table1.Rows.Item(0), 第 2 列第 1 欄為 Table1.Rows.Item(1).Cells.Item(0)。 Rows 與 Cells 都有一個 Count 屬性可以取得列數與欄數, 例如若想知道 Table1 共有幾列, 可以用 Table1.Rows.Count 屬性取得, 而 Table1.Rows.Item(1).Cells.Count 屬性則表示第 2 列的欄位數目。

214 使用程式動態修改欄位內容 至於各欄的 Text 屬性便代表該欄的內容, 例如 Table1.Rows.Item(0).Cells.Item(2).Text 為第 1 列第 3 欄的內容。這個屬性也就是前面所使用的 NewCell.Text, 只是表示的方法不同而已。 所以若需取得或修改某欄位的值, 只要使用 Text 屬性即可。

215 使用程式動態修改欄位內容 瞭解如何存取各欄位的內容後, 下面將以實例說明使用程式動態修改欄位內容。筆者想要製作以下功能：

216 使用程式動態修改欄位內容

217 使用程式動態修改欄位內容 為了製作上述功能的程式, 請如下在 Web Form 建立控制項並設定屬性：

218 使用程式動態修改欄位內容 然後在設計模式下雙按 Button1 按鈕, 建立 Button1_Click 程序, 在其中輸入以下程式碼：

219 使用程式動態修改欄位內容