第 14 章進階控制項與檔案上傳

第14章進階控制項與檔案上傳

第14章進階控制項與檔案上傳 • 14-1 Calendar控制項 • 14-2 AdRotator控制項 • 14-3 MultiView控制項 • 14-4 Wizard控制項 • 14-5 檔案上傳控制項

14-1 Calendar控制項 • 14-1-1 建立Calendar控制項 • 14-1-2 Calendar控制項的事件處理

14-1 Calendar控制項 • ASP.NET進階控制項就是指進階使用者介面控制項，也稱為「豐富控制項」（Rich Controls），豐富控制項是指伺服端控制項提供複雜的使用者介面，在瀏覽端需要產生複雜的HTML標籤或程式碼來實作。 • 換句話說，豐富控制項可以在網頁產生進階使用者介面，而不需要撰寫任何HTML標籤或程式碼，例如：Calendar、AdRotator、MultiView和Wizard控制項。

14-1-1 建立Calendar控制項-說明 • Calendar控制項可以在網頁顯示萬年曆，並且提供屬性來指定月曆的顯示方式，或以事件處理來執行日期等相關操作。

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

14-1-1 建立Calendar控制項-屬性

14-1-1 建立Calendar控制項-範例網站 ASP.NET網站：Ch14-1-1 • 在ASP.NET網頁的Calendar控制項指定自動格式化的樣式，並且修改屬性來更改顯示外觀，如下圖所示：

14-1-2 Calendar控制項的事件處理-相關屬性 • Calendar控制項關於事件處理的相關屬性，其說明如下表所示：

14-1-2 Calendar控制項的事件處理-相關事件 • Calendar控制項提供三種事件，其說明如下表所示：

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

14-1-2 Calendar控制項的事件處理-SelectionChanged事件 protected void Calendar1_SelectionChanged(object sender, EventArgs e) { switch (Calendar1.SelectedDates.Count) { case 0: // None lblOutput.Text = "沒有選擇日期資料....."; break; case 1: // Day lblOutput.Text = "選擇的日期: " + Calendar1.SelectedDate.ToShortDateString(); break; case 7: // Week lblOutput.Text = "選擇星期的開始: " + Calendar1.SelectedDate.ToShortDateString(); break; default: // Month lblOutput.Text = "選擇月的開始: " + Calendar1.SelectedDate.ToShortDateString(); break; } }

14-1-2 Calendar控制項的事件處理-VisibleMonthChanged事件 protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e) { if (e.NewDate.Month > e.PreviousDate.Month) { lblOutput.Text = "下一月"; } else { lblOutput.Text = "前一月"; } }

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

14-2 AdRotator控制項 • 14-2-1 建立XML文件的設定檔 • 14-2-2 AdRotator控制項的使用

14-2-1 建立XML文件的設定檔-內容 <?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>images/F5474 .gif</ImageUrl> <Width>140</Width> <Height>190</Height> <NavigateUrl>Details.aspx?Id=F5474</NavigateUrl> <AlternateText>F5474</AlternateText> <Keyword>Web</Keyword> <Impressions>25</Impressions> <Caption>XML網頁製作</Caption> </Ad> …………………… </Advertisements>

14-2-1 建立XML文件的設定檔-標籤說明 • 定義廣告圖片的相關子標籤，其說明如下表所示：

14-2-1 建立XML文件的設定檔-自訂標籤 • 在XML文件可以新增自訂的子標籤。例如：新增<Caption>標籤，如下所示： <Ad> <ImageUrl>images/FS499 .gif</ImageUrl> <Width>140</Width> <Height>190</Height> <NavigateUrl>Details.aspx?Id=FS499</NavigateUrl> <AlternateText>FS499</AlternateText> <Keyword>Web</Keyword> <Impressions>50</Impressions> <Caption>ASP.NET網頁製作</Caption> </Ad>

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

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

14-2-2 AdRotator控制項的使用-常用屬性 AdRotator控制項的常用屬性

14-2-2 AdRotator控制項的使用-AdCreated事件 • AdRotator控制項產生廣告圖片時會產生AdCreated事件，我們可以建立此事件的處理程序來顯示額外資訊，如下所示： lblOutput.Text = e.AdProperties["Caption"].ToString(); lblOutput.Text += "連結網址: " + e.NavigateUrl; • 因為上一節<Ad>元素有新增<Caption>子標籤，所以可以使用AdProperties物件來取得其值，其參數就是自訂標籤Caption的名稱，然後取得XML標籤的屬性NavigateUrl的值（<Ad>子標籤內容即屬性值）。

14-2-2 AdRotator控制項的使用-範例網站 ASP.NET網站：Ch14-2 • 在ASP.NET網頁AdRotator控制項指定相關屬性後，建立顯示圖書封面的廣告圖片，並且指定過濾條件為Programming，如下圖所示：

14-3 MultiView控制項 • 14-3-1 MultiView控制項的基本使用 • 14-3-2 建立標籤頁

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

14-3-1 MultiView控制項的基本使用-新增MultiView控制項 • 在「工具箱」視窗展開【標準】區段，選【MultiView】控制項，然後拖拉至<div>標籤即可插入MultiView控制項，如下圖所示：

14-3-1 MultiView控制項的基本使用-新增View控制項 • 然後在MultiView控制項中插入3 X 1的表格，我們準備在每一列插入一個View控制項，如下圖所示：

14-3-1 MultiView控制項的基本使用-常用屬性 MultiView控制項的常用屬性 • 例如：我們可以在Page_Load()事件處理程序指定顯示第1個View控制項，如下所示： MultiView1.ActiveViewIndex = 0; • 上述程式碼可以指定MultiView控制項顯示第1個View控制項，即索引值0，值如為-1就是不顯示任何View控制項。

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

14-3-1 MultiView控制項的基本使用-範例網站 ASP.NET網站：Ch14-3-1 • 在ASP.NET網頁MultiView控制項的每一個View控制項只顯示部分的表單內容，請指定CommandName屬性值來建立巡覽按鈕，最後在Label控制項顯示使用者輸入的內容，如下圖所示：

14-3-2 建立標籤頁-說明 • MultiView控制項只需結合Menu控制項，再加上一些CSS，就可以建立標籤頁（Tabbed Page）的使用介面，例如：Yahoo!首頁切換顯示主題的使用介面，如下圖所示：

14-3-2 建立標籤頁-範例網站 ASP.NET網站：Ch14-3-2 • 在ASP.NET網頁結合Menu、MultiView控制項和CSS來建立標籤頁的使用介面，如下圖所示：

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

14-4 Wizard精靈頁面控制項-新增Wizard控制項 • 在「工具箱」視窗展開【標準】區段，選【Wizard】控制項，然後拖拉至<div>標籤來插入Wizard控制項，預設有二個步驟。

14-4 Wizard精靈頁面控制項-屬性 • Wizard控制項的常用屬性，如下表所示：

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

14-4 Wizard精靈頁面控制項-WizardStep控制項屬性 • WizardStep控制項的常用屬性，如下表所示：

14-4 Wizard精靈頁面控制項-範例網站 ASP.NET網站：Ch14-4 • 在ASP.NET網頁自動格式化Wizard控制項後，建立類似第14-3-1節的三步驟精靈頁面，最後在Label控制項顯示使用者輸入的內容，如下圖所示：

14-5 檔案上傳控制項-說明 • 在ASP.NET網頁新增FileUpload控制項後，就可以使用此控制項來選擇上傳檔案，然後使用控制項物件的SaveAs()方法儲存成伺服端檔案，換句話說，就是執行客戶端的檔案上傳。 FileUpload控制項

14-5 檔案上傳控制項-新增FileUpload控制項 • 在「工具箱」視窗展開【標準】區段，選【FileUpload】控制項，然後拖拉至<div>標籤中表格的第1列的第2欄即可插入FileUpload控制項。

14-5 檔案上傳控制項-屬性 • FileUpload控制項的常用屬性，如下表所示：

14-5 檔案上傳控制項-方法 • 在FileUpload控制項選好上傳檔案後，就可以使用上表方法來上傳檔案，如下所示： path += upImage.FileName; upImage.SaveAs(Server.MapPath(path)); • 上述程式碼先使用FileName屬性建立伺服端檔案的相對路徑，然後使用Server.MapPath()方法取得實際路徑後，執行SaveAs()方法儲存成伺服端檔案，如下表所示：

14-5 檔案上傳控制項-範例網站 ASP.NET網站：Ch14-5 • 在ASP.NET網頁的FileUpload控制項選擇上傳圖檔後，按下按鈕將它上傳至ASP.NET網站的「images」資料夾，如下圖所示：

End

第 14 章進階控制項與檔案上傳