(Microsoft PowerPoint -

Size: px

Start display at page:

Download "(Microsoft PowerPoint -"

饮丸许
4 years ago
Views:

1 ASP.NET 程式設計常用的 ASP.NET 控制項 ( 一 ) 講師 : 林賢達 Peter.lin@imestech.com

2 課程大綱驗證控制項顯示控制項輸入控制項按鈕控制項清單控制項

3 ASP.NET 伺服器控制項 ASP.NET 2.0 提供了大約 80 個伺服器控制項 (Server Control), 除了原有的 30 個, 在 2.0 增加了 50 個新的伺服器控制項 ASP.NET 伺服器控制器項均是由 Control WebControl 或者 CompositeControl 基底類別衍生而來

4 ASP.NET 伺服器控制項控制項分類顯示控制項 :Label, Literal 和 Image 輸入控制項 :TextBox, CheckBox, RadioButton 按鈕控制項 :Button, LinkButton, ImageButton 清單控制項 :ListBox, DropDownList, CheckButtonList, RadioButtonList 豐富控制項,AdRotator, Calendar 資料控制項,SqlDataSource, GridView, DetailsView, FormView, Repeater

5 ASP.NET 伺服器控制項控制項分類 ( 續 ) 驗證控制項 :RangeValidator CompareValide, RequiredFiledValidator, CustomValidator 登入控制項 :Login, CreateUserWizard 巡覽控制項 :SiteMap, Menu, TreeView 網頁組件 :WebPartManager, WebPartZon, EditorZon, CatalogZone

6 驗證控制項對使用者輸入資料進行驗證驗證功能是否有輸入資料是否大於等於小於某個數值是否在有效範圍內是否符合自訂的 Regular Expression 規則是否符合自訂的驗證規則列出所有驗證失敗的驗證控制項

7 驗證控制項類別關係圖

8 驗證控制項哪些控制項的內容可被驗證控制項種類 TextBox ListBox DropDownList RadioButtonList FileUpload 可被驗證的屬性 Text SelectItem SelectItem SelectItem

9 BaseValidator 基底類別 ASP.NET 驗證控制項均衍生自 BaseValidator 類別重要屬性 ControlToValidate: 指定對哪一個控制項的內容進行驗證 ErrorMessage: 設定當驗證失敗時, 顯示的錯誤訊息 Text : 設定當驗證失敗時, 顯示的文字

10 BaseValidator 基底類別重要屬性 ( 續 ) Display: 設定如何顯示錯誤訊息 Static, 顯示錯誤訊息時不會影響網頁外觀, 但驗證成功時, 控制項會佔用空間 Dynamic, 顯示錯誤訊息時會影響網頁外觀, 驗證成功時, 控制項不會佔用空間 None, 不顯示錯誤訊息

11 RequiredFieldValidator 控制項驗證欄位是否輸入資料重要屬性 InitialValue: 設定此欄位驗證的初始值, 通常僅作為提示之用而非真正資料, 因此不會被驗證

12 RangeValidator 控制項驗證使用者的輸入資料是否在有效範圍內重要屬性 Type: 設定要比較數值的資料型別 MaximumValue: 設定有效範圍的最大值 MinmumValue: 設定有效範圍的最小值 IsValid: 取出比較的結果, 若為 True 表示驗證成功, 否則驗證失敗

13 CompareValidator 控制項比較兩個數值是否滿足大於大於等於等於小於小於等於或不等於的條件重要屬性 ValueToCompare: 設定欲比較的數值 ControlToCompare: 設定欲比較的控制項 ID Operator: 設定比較的方法 Type: 設定要比較數值的資料型別 IsValid: 取出比較的結果, 若為 True 表示驗證成功, 否則驗證失敗

14 RegularExpressValidator 控制項設定特定的格式來限制使用者輸入的資料重要屬性 ValidationExpression: 設定有效性的規則運算式常見的驗證格式輸入資料的長度必須等於 10 個字元 ^\d{8}$ 驗證身分正號碼的格式 [a-za-z]{1}[1-2]{1}[0-9]{8}

15 RegularExpressValidator 控制項常見的驗證格式 ( 續 ) 驗證電話號碼的格式, 兩碼區域號碼和七碼電話號碼, 中間用減號 (-) 隔開 ^\d{2}\-\d{7}$ 驗證的格式 \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

16 CustomValidator 控制項允許自訂的驗證邏輯, 支援在伺服器端或者瀏覽器端來執行驗證在伺服器端的驗證當提交表單並開始進行驗證時, 便會觸發的 ServerValidator 事件 ServerValidateEventArgs 參數 Value 屬性, 取得出被驗證控制項的資料 IsValid 屬性, 表示驗證成功 (True) 還是失敗 (False)

17 CustomValidator 控制項在瀏覽器端的驗證 EnableClientScript 屬性 : 設定是否在瀏覽器端執行驗證 ClientValidationFunction 屬性 : 指定瀏覽器端的驗證函式

18 ValidationSummary 控制項不執行驗證 ( 無 ControlToValidate 屬性 ), 而是根據網頁中其他的驗證控制項的驗證結果, 產生驗證摘要報告重要屬性 DisplayMode: 設定錯誤摘要的顯示格式 BulletList, 使用項目符號標籤 (<li>) 分行顯示錯誤訊息 List, 使用換行標籤 (<br>) 分行顯示錯誤訊息 SingleParagraph, 使用段落標籤 (<p>) 將錯誤訊息顯示在同一個段落內

19 ValidationSummary 控制項重要屬性 ( 續 ) HeaderText: 設定錯誤摘要清單的標題名稱 ShowMessageBox: 是否使用彈出視窗的方式顯示錯誤摘要訊息 ShowSummary, 設定是否在網頁上顯示錯誤摘要訊息使用技巧將驗證控制項的 Text 屬性設成 *, 集中由 ValidationSummary 來顯示錯誤摘要訊息

20 顯示控制項 Label 控制項使用 Text 屬性在網頁上顯示文字, 使用 <span> 標籤顯示文字 Literal 控制項使用 Text 屬性直接在網頁上顯示文字, 不使用任何的 HTML 標籤 Image 控制項使用 ImageURL 屬性在網頁上顯示圖片

21 輸入控制項 TextBox 控制項在網頁中產生可輸入資料的文字方塊使用 Text 屬性設定預設值或取出輸入資料使用 TextMode 屬性輸入模式, 例如 SingleLine, Password, 和 MultiLine 等 CheckBox 控制項在網頁中產生可複選的項目 ( 核取方塊 ) 一個 CheckBox 控制項只會對應一個選項使用 Text 屬性設定選項的說明文字

22 輸入控制項 CheckBox 控制項 ( 續 ) Checked 屬性, 判斷該選項是否被勾選使用 AutoPostBack 屬性設定當改變 CheckBox 控制項的狀態時, 是否重新整理網頁若設定為 True, 將觸發 CheckedChanged 事件 RadioButton 控制項在網頁中產生單選的項目 ( 選項按鈕 ) 使用 Text 屬性設定選項的說明文字 Checked 屬性, 判斷選項是否被選取

23 輸入控制項 RadioButton 控制項 ( 續 ) 使用 AutoPostBack 屬性設定當改變 CheckBox 控制項的狀態時, 是否重新整理網頁若設定為 True, 將觸發 CheckedChanged 事件使用 GroupName 屬性設定選項按鈕的群組名稱具有相同群組名稱的選項按鈕表示在同一個群組, 只有在同一個群組中的選項按鈕才會相互影響, 也就是只能在這些選項選取一個選項

24 按鈕控制項 Button 控制項, 在網頁中產生一個文字按鈕使用 Text 屬性設定按鈕的說明文字使用 CommandName 屬性設定與按鈕關聯的命令名稱使用 CommandName 屬性設定與按鈕關聯的命令參數當使用者按下按鈕時, 會啟動 Click 和 Command 事件在 Command 事件程序中, 可以根據命令名稱或命令參數作為條件, 執行不同的處理邏輯

25 按鈕控制項 LinkButton 控制項在網頁中產生一個超連結, 與 Button 控制項具有相同的功能 ImageButton 控制項在網頁中產生一個圖形按鈕, 與 Button 控制項具有相同的功能使用 ImageURL 屬性指定顯示在此按鈕上的圖形

26 清單控制項所有清單型別控制項均衍生自 ListControl

27 ListControl 基底類別重要成員 Items: 清單控制項的項目集合 SelectedIndex: 目前或最後一個選取項目的索引值預設為 -1, 表示沒有項目被選取 SelectedItem: 目前或最後一個選取項目 SelectedIndexChanged 事件 : 如果 AutoPostBack 屬性為 true, 當改變清單控制項的選取項目時, 便會重新整理網頁, 觸發此事件

28 清單項目集合 (ListItemCollection) 用於動態新增或刪除清單控制項中的項目重要成員 Count 屬性 : 取得清單控制項的項目個數 Add 方法 : 新增項目到清單控制項中 Clear 方法 : 刪除清單控制項所有的項目 Item 方法 : 取出清單控制項的項目 RemoveAt 方法 : 根據索引值刪除指定的項目 ListItem 類別

29 清單項目集合 (ListItemCollection) 清單項目的型別為 ListItem 類別 Selected 屬性, 判斷某個項目是否被選取 Text 屬性, 設定項目的說明文字 Value 屬性, 設定選取項目傳送至伺服器端的值

30 ListBox 控制項在網頁中產生一個清單方塊, 提供多個選項讓使用者選擇且允許複選重要屬性 Rows: 設定顯示的水平列數, 預設為 5 SelectionMode: 設定單選還是複選模式

31 DropDownList 控制項在網頁中產生一個下拉式清單, 提供多個選項讓使用者選取某一的項目 ( 單選 )

32 CheckBoxBox 控制項在網頁中產生一個核取方塊清單, 提供多個選項讓使用者勾選且允許複選重要成員 RepeatColumns: 設定顯示的行數 RepeatDirection: 設定核取方塊是垂直還是水平方向排列 RepeatLayout: 設定核取方塊是以浮動 (Flow) 或表格的方式排列

33 RadioButtonList 控制項在網頁中產生一個選項按鈕清單, 提供多個選項讓使用者選取某一個項目 ( 單選 ) 重要成員 RepeatColumns: 設定顯示的行數 RepeatDirection: 設定選項按鈕是垂直還是水平方向排列 RepeatLayout: 設定選項按鈕是以浮動 (Flow) 或表格的方式排列

34 BulletedList 控制項在網頁中產生一個項目符號格式的清單重要成員 BulletImageUrl: 設定項目符號的圖片 Url BulletStyle: 設定項目符號的樣式 DisplayMode: 設定使用一般文字超連結還是連結按鈕來顯示清單項目若顯示為超連結, 則其說明文字為項目 Text 屬性, 網頁 Url 為 Value 屬性若顯示為連接按鈕, 則按下後將觸發 Click 事件

35 HyperLink 控制項在網頁上連結到網際網路的其他資源重要屬性 Text: 設定超連結的說明文字 ImageURL, 設定圖形超連結的圖檔來源 NavigateURL, 設定欲連結的網頁或檔案的 Uri Target: 設定瀏覽器的開啟方式和網頁顯示位置

36 HyperLink 控制項 Target: 設定瀏覽器的開啟方式和網頁顯示位置 _Top : 顯示網頁在整個瀏覽器視窗 _Parent: 顯示在上一層的框架頁 _Self: 顯示在目前的框架頁 _Blank: 顯示在一個新的瀏覽器視窗

37 Panel 控制項將網頁上切個成多個矩形區域, 類似 <DIV> 標籤, 可動態控制顯示某個矩形區域 Panel 控制項是一個容器物件, 可在設計時期加入其它控制項, 亦可動態加入其他控制項 Dim Label1 As New Label() Label1.Text="Test 123" Panel1.Controls.Add(Label1)

untitled

untitled 1 .NET 利 [] [] 來說切切理 [] [ ] 來說拉類類 [] [ ] 列連 Web 行流來了不不不流立行 Page 類 Load 理 Response 類 Write 料 Redirect URL Response.Write("!! ives!!"); Response.Redirect("WebForm2.aspx"); (1) (2) Web Form