第+5+章+Web+窗體的基本控件.ppt

1、第二篇ASP.NET 窗體控件,東鵬信息電子有限公司,2,內容,第 5 章 Web 窗體的基本控件 第 6 章 Web 窗體的高級控件,3,第 5 章 Web 窗體的基本控件,主講：Jayce_Zou,4,本章內容 主講：Jayce_Zou,文本控件 按鈕控件 復選框控件 列表控件 面板控件 日歷控件 驗證控件 文件上傳控件,5,控件的屬性 主講：Jayce_Zou,每個控件都有一些公共屬性，例如字體顏色、邊框的顏色、樣式等。 屬性欄用來設置控件的屬性，當控件在頁面被初始化時，這些將被應用到控件。 控件的屬性也可以通 過編程的方法在頁面相應代碼區(qū)域編寫： protected void Page

2、_Load(object sender, EventArgs e) /在Page_Load中設置Label1的可見性 Label1.Visible = false; ,6,標簽控件（Label） 主講：Jayce_Zou,在 Web 應用中，希望顯式的文本不能被用戶更改，或者當觸發(fā)事件時，某一段文本能夠在運行時更改， 則可以使用標簽控件（Label） 示例代碼如下所示： 標簽控件的屬性能夠在相應的.cs代碼中初始化，示例代碼： Label1.Text = “Hello World”; /標簽賦值 Label1.Text = Hello World A Html Code; /輸出 HTML L

3、abel1.Font.Size = FontUnit.XXLarge; /設置字體大小,7,超鏈接控件（HyperLink） 主講：Jayce_Zou,超鏈接控件相當于實現(xiàn)了HTML代碼中的“”效果 示例代碼如下所示: HyperLink 超鏈接控件通常使用的兩個屬性： ImageUrl：要顯式圖像的 URL。 NavigateUrl：要跳轉的 URL。,8,圖像控件（Image） 主講：Jayce_Zou,圖像控件用來在 Web 窗體中顯示圖像，圖像控件常用的屬性： AlternateText：在圖像無法顯式時顯示的備用文本。 ImageAlign：圖像的對齊方式。 ImageUrl：要顯示

4、圖像的 URL。 示例代碼如下所示： 同樣，HTML 中也可以使用來替代圖像控件 注意：當雙擊圖像控件時，系統(tǒng)并沒有生成事件所需要的代碼段，這說明 Image 控件不支持任何事件。,9,文本框控件（TextBox） 主講：Jayce_Zou,默認的文本控件（TextBox）是一個單行的文本框，用戶只能在文本框中輸入一行內容。 通過修改該屬性，則可以將文本框設置為多行/或者是以密碼形式顯示。 文本框控件常用的控件屬性如下所示： AutoPostBack：在文本修改以后，是否自動重傳 Columns：文本框的寬度。 EnableViewState：控件是否自動保存其狀態(tài)以用于往返過程。 MaxLe

5、ngth：用戶輸入的最大字符數(shù)。 ReadOnly：是否為只讀。 Rows：作為多行文本框時所顯式的行數(shù)。 TextMode：文本框的模式，設置單行，多行或者密碼。 Wrap：文本框是否換行。,10,文本框控件的使用 主講：Jayce_Zou, ,11,按鈕控件 主講：Jayce_Zou,在 ASP.NET 中，包含三類按鈕控件，分別為 Button、LinkButton、ImageButton。 下面的語句聲明了三種按鈕，示例代碼如下所示。 /普通的按鈕 /Link 類型的按鈕 LinkButton /圖像類型的按鈕,12,單選控件（RadioButton） 主講：Jayce_Zou,單選控

6、件可以為用戶選擇某一個選項，單選控件常用屬性如下所示。 Checked：控件是否被選中。 GroupName：單選控件所處的組名。 TextAlign：文本標簽相對于控件的對齊方式。,13,單選組控件（RadioButtonList） 主講：Jayce_Zou,與單選控件相同，單選組控件也是只能選擇一個項目的控件，而與單選控件不同的是，單選組控件沒有 GroupName 屬性，但是卻能夠列出多個單選項目。 添加項目后，系統(tǒng)自動在.aspx 頁面聲明服務器控件代碼，代碼如下所示： Choose1 Choose2 Choose3 常用屬性如下所示： Items：列表中項的集合。 RepeatCol

7、umn：用于布局項的列數(shù)。 RepeatDirection：項的布局方向。 Text：選擇的控件的值,14,復選框控件（CheckBox） 主講：Jayce_Zou,同單選框控件一樣，復選框也是通過 Check 屬性判斷是否被選擇，而不同的是，復選框控件沒有。 GroupName 屬性，示例代碼如下所示： ,15,復選組控件（CheckBoxList） 主講：Jayce_Zou,同單選組控件相同，為了方便復選控件的使用，.NET 服務器控件中同樣包括了復選組控件，拖動一個 復選組控件到頁面可以同單選組控件一樣添加復選組列表。 添加在頁面后，系統(tǒng)生成代碼如下所示： Choose1 Choose2

8、 Choose3 ,16,DropDownList 列表控件 主講：Jayce_Zou,列表控件能在一個控件中為用戶提供多個選項，同時又能夠避免用戶輸入錯誤的選項。 例如，在用戶注冊時，可以選擇性別是男，或者女，就可以使用 DropDownList 列表控件，同時又避免了用戶輸入其他的信息。 下列語句聲明了一個 DropDownList 列表控件，示例代碼如下所示： 1 2 3 4 5 6 7 ,17,ListBox 列表控件 主講：Jayce_Zou,ListBox 控件可以指定用戶是否允許多項選擇。 設置 SelectionMode 屬 性為 Single 時，表明只允許用戶從列表框中選擇

9、一個項目，而當 SelectionMode 屬性的值為 Multiple 時，用戶可以從列表中選擇多個數(shù)據(jù)項。 當創(chuàng)建一個 ListBox 列表控件后，開發(fā)人員能夠在控件中添加所需的項目，添加完成后示例代碼如下所示： 1 2 3 4 5 6 ,18,BulletedList 列表控件 主講：Jayce_Zou,BulleteList 控件可呈現(xiàn)項目符號或編號。 BulletedList 可以通過設置 BulletStyle 屬性來編輯列表前的符號樣式 ： Circle：項目符號設置為。 CustomImage：項目符號為自定義圖片。 Disc：項目符號設置為。 LowerAlpha：項目符號為

10、小寫字母格式，如 a、b、c 等。 LowerRoman：項目符號為羅馬數(shù)字格式，如 i、ii 等。 NotSet：表示不設置，此時將以 Disc 樣式為默認樣式。 Numbered：項目符號為 1、2、3、4 等。 Square：項目符號為黑方塊。 UpperAlpha：項目符號為大寫字母格式，如 A、B、C 等。 UpperRoman：項目符號為大寫羅馬數(shù)字格式如、等。,19,面板控件（Panel） 主講：Jayce_Zou,面板控件就好像是一些控件的容器，可以將一些控件包含在面板控件內，然后對面板控制進行操作來 設置在面板控件內的所有控件是顯示還是隱藏，從而達到設計者的特殊目的。 當創(chuàng)建

11、一個面板控件時，系統(tǒng)會生成相應的 HTML 代碼，示例代碼如下所示： ,20,主講：Jayce_Zou, This is a Panel! 上述代碼創(chuàng)建了一個 Panel 控件， Panel 控件默認屬性為隱藏，并在控件外創(chuàng)建了一個 Button 控件Button1，單擊按鈕控件后將顯示 Panel 控件，cs 代碼如下所示： protected void Button1_Click(object sender, EventArgs e) Panel1.Visible = true; /Panel 控件顯示可見 ,21,主講：Jayce_Zou,Panel 控件還包含一個 GroupText

12、屬性，當 Panel 控件的 GroupText 屬性被設置時，Panel 將會被創(chuàng)建一個帶標題的分組框，效果如圖:,22,日歷控件（Calendar） 主講：Jayce_Zou,日歷控件通常在博客、論壇等程序中使用，日歷控件不僅僅只是顯式了一個日歷，用戶還能夠通過日歷控件進行時間的選取。 在 ASP.NET 中，日歷控件還能夠和數(shù)據(jù)庫進行交互操作，實現(xiàn)復雜的數(shù)據(jù)綁定。 示例代碼如下所示: ,23,主講：Jayce_Zou,常用的日歷控件的屬性如下所示： DayHeaderStype：月歷中顯示一周中每一天的名稱和部分的樣式。 DayStyle：所顯示的月份中各天的樣式。 NextPrevSt

13、yle：標題欄左右兩端的月導航所在部分的樣式。 OtherMonthDayStyle：上一個月和下一個月的樣式。 SelectedDayStyle：選定日期的樣式。 SelectorStyle：位于月歷控件左側，包含用于選擇一周或整個月的連接的列樣式。 ShowDayHeader：顯示或隱藏一周中的每一天的部分。 ShowGridLines：顯示或隱藏一個月中的每一天之間的網(wǎng)格線。 ShowNextPrevMonth：顯示或隱藏到下一個月或上一個月的導航控件。 ShowTitle：顯示或隱藏標題部分。 TitleStyle：位于月歷頂部，包含月份名稱和月導航連接的標題欄樣式。 TodayDay

14、Style：當前日期的樣式。 WeekendDayStyle：周末日期的樣式。,24,主講：Jayce_Zou,25,日歷控件的事件 主講：Jayce_Zou,同所有的控件相同，日歷控件也包含自身的事件，常用的日歷控件的事件包括有： DayRender：當日期被顯示時觸發(fā)該事件。 SelectionChanged：當用戶選擇日期時觸發(fā)該事件。 VisibleMonthChanged：當所顯示的月份被更改時觸發(fā)該事件。,26,廣告控件（AdRotator） 主講：Jayce_Zou,廣告控件必須放置在 Form 或 Panel 控件，以及模板內。 廣告控件需要包含圖像的地址的 XML 文件。 并

15、且該文件用來指定每個廣告的導航連接。 廣告控件最常用的屬性就是 AdvertisementFile，使用它來配置相應的 XML 文件，所以必須首先按照標準格式創(chuàng)建一個 XML 文件，如圖 :,27,廣告控件要求的標準的 XML 主講：Jayce_Zou, 我的網(wǎng)站 software 100 我的網(wǎng)站 software 100 ,28,主講：Jayce_Zou,標準的廣告控件的 XML 數(shù)據(jù)源格式，其中各標簽意義如下所示： ImageUrl：指定一個圖片文件的相對路徑或絕對路徑 NavigateUrl：將用戶發(fā)送到該頁面。 AlternateText：該元素用來替代 IMG 中的 ALT 元素。

16、 KeyWord：KeyWord 用來指定廣告的類別。 Impression：該元素是一個數(shù)值，指示輪換時間表中該廣告相對于文件中的其他廣告的權重。,29,文件上傳控件（FileUpload） 主講：Jayce_Zou, protected void Button1_Click(object sender, EventArgs e) /上傳文件另存為 FileUpload1.PostedFile.SaveAs(Server.MapPath(upload/beta.jpg); ,30,主講：Jayce_Zou,protected void Button1_Click(object sender,

17、 EventArgs e) if (FileUpload1.HasFile) /如果存在文件 /獲取文件擴展名 string fileExtension = System.IO.Path.GetExtension(FileUpload1.FileName); if (fileExtension != .jpg) /如果擴展名不等于 jpg 時 /提示用戶重新上傳 Label1.Text = 文件上傳類型不正確，請上傳 jpg 格式; else /文件保存 FileUpload1.PostedFile.SaveAs(Server.MapPath(upload/beta.jpg); Label1.

18、Text = 文件上傳成功; /提示用戶成功 ,31,主講：Jayce_Zou,值得注意的是，上傳的文件在.NET 中，默認上傳文件最大為 4M 左右，不能上傳超過該限制的任何內容。當然，開發(fā)人員可以通過配置.NET 相應的配置文件來更改此限制，但是推薦不要更改此限制，否則可能造成潛在的安全威脅。 注意 ： 如果需要更改默認上傳文件大小的值，通?？梢灾苯有薷拇娣旁?C:WINDOWSMicrosoft.NETFrameWorkV2.0.50727CONFIG的ASP.NET 2.0 配置文件，通過修改文件中的maxRequestLength 標簽的值，或者可以通過 web.config 來覆蓋

19、配置文件。,32,表控件（Table） 主講：Jayce_Zou,通常，表不僅用來顯示表格的信息，還是一種傳統(tǒng)的布局網(wǎng)頁的形式，創(chuàng)建網(wǎng)頁表格有如下幾種形式： HTML 格式的表格：如標記顯示的靜態(tài)表格。 HtmlTable 控件：將傳統(tǒng)的控件通過添加 runat=server 屬性將其轉換為服務器控件。 Table 表格控件：就是本節(jié)介紹的表格控件。 雖然創(chuàng)建表格有以上三種創(chuàng)建方法，但是推薦開發(fā)人員在使用靜態(tài)表格，當不需要對表格做任何邏輯事物處理時，最好使用 HTML 格式的表格，因為這樣可以極大的降低頁面邏輯、增強性能。,33,表控件（Table） 主講：Jayce_Zou,表格控件可以自動

20、生成代碼，但是不能生成行和列，必須通過 TableRow 創(chuàng)建行， 通過 TableCell 來創(chuàng)建列，示例代碼： 1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 ,34,向導控件（Wizard） 主講：Jayce_Zou,當創(chuàng)建了一個向導控件時，系統(tǒng)會自動生成向導控件的 HTML 代碼，示例代碼如下所示： ,35,Wizard屬性 主講：Jayce_Zou,HeaderText：設置步驟的標題 DisplayCancelButton：是否顯示一個取消按鈕 模板屬性： StartNavigationTemplate：該屬性指定為 Wizard 控件的 Start 步驟中的導航區(qū)

21、域顯示自定義內容。 FinishNavigationTemplate：該屬性為 Wizard 控件的 Finish 步驟中的導航區(qū)域指定自定義內容。 StepNavigationTemplate：該屬性為 Wizard 控件的 Step 步驟中的導航區(qū)域指定自定義內容。 SideBarTemplate：該屬性為 Wizard 控件的側欄區(qū)域中指定自定義內容。,36,驗證控件 主講：Jayce_Zou,表單驗證控件（RequiredFieldValidator） 比較驗證控件（CompareValidator） 范圍驗證控件（RangeValidator） 正則驗證控件（RegularExpre

22、ssionValidator） 自定義邏輯驗證控件（CustomValidator） 驗證組控件（ValidationSummary）,37,表單驗證控件（RequiredFieldValidator） 主講：Jayce_Zou,使用 RequiredFieldValidator 控件能夠指定某個用戶在特定的控件中必須提供相應的信息，如果不填寫相應的信息，RequiredFieldValidator 控件就會提示錯誤信息，RequiredFieldValidator 控件示例代碼： 姓名: 密碼: ,38,比較驗證控件（CompareValidator） 主講：Jayce_Zou,比較驗證控件

23、對照特定的數(shù)據(jù)類型來驗證用戶的輸入。 CompareValidator 控件的特有屬性如下所示： ControlToCompare：以字符串形式輸入的表達式。要與另一控件的值進行比較。 Operator：要使用的比較。 Type：要比較兩個值的數(shù)據(jù)類型。 ValueToCompare：以字符串形式輸入的表達式。,39,主講：Jayce_Zou, 密碼: 確認: ,40,范圍驗證控件（RangeValidator） 主講：Jayce_Zou,范圍驗證控件（RangeValidator）可以檢查用戶的輸入是否在指定的上限與下限之間。 通常情況下用于 檢查數(shù)字、日期、貨幣等。 常用屬性如下所示： M

24、inimumValue：指定有效范圍的最小值。 MaximumValue：指定有效范圍的最大值。 Type：指定要比較的值的數(shù)據(jù)類型。,41,主講：Jayce_Zou, 請輸入生日: ,42,正則驗證控件（RegularExpressionValidator） 主講：Jayce_Zou,正則驗證控件（RegularExpressionValidator）常用的屬性是 ValidationExpression，它用來指定用于驗證的輸入控件的正則表達式。 客戶端的正則表達式驗證語法和服務端的正則表達式驗證語法不同，因為在客戶端使用的是 JSript 正則表達式語法，而在服務器端使用的是 Regex

25、 類提供的正則表達式語法。 使用正則表達式能夠實現(xiàn)強大字符串的匹配并驗證用戶的輸入的格式是否正確，系統(tǒng)提供了一些常用的正則表達式， 開發(fā)人員能夠選擇相應的選項進行規(guī)則篩選，如圖 ：,43,主講：Jayce_Zou,當選擇了正則表達式后，系統(tǒng)自動生成的 HTML 代碼如下所示。 郵件： ,44,自定義邏輯驗證控件（CustomValidator） 主講：Jayce_Zou,自定義邏輯驗證控件（CustomValidator）允許使用自定義的驗證邏輯創(chuàng)建驗證控件。 例如，可以創(chuàng)建一個驗證控件判斷用戶輸入的是否包含“.”號，示例代碼如下所示: protected void CustomValidat

26、or1_ServerValidate(object source, ServerValidateEventArgs args) /設置驗證程序，并返回布爾值 args.IsValid = args.Value.ToString().Contains(.); protected void Button1_Click(object sender, EventArgs e) /用戶自定義驗證 if (Page.IsValid) /判斷是否驗證通過 Label1.Text = 驗證通過; /輸出驗證通過 else Label1.Text = 輸入格式錯誤; /提交失敗信息 ,45,驗證組控件（ValidationSummary） 主講：Jayce_Zou,驗證組控件（ValidationSummary）能夠對同一頁面的多個控件進行驗證。