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

44
14 14 第第第第第第第第第第 第第第第第第第第第第

Upload: kirby-taylor

Post on 30-Dec-2015

35 views

Category:

Documents


0 download

DESCRIPTION

第 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 控制項. - PowerPoint PPT Presentation

TRANSCRIPT

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

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

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

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

14-1 Calendar14-1 Calendar 控制項控制項 14-2 AdRotator14-2 AdRotator 控制項控制項 14-3 MultiView14-3 MultiView 控制項控制項 14-4 Wizard14-4 Wizard 控制項控制項 14-5 14-5 檔案上傳控制項檔案上傳控制項

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

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

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

14-1 Calendar14-1 Calendar 控制項控制項 ASP.NETASP.NET 進階控制項就是指進階使用者介進階控制項就是指進階使用者介

面控制項,也稱為「豐富控制項」(面控制項,也稱為「豐富控制項」( Rich Rich ControlsControls ),豐富控制項是指伺服端控制),豐富控制項是指伺服端控制項提供複雜的使用者介面,在瀏覽端需要項提供複雜的使用者介面,在瀏覽端需要產生複雜的產生複雜的 HTMLHTML 標籤或程式碼來實作。標籤或程式碼來實作。

換句話說,豐富控制項可以在網頁產生進換句話說,豐富控制項可以在網頁產生進階使用者介面,而不需要撰寫任何階使用者介面,而不需要撰寫任何 HTMLHTML標籤或程式碼,例如:標籤或程式碼,例如:CalendarCalendar、、 AdRotatorAdRotator、、 MultiViewMultiView和和WizardWizard 控制項。控制項。

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

14-1-1 14-1-1 建立建立 CalendarCalendar 控制項控制項 --說明說明

CalendarCalendar 控制項可以在網頁顯示萬年曆,控制項可以在網頁顯示萬年曆,並且提供屬性來指定月曆的顯示方式,或並且提供屬性來指定月曆的顯示方式,或以事件處理來執行日期等相關操作。以事件處理來執行日期等相關操作。

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

14-1-1 14-1-1 建立建立 CalendarCalendar 控制項控制項 --建立建立

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

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

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

屬性 說明DayNameFormat 在月曆上方星期標題的顯示方式,可以是 Short、

Shortest、FirstLetter、FirstTwoLetters或 Full

NextPrevFormat 前一月/下一月超連結的顯示格式,可以是CustomText、ShortMonth和 FullMonth

NextMonthText 指定下一月超連結顯示的文字內容PrevMonthText 指定前一月超連結顯示的文字內容

ShowDayHeader 設定是否顯示月曆的星期標題,True顯示;False為不顯示

ShowGridLines 是否顯示框線,False為不顯示;True為顯示ShowNextPrevMonth 是否顯示前一月/下一月的超連結,True顯示;False

為不顯示ShowTitle 是否顯示標題列

TitleFormat 標題列格式,MonthYear顯示年月,或Month只顯示月

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

14-1-1 14-1-1 建立建立 CalendarCalendar 控制項控制項 -- 範例範例網站網站

ASP.NETASP.NET 網站:網站: Ch14-1-1Ch14-1-1 在在 ASP.NETASP.NET 網頁的網頁的 CalendarCalendar 控制項指定自動格控制項指定自動格

式化的樣式,並且修改屬性來更改顯示外觀,如式化的樣式,並且修改屬性來更改顯示外觀,如下圖所示:下圖所示:

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

14-1-2 Calendar14-1-2 Calendar 控制項的事件處控制項的事件處理理 --

相關屬性相關屬性 CalendarCalendar 控制項關於事件處理的相關屬性,控制項關於事件處理的相關屬性,

其說明如下表所示:其說明如下表所示:屬性 說明

SelectedDate 在月曆中選取的日期SelectedDates 在月曆中選取整個範圍的日期SelectionMode Calendar控制項的選取模式是一日 (Day)、一星期

(DayWeek)或整月(DayWeekMonth)SelectMonthText 當 SelectionMode屬性為 DayWeekMonth時,就可以指定

選取整月超連結的文字內容SelectWeekText 當 SelectionMode屬性為 DayWeek時,就可以指定選取星

期超連結的文字內容TodaysDate 今天的日期VisibleDate 指定 Calendar控制項顯示月份的日期,此日期的月份,就

是目前控制項顯示的月份

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

14-1-2 Calendar14-1-2 Calendar 控制項的事件處控制項的事件處理理 --

相關事件相關事件 CalendarCalendar 控制項提供三種事件,其說明如控制項提供三種事件,其說明如

下表所示:下表所示:事件 說明

DayRendar 當 Calendar控制項產生每一日的儲存格前,就會觸發此事件,可以使用此事件在儲存格顯示所需內容

SelectionChanged 當使用者選取一日、一星期或一整月,就會觸發此事件,視 SelectionMode屬性的選取模式而定

VisibleMonthChanged 當使用按前一月/下一月超連結時,就會觸發此事件

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

14-1-2 Calendar14-1-2 Calendar 控制項的事件處控制項的事件處理理 --

相關事件相關事件在在 VisibleMonthChangedVisibleMonthChanged 事件處理程序傳事件處理程序傳

入的參數是入的參數是 MonthChangedEventArgsMonthChangedEventArgs 物件。物件。其相關屬性說明如下表所示:其相關屬性說明如下表所示:屬性 說明

NewDate 這一月顯示的日期PreviousDate 前一月顯示的日期

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

14-1-2 Calendar14-1-2 Calendar 控制項的事件處控制項的事件處理理 --

SelectionChangedSelectionChanged 事件事件protected void Calendar1_SelectionChanged(object sender, EventArgs e)protected void Calendar1_SelectionChanged(object sender, EventArgs e){{ switch (Calendar1.SelectedDates.Count) {switch (Calendar1.SelectedDates.Count) { case 0: // Nonecase 0: // None lblOutput.Text = "lblOutput.Text = " 沒有選擇日期資料沒有選擇日期資料 .....";....."; break;break; case 1: // Daycase 1: // Day lblOutput.Text = "lblOutput.Text = " 選擇的日期選擇的日期 : " + : " + Calendar1.SelectedDate.ToShortDateString();Calendar1.SelectedDate.ToShortDateString(); break;break; case 7: // Weekcase 7: // Week lblOutput.Text = "lblOutput.Text = " 選擇星期的開始選擇星期的開始 : " + : " + Calendar1.SelectedDate.ToShortDateString();Calendar1.SelectedDate.ToShortDateString(); break;break; default: // Monthdefault: // Month lblOutput.Text = "lblOutput.Text = " 選擇月的開始選擇月的開始 : " + : " + Calendar1.SelectedDate.ToShortDateString();Calendar1.SelectedDate.ToShortDateString(); break;break; }}}}

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

14-1-2 Calendar14-1-2 Calendar 控制項的事件處控制項的事件處理理 --

VisibleMonthChangedVisibleMonthChanged 事件事件protected void Calendar1_VisibleMonthChanged(object protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)sender, MonthChangedEventArgs e){{ if (e.NewDate.Month > e.PreviousDate.Month)if (e.NewDate.Month > e.PreviousDate.Month) {{ lblOutput.Text = "lblOutput.Text = " 下一月下一月 ";"; }} elseelse {{ lblOutput.Text = "lblOutput.Text = " 前一月前一月 ";"; }}}}

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

14-1-2 Calendar14-1-2 Calendar 控制項的事件處控制項的事件處理理 --

範例網站範例網站ASP.NETASP.NET 網站:網站: Ch14-1-2Ch14-1-2 在在 ASP.NETASP.NET 網頁的網頁的 CalendarCalendar 控制項新增控制項新增

SelectionChangedSelectionChanged和和 VisibleMonthChangedVisibleMonthChanged 事事件處理程序,可以使用件處理程序,可以使用 22個個 DropDownListDropDownList 控制控制項選取目前的月份和選取模式,如下圖所示:項選取目前的月份和選取模式,如下圖所示:

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

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

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

14-2-1 14-2-1 建立建立 XMLXML 文件的設定檔文件的設定檔 -- 內內容容

<?xml version="1.0" encoding="utf-8" ?><?xml version="1.0" encoding="utf-8" ?><Advertisements><Advertisements> <Ad><Ad> <ImageUrl>images/F5474 .gif</ImageUrl><ImageUrl>images/F5474 .gif</ImageUrl> <Width>140</Width><Width>140</Width> <Height>190</Height><Height>190</Height> <NavigateUrl>Details.aspx?Id=F5474</NavigateUrl><NavigateUrl>Details.aspx?Id=F5474</NavigateUrl> <AlternateText>F5474</AlternateText><AlternateText>F5474</AlternateText> <Keyword>Web</Keyword><Keyword>Web</Keyword> <Impressions>25</Impressions><Impressions>25</Impressions> <Caption>XML<Caption>XML 網頁製作網頁製作 </Caption></Caption> </Ad></Ad>…………………………………………</Advertisements></Advertisements>

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

14-2-1 14-2-1 建立建立 XMLXML 文件的設定檔文件的設定檔 -- 標標籤說明籤說明

定義廣告圖片的相關子標籤,其說明如下定義廣告圖片的相關子標籤,其說明如下表所示:表所示:標籤 說明

ImageUrl 廣告圖片的 URL網址Width 顯示圖片的寬度Height 顯示圖片的高度

NavigateUrl 在圖片上按一下時,轉址的 URL網址AlternateText 若瀏覽程式無法顯示圖片時,顯示的替代文字,這也是游標

移到圖片上,顯示小方框的 ToolTip文字內容Keyword 過濾廣告圖片的關鍵字,例如:指定廣告類別為Web、

Programming等Impressions 設定廣告圖片相對其他廣告圖片的比重值,它是將所有

Impressions標籤值加總,然後計算每一張的比重,以決定亂數顯示圖片的頻率

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

14-2-1 14-2-1 建立建立 XMLXML 文件的設定檔文件的設定檔 -- 自自訂標籤訂標籤

在在 XMLXML 文件可以新增自訂的子標籤。例如:新增文件可以新增自訂的子標籤。例如:新增<Caption><Caption> 標籤,如下所示:標籤,如下所示:<Ad><Ad> <ImageUrl>images/FS499 .gif</ImageUrl><ImageUrl>images/FS499 .gif</ImageUrl> <Width>140</Width><Width>140</Width> <Height>190</Height><Height>190</Height> <NavigateUrl>Details.aspx?Id=FS499</NavigateUrl><NavigateUrl>Details.aspx?Id=FS499</NavigateUrl> <AlternateText>FS499</AlternateText><AlternateText>FS499</AlternateText> <Keyword>Web</Keyword><Keyword>Web</Keyword> <Impressions>50</Impressions><Impressions>50</Impressions> <Caption>ASP.NET<Caption>ASP.NET 網頁製作網頁製作 </Caption></Caption></Ad></Ad>

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

14-2-2 AdRotator14-2-2 AdRotator 控制項的使用控制項的使用 -- 說說明明

在在 ASP.NETASP.NET 網頁新增網頁新增 AdRotatorAdRotator 控制項後,控制項後,只需指定廣告圖片資訊的只需指定廣告圖片資訊的 XMLXML 文件,就可文件,就可以使用亂數以權值來隨機選擇顯示的廣告以使用亂數以權值來隨機選擇顯示的廣告圖片。圖片。

AdRotatorAdRotator 控制項除了使用控制項除了使用 XMLXML 文件外,文件外,我們也可以使用資料庫作為資料來源,也我們也可以使用資料庫作為資料來源,也就是建立資料來源控制項,此時資料表欄就是建立資料來源控制項,此時資料表欄位名稱就是位名稱就是 <Ad><Ad> 標籤的子標籤名稱。標籤的子標籤名稱。

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

14-2-2 AdRotator14-2-2 AdRotator 控制項的使用控制項的使用 -- 新新增增 AdRotatorAdRotator 控制項控制項

在「工具箱」視窗展開在「工具箱」視窗展開【【標準標準】】區段,選區段,選【【 AdRotatorAdRotator 】】控制項,然後拖拉至控制項,然後拖拉至 <div><div>標籤中表格的第標籤中表格的第 11 列即可插入列即可插入 AdRotatorAdRotator控制項。控制項。

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

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

AdRotatorAdRotator 控制項的常用屬性控制項的常用屬性

屬性 說明AdvertisementFile XML設定檔的路徑

KeywordFilter 過濾條件字串,即 XML設定檔<Keyword>標籤的值Target 廣告圖片轉址顯示的框架名稱

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

14-2-2 AdRotator14-2-2 AdRotator 控制項的使用控制項的使用 --AdCreatedAdCreated 事件事件

AdRotatorAdRotator 控制項產生廣告圖片時會產生控制項產生廣告圖片時會產生AdCreatedAdCreated 事件,我們可以建立此事件的處理程事件,我們可以建立此事件的處理程序來顯示額外資訊,如下所示:序來顯示額外資訊,如下所示:lblOutput.Text = lblOutput.Text =

e.AdProperties["Caption"].ToString();e.AdProperties["Caption"].ToString();lblOutput.Text += "lblOutput.Text += " 連結網址連結網址 : " + e.NavigateUrl;: " + e.NavigateUrl;

因為上一節因為上一節 <Ad><Ad> 元素有新增元素有新增 <Caption><Caption> 子標籤,子標籤,所以可以使用所以可以使用 AdPropertiesAdProperties 物件來取得其值,其物件來取得其值,其參數就是自訂標籤參數就是自訂標籤 CaptionCaption 的名稱,然後取得的名稱,然後取得XMLXML 標籤的屬性標籤的屬性 NavigateUrlNavigateUrl 的值(的值( <Ad><Ad> 子標子標籤內容即屬性值)。籤內容即屬性值)。

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

14-2-2 AdRotator14-2-2 AdRotator 控制項的使用控制項的使用 -- 範範例網站例網站

ASP.NETASP.NET 網站:網站: Ch14-2Ch14-2 在在 ASP.NETASP.NET 網頁網頁 AdRotatorAdRotator 控制項指定相關屬控制項指定相關屬

性後,建立顯示圖書封面的廣告圖片,並且指定性後,建立顯示圖書封面的廣告圖片,並且指定過濾條件為過濾條件為 ProgrammingProgramming ,如下圖所示:,如下圖所示:

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

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

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

14-3-1 MultiView14-3-1 MultiView 控制項的基本使控制項的基本使用用 --說明說明

MultiViewMultiView 控制項可以在網頁預先建立多個控制項可以在網頁預先建立多個 ViewView控制項,每次只顯示其中一個控制項,每次只顯示其中一個 ViewView 控制項,換句控制項,換句話說,我們可以切換顯示不同話說,我們可以切換顯示不同 ViewView 控制項的網頁控制項的網頁內容。內容。

MultiViewMultiView 控制項最常的應用是處理太長的控制項最常的應用是處理太長的 Web Web FormForm 表單,或是結合表單,或是結合 MenuMenu 控制項來建立標籤頁控制項來建立標籤頁的使用介面。的使用介面。 MultiView控制

View控制項

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

14-3-1 MultiView14-3-1 MultiView 控制項的基本使控制項的基本使用用 --

新增新增 MultiViewMultiView 控制項控制項 在「工具箱」視窗展開在「工具箱」視窗展開【【標準標準】】區段,選區段,選【【 MultiViewMultiView 】】控制項,然後拖拉至控制項,然後拖拉至 <div><div> 標籤即標籤即可插入可插入 MultiViewMultiView 控制項,如下圖所示:控制項,如下圖所示:

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

14-3-1 MultiView14-3-1 MultiView 控制項的基本使控制項的基本使用用 --

新增新增 ViewView 控制項控制項 然後在然後在 MultiViewMultiView 控制項中插入控制項中插入 3 X 13 X 1 的表的表

格,我們準備在每一列插入一個格,我們準備在每一列插入一個 ViewView 控制控制項,如下圖所示:項,如下圖所示:

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

14-3-1 MultiView14-3-1 MultiView 控制項的基本使控制項的基本使用用 --

常用屬性常用屬性MultiViewMultiView 控制項的常用屬性控制項的常用屬性

例如:我們可以在例如:我們可以在 Page_Load()Page_Load() 事件處理程序指事件處理程序指定顯示第定顯示第 11個個 ViewView 控制項,如下所示:控制項,如下所示:MultiView1.ActiveViewIndex = 0;MultiView1.ActiveViewIndex = 0;

上述程式碼可以指定上述程式碼可以指定 MultiViewMultiView 控制項顯示第控制項顯示第 11個個 ViewView 控制項,即索引值控制項,即索引值 00 ,值如為,值如為 -1-1 就是不就是不顯示任何顯示任何 ViewView 控制項。控制項。

屬性 說明ActiveViewIndex 屬性的索引值可以決定顯示哪一個 View控制項,值 0是第

1個 View控制項;1是第 2個,以此類推Visible 是否在網頁顯示MultiView控制項,預設值 True是顯示;

False為不顯示

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

14-3-1 MultiView14-3-1 MultiView 控制項的基本使控制項的基本使用用 --

在在 ViewView 控制項新增巡覽按鈕控制項新增巡覽按鈕 因為因為 MultiViewMultiView 控制項擁有多個控制項擁有多個 ViewView 控制項,此控制項,此

時,我們需要在時,我們需要在 ViewView 控制項新增巡覽按鈕,例如:控制項新增巡覽按鈕,例如:ButtonButton、、 LinkButtonLinkButton或或 ImageButtonImageButton 控制項來切控制項來切換至下一個或前一個換至下一個或前一個 ViewView 控制項。控制項。

在在 ButtonButton、、 LinkButtonLinkButton或或 ImageButtonImageButton 控制項控制項只需指定只需指定 CommandNameCommandName 屬性值,就可以建立屬性值,就可以建立預設功能的按鈕控制項,其說明如下表所示:預設功能的按鈕控制項,其說明如下表所示:

CommandName屬性值 說明SwitchViewByID 切換至 CommandArgument屬性值 ID的 View控

制項SwitchViewByIndex 切換至 CommandArgument屬性值指定索引值的

View控制項

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

14-3-1 MultiView14-3-1 MultiView 控制項的基本使控制項的基本使用用 --

範例網站範例網站ASP.NETASP.NET 網站:網站: Ch14-3-1Ch14-3-1 在在 ASP.NETASP.NET 網頁網頁 MultiViewMultiView 控制項的每一個控制項的每一個

ViewView 控制項只顯示部分的表單內容,請指定控制項只顯示部分的表單內容,請指定CommandNameCommandName 屬性值來建立巡覽按鈕,最後在屬性值來建立巡覽按鈕,最後在LabelLabel 控制項顯示使用者輸入的內容,如下圖所示:控制項顯示使用者輸入的內容,如下圖所示:

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

14-3-2 14-3-2 建立標籤頁建立標籤頁 -- 說明說明 MultiViewMultiView 控制項只需結合控制項只需結合 MenuMenu 控制項,控制項,

再加上一些再加上一些 CSSCSS ,就可以建立標籤頁,就可以建立標籤頁(( Tabbed PageTabbed Page )的使用介面,例如:)的使用介面,例如:Yahoo!Yahoo! 首頁切換顯示主題的使用介面,如首頁切換顯示主題的使用介面,如下圖所示:下圖所示:

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

14-3-2 14-3-2 建立標籤頁建立標籤頁 -- 範例網站範例網站ASP.NETASP.NET 網站:網站: Ch14-3-2Ch14-3-2 在在 ASP.NETASP.NET 網頁結合網頁結合 MenuMenu、、 MultiViewMultiView 控制項控制項和和 CSSCSS 來建立標籤頁的使用介面,如下圖所示:來建立標籤頁的使用介面,如下圖所示:

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

14-4 Wizard14-4 Wizard 精靈頁面控制項精靈頁面控制項 --說明說明

WizardWizard 控制項可以在網頁建立多步驟的精控制項可以在網頁建立多步驟的精靈頁面,每一個步驟就是一個靈頁面,每一個步驟就是一個 WizardStepWizardStep控制項,我們可以活用控制項,我們可以活用 WizardWizard 控制項來收控制項來收集使用者輸入的資訊。集使用者輸入的資訊。

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

14-4 Wizard14-4 Wizard 精靈頁面控制項精靈頁面控制項 --新增新增 WizardWizard 控制項控制項

在「工具箱」視窗展開【標準】區段,選在「工具箱」視窗展開【標準】區段,選【【 WizardWizard】控制項,然後拖拉至】控制項,然後拖拉至 <div><div>標標籤來插入籤來插入 WizardWizard控制項,預設有二個步控制項,預設有二個步驟。驟。

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

14-4 Wizard14-4 Wizard 精靈頁面控制項精靈頁面控制項 --屬性屬性

WizardWizard 控制項的常用屬性,如下表所示:控制項的常用屬性,如下表所示:屬性 說明

ActiveStepIndex 目前精靈步驟的索引值,0就是第 1個HeaderText 控制項的標題文字

DisplaySiderBar 是否顯示左邊巡覽列來切換步驟,預設值 True是顯示;False為不顯示

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

14-4 Wizard14-4 Wizard 精靈頁面控制項精靈頁面控制項 --編輯步驟編輯步驟

開啟「開啟「 WizardWizard 工作」功能表,選工作」功能表,選【【新增新增 // 移除移除WizardStepsWizardSteps 】】超連結來編輯精靈步驟,可以看超連結來編輯精靈步驟,可以看到「到「 WizardStepWizardStep 集合編輯器」對話方塊。集合編輯器」對話方塊。

按左下方【加入】鈕新增步驟

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

14-4 Wizard14-4 Wizard 精靈頁面控制項精靈頁面控制項 --WizardStepWizardStep 控制項屬性控制項屬性

WizardStepWizardStep 控制項的常用屬性,如下表所控制項的常用屬性,如下表所示:示:屬性 說明Title 步驟的標題文字

AllowReturn 是否允許回到此步驟,預設值 True是可以;False是不允許

StepType 步驟種類可以是 Start、Step、Finish和 Complete,預設值是 Auto

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

14-4 Wizard14-4 Wizard 精靈頁面控制項精靈頁面控制項 --範例網範例網站站

ASP.NETASP.NET 網站:網站: Ch14-4Ch14-4 在在 ASP.NETASP.NET 網頁自動格式化網頁自動格式化 WizardWizard 控制項後,控制項後,

建立類似第建立類似第 14-3-114-3-1 節的三步驟精靈頁面,最後在節的三步驟精靈頁面,最後在LabelLabel 控制項顯示使用者輸入的內容,如下圖所示:控制項顯示使用者輸入的內容,如下圖所示:

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

14-5 14-5 檔案上傳控制項檔案上傳控制項 -- 說明說明在在 ASP.NETASP.NET 網頁新增網頁新增 FileUploadFileUpload 控制項控制項

後,就可以使用此控制項來選擇上傳檔案,後,就可以使用此控制項來選擇上傳檔案,然後使用控制項物件的然後使用控制項物件的 SaveAs()SaveAs() 方法儲存方法儲存成伺服端檔案,換句話說,就是執行客戶成伺服端檔案,換句話說,就是執行客戶端的檔案上傳。端的檔案上傳。 FileUpload控制

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

14-5 14-5 檔案上傳控制項檔案上傳控制項 -- 新增新增FileUploadFileUpload 控制項控制項

在「工具箱」視窗展開在「工具箱」視窗展開【【標準標準】】區段,選區段,選【【 FileUploadFileUpload 】】控制項,然後拖拉至控制項,然後拖拉至 <div><div> 標籤標籤中表格的第中表格的第 11 列的第列的第 22 欄即可插入欄即可插入 FileUploadFileUpload 控控制項。制項。

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

14-5 14-5 檔案上傳控制項檔案上傳控制項 -- 屬性屬性 FileUploadFileUpload 控制項的常用屬性,如下表所示:控制項的常用屬性,如下表所示:

屬性 說明HasFile 檢查是否有選擇上傳檔案,有為 True;否則為 False

FileName 取得上傳檔案的名稱

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

14-5 14-5 檔案上傳控制項檔案上傳控制項 -- 方法方法 在在 FileUploadFileUpload控制項選好上傳檔案後,就可以使控制項選好上傳檔案後,就可以使用上表方法來上傳檔案,如下所示:用上表方法來上傳檔案,如下所示:path += upImage.FileName;path += upImage.FileName;

upImage.SaveAs(Server.MapPath(path));upImage.SaveAs(Server.MapPath(path)); 上述程式碼先使用上述程式碼先使用 FileNameFileName屬性建立伺服端檔屬性建立伺服端檔案的相對路徑,然後使用案的相對路徑,然後使用 Server.MapPath()Server.MapPath()方法方法取得實際路徑後,執行取得實際路徑後,執行 SaveAs()SaveAs()方法儲存成伺服方法儲存成伺服端檔案端檔案,如下表所示:,如下表所示:屬性 說明

SaveAs(String) 將上傳資料寫成參數實際路徑字串的伺服器檔案

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

14-5 14-5 檔案上傳控制項檔案上傳控制項 -- 範例網站範例網站ASP.NETASP.NET 網站:網站: Ch14-5Ch14-5 在在 ASP.NETASP.NET 網頁的網頁的 FileUploadFileUpload 控制項選擇上傳控制項選擇上傳

圖檔後,按下按鈕將它上傳至圖檔後,按下按鈕將它上傳至 ASP.NETASP.NET 網站的網站的「「 imagesimages 」資料夾,如下圖所示:」資料夾,如下圖所示:

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