第4章+HTML控件和Web服務(wù)器控件

1、第4章 HTML控件和Web服務(wù)器控件,本章講述的主要內(nèi)容 4.1 ASP.NET控件概述 4.2 標(biāo)準(zhǔn)服務(wù)器端控件 4.3 數(shù)據(jù)驗證控件 4.4 用戶自定義控件,4.1 基本的Web控件,ASP.NET提供的Web控件提供了豐富功能，可以使程序的開發(fā)變得更加簡單和豐富。 Web控件中包括傳統(tǒng)的表單控件，如TextBox和Button，以及其它更高抽象級別的控件，如Calendar和DataGrid控件。它們提供了一些能夠簡化開發(fā)工作的特性： 1. 豐富而一致的對象模型 。 2. 對瀏覽器的自動檢測 。 3. 數(shù)據(jù)綁定 。 4. 支持主題 。,4.1 基本的Web控件,ASP.NET提供了與H

2、TML元素相對應(yīng)的基本W(wǎng)eb控件，下表列舉了ASP.NET提供的基本的Web控件。,4.1 服務(wù)器控件,ASP.NET服務(wù)器控件主要分為以下三種類型： HTML服務(wù)器控件 Web服務(wù)器控件 標(biāo)準(zhǔn)服務(wù)器控件 驗證控件 導(dǎo)航控件 數(shù)據(jù)控件 登錄控件等。 用戶自定義服務(wù)器控件,4.1.1 服務(wù)器控件的分類,4.1 服務(wù)器控件,HTML服務(wù)器控件,4.1.1 服務(wù)器控件的分類,HTML服務(wù)器控件類是在命名空間Syetem.Web.UI.HtmlControls中定義的。 HTML服務(wù)器控件的語法格式如下： 例如，如下輸入密碼的文本框控件： ,4.1 ASP.NET控件概述,HTML控件 HTML控件在

3、默認(rèn)情況下屬于客戶端（瀏覽器）控件，服務(wù)器無法對其進(jìn)行控制。HTML控件是從HTML標(biāo)記衍生而來的，每個控件對應(yīng)于一個或一組HTML標(biāo)記。例如，前面我們經(jīng)常使用的HTML表格控件，就是一個常用于頁面布局工具的HTML控件，如果不使用工具箱中的控件，而直接在源視圖中書寫相應(yīng)的HTML代碼也可以得到相同的效果，但使用控件可以節(jié)省大量的代碼書寫時間，且使操作變成了可視化的方式。 HTML控件可以通過修改代碼將其變成Web服務(wù)器端控件，幾乎所有的HTML標(biāo)記只要加上runat = server，這個服務(wù)器控件標(biāo)識屬性后都可以變成服務(wù)器端控件。這與普通HTML標(biāo)記相比最大的區(qū)別在于，服務(wù)器端控件可以通過

4、服務(wù)器端代碼來控制。,4.1 ASP.NET控件概述,服務(wù)器端控件 1. 服務(wù)器端控件的執(zhí)行過程 當(dāng)用戶請求一個包含有Web服務(wù)器端控件的.aspx頁面時，服務(wù)器首先對頁面進(jìn)行處理，將頁面中包含的服務(wù)端控件及其他內(nèi)容解釋成標(biāo)準(zhǔn)的HTML代碼，然后將處理結(jié)果以標(biāo)準(zhǔn)HTML的形式一次性發(fā)送給客戶端。 2. ASP.NET頁面的處理過程 當(dāng)用戶通過瀏覽器發(fā)出一個對ASP.NET頁面的請求后，Web服務(wù)器將用戶的請求交由ASP.NET引擎來處理。系統(tǒng)首先會檢查在服務(wù)器緩存中是否有該頁面，或此頁面是否已被編譯成了.dll文件（Dynamic Link Library，動態(tài)鏈接庫）。若沒有則將頁面轉(zhuǎn)換為源

5、程序代碼，然后由編譯器將其編譯成.dll文件，否則直接利用已編譯過的.dll文件建立對象，并將執(zhí)行結(jié)果返回到客戶端瀏覽器。,4.1 服務(wù)器控件,Web服務(wù)器控件,4.1.2 服務(wù)器控件的分類,Web服務(wù)器控件類定義在Syetem.Web.UI.WebControls命名空間中。 Web服務(wù)器控件的語法格式如下： 或 ,4.1 基本的Web控件,在ASP.NET中，Web控件是使用相應(yīng)的標(biāo)記來編寫控件的。Web控件的標(biāo)記有特定的格式：以結(jié)束，在其間可以設(shè)置各種屬性。例如，這里定義了一個TextBox控件： 當(dāng)客戶端請求該控件所在.aspx頁面時，服務(wù)器就會把下面的代碼送到客戶端： 使用Web控件

6、，使得程序員不用詳細(xì)了解HTML元素就可以設(shè)計頁面。在Visual Studio中，程序員可以把Web控件拖拽到頁面上來設(shè)計頁面。,4.1 基本的Web控件,Web控件可分為兩部分： 1. Web控件：用來組成與用戶進(jìn)行交互的頁面。這 類控件包括常用的按鈕控件、文本框控件、標(biāo)簽控 件等，還有驗證用戶輸入的控件，以及日歷控件等。 2.數(shù)據(jù)綁定控件，用來實現(xiàn)數(shù)據(jù)的綁定和顯示。這 類控件包括廣告控件、表格控件等，還有用于導(dǎo)航 的菜單控件和樹型控件。,4.1服務(wù)器控件,用戶自定義服務(wù)器控件,4.1.3 服務(wù)器控件的分類,自定義控件被定義在命名空間System.Web.UI.Control或Syetem

7、.Web.UI.WebControls中，是編程人員自行設(shè)計和開發(fā)的控件。 它存放在擴展名為.ascx的文件中，使用時只須將它們集成進(jìn)ASP.NET應(yīng)用程序中。 通過這個方法，用戶不僅可以使用自己定義的控件，還可以很方便地使用第三方提供的現(xiàn)成控件，如圖表工具和樹形圖等，且大部分控件都可以在網(wǎng)上免費下載，這為廣大程序開發(fā)者高效、快速的地開發(fā)Web程序提供了方便。,4.1服務(wù)器控件,Web服務(wù)器控件的共有屬性,4.1.4 Web服務(wù)器控件的屬性、事件和方法,4.1 服務(wù)器控件,Web服務(wù)器控件的方法,4.1.5 Web服務(wù)器控件的屬性、事件和方法,4.1 服務(wù)器控件,Web服務(wù)器控件事件和事件過程

8、,4.1.6Web服務(wù)器控件的屬性、事件和方法,Web服務(wù)器控件事件是使某個控件進(jìn)入活動狀態(tài)的一種操作或動作。例如，按下某個鍵、單擊一下鼠標(biāo)等都可觸發(fā)一個控件事件。在例7-1中，單擊“登錄”和“取消”按鈕都會觸發(fā)Button控件的鼠標(biāo)單擊事件。 事件發(fā)生以后，如果有相應(yīng)的事件處理過程，就會完成過程所要求的功能。如“取消”按鈕的單擊事件過程，將“用戶名”輸入框和“密碼”輸入框的內(nèi)容清空，并將光標(biāo)定位到“用戶名”輸入框上。,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.1 ImageButton和HyperLink控件 ImageButton（圖像按鈕）、Image（圖像）和HyperLink（超鏈接）控件都

9、可以在控件中顯示圖片，且都具有超鏈接跳轉(zhuǎn)的功能。 1. ImageButton控件,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.1 ImageButton和HyperLink控件 2. HyperLink控件 雙擊HyperLink（超鏈接）控件在工具箱中的圖標(biāo)，可將控件添加到當(dāng)前頁面光標(biāo)所在位置。HyperLink控件與標(biāo)簽控件很相似，但該控件支持用戶的單擊事件，可以在控件中顯示圖片，可以指定超鏈接的目標(biāo)框架等特有屬性。,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.2 Image和ImageMap控件 Image控件和ImageMap控件都是用于圖片顯示的控件。 1. Image控件,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,

10、4.2.2 Image和ImageMap控件 2. ImageMap控件 利用ImageMap控件可以創(chuàng)建一個圖像，該圖像包含任意數(shù)目的，用戶可以單擊的區(qū)域，這些區(qū)域稱為“作用點”。每一個作用點都可以是一個單獨的超鏈接或回發(fā)事件。ImageMap控件與其他網(wǎng)頁編輯工具（如Dreamware）提供的“熱點地圖”功能類似。 ImageMap控件主要由以下兩個部分組成： 1) 顯示于控件中的圖像。它可是任何標(biāo)準(zhǔn)Web圖形格式的圖形，如*.gif、*.jpg 或*.png文件，該圖像構(gòu)成用戶操作界面。 2) 隱藏在圖像中的作用點集合。每個作用點控件都是一個不同的Web元素。對于每個作用點控件，需要定義

11、其形狀（圓形、矩形或多邊形）以及用于指定作用點位置和大小的坐標(biāo)。例如，如果創(chuàng)建一個圓形作用點，則應(yīng)定義圓心的x、y坐標(biāo)及圓的半徑。,使用Image控件、ImageButton控件、HyperLink控件和ImageMap控件制作一個ASP.NET網(wǎng)站 ImageAndHyper.aspx,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.3 RadioButton和RadioButtonList控件 1. 單選按鈕控件（RadioButton）,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.3 RadioButton和RadioButtonList控件 2. 單選按鈕組控件（RadioButtonList）,一個實例 G

12、roupname DataSource DataTable的用法 IsPostBack和page_load AutoPostback屬性和SelectedIndexChanged,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.4 CheckBox和CheckList控件 CheckBox（復(fù)選框）與CheckList（復(fù)選框組）控件的作用十分相似，都是用于向用戶提供多選輸入數(shù)據(jù)的控件。用戶可以在控件提供的多個選項中選擇一個或多個。被選中的對象中帶有一個“”標(biāo)記，CheckBox和CheckList控件的外觀如圖6-15所示。,聯(lián)合循環(huán)語句講解,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.5 ListBox和Drop

13、DownList控件 ListBox（列表框）和DropDownList（下拉列表框）控件也是一種常見的用于向用戶提供輸入數(shù)據(jù)選項的控件，其外觀如圖6-15和圖6-16所示。,參看RadioButtonList的例子,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.8 容器控件 所謂“容器”控件是指可以安放其他控件的控件。ASP.NET 2.0提供有兩種容器控件，PlaceHolder和Panel控件。 PlaceHolder控件用于在Web頁面上保留一個位置，以便在程序運行時向其中動態(tài)地添加其他控件，這對動態(tài)網(wǎng)頁的布局設(shè)計是十分有利的。 Panel控件對應(yīng)于HTML的標(biāo)記，其作用與PlaceHolder控

14、件相似，可以將放置在其中的一組控件作為一個整體來操作。最常用的是通過設(shè)置Panel的Visible屬性來控制這一組控件的顯示或隱藏。,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.7 Table控件 前面介紹過在Web頁面中用于頁面布局的HTML表格控件，那是一種用于靜態(tài)環(huán)境的布局工具。在工具箱“標(biāo)準(zhǔn)”選項卡中也有一個Table控件，其圖標(biāo)為 。這是一個Web服務(wù)器端控件，使用該控件可更易于編程，用戶可通過程序代碼方便地控制表格中顯示的內(nèi)容及表格的行、列數(shù)。 Tabel控件除了具有HTML表格的一般屬性，如BackImageUrl（背景圖片）、BackColor（背景顏色）、BorderStyle（邊框樣

15、式）、BorderColor（背景顏色）、CellPadding（單元格內(nèi)間距）、CellSpacing（單元格之間距離）、GridLines（單元格框線）、Width（寬）、Height（高）等，還具有兩個關(guān)鍵的子對象TableRow和TableCell，前者用于創(chuàng)建和設(shè)置表格中的行，后者用于創(chuàng)建和設(shè)置表格中的列。通?？梢酝ㄟ^TableCell對象的Text屬性從單元格讀取，或向其中寫入數(shù)據(jù)。 例6-4 TableDynamic.aspx,【例6-5】Placeholder.aspx 聯(lián)合placeholder和Table,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.6 FileUpload控件 文件

16、上傳（FileUpload）控件，顧名思義是用于將文件從本地計算機上傳到遠(yuǎn)程Web服務(wù)器的控件，使用該控件可替代ASP程序中常用FSO（文件系統(tǒng)對象），且FileUpload控件具有更高的效率和安全性。FileUpload控件在工具箱的圖標(biāo)為 。 如圖6-21所示，從外觀上看FileUpload控件有一個文本框和一個【瀏覽】按鈕控件組成，用戶可直接在文本框中輸入希望上傳的文件名（包括文件存放路徑）。若用戶在Web頁面中單擊控件的【瀏覽】按鈕時，系統(tǒng)將自動彈出一個“選擇文件”對話框（類似與Windows的“打開”對話框），通過該對話框用戶可根據(jù)需要選擇希望上傳到遠(yuǎn)程Web服務(wù)器的文件。出于安全方

17、面的考慮，不能將文件名預(yù)先加載到FileUpload控件中。 參見FileUploadPage.aspx,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.9 Calendar控件 1. Calendar控件的常用屬性 2. Calendar控件的主要事件 3. Calendar控件應(yīng)用實例 【例6-6】,4.2 標(biāo)準(zhǔn)服務(wù)器端控件,4.2.10 AdRotator控件 AdRotator（廣告）控件，可配合XML說明文件，在頁面中產(chǎn)生一個可動態(tài)顯示圖片的廣告展現(xiàn)框。若將鼠標(biāo)指針指向圖片，可顯示出預(yù)設(shè)的廣告詞，單擊圖片可導(dǎo)航到預(yù)設(shè)的URL地址。用戶每次刷新頁面廣告展現(xiàn)框中的圖片都會有所不同，且不同圖片出現(xiàn)的頻率

18、，可由XML文件中的設(shè)置決定。,4.3 數(shù)據(jù)驗證控件,4.3.1 數(shù)據(jù)驗證控件概述 數(shù)據(jù)驗證控件可以像其他Web服務(wù)器控件一樣添加到Web頁面中。不同的驗證控件用于特定的檢驗類型，如范圍檢查、模式匹配以及確保用戶不會跳過必填字段的RequierdFieldValidator等。在實際應(yīng)用中，通常將多個驗證控件附加到同一個輸入控件（如文本框）上，從而實現(xiàn)多方面控制用戶輸入的有效性。例如，可以指定文本框為必填，同時輸入的數(shù)據(jù)只能是某特定范圍內(nèi)的數(shù)據(jù)等。 1. 數(shù)據(jù)驗證控件的類型 ASP.NET 2.0提供了6類數(shù)據(jù)驗證控件，這些控件存放在工具箱“驗證”選項卡中。其名稱及說明見表6-13。,4.3

19、數(shù)據(jù)驗證控件,4.3.1 數(shù)據(jù)驗證控件概述,4.3 數(shù)據(jù)驗證控件,4.3.1 數(shù)據(jù)驗證控件概述 2. 數(shù)據(jù)驗證的處理機制 在處理用戶輸入時，Web窗體將用戶的輸入傳送給與輸入控件相關(guān)聯(lián)的驗證控件。驗證控件檢測用戶的輸入，并設(shè)置屬性以指示是否通過了驗證。處理完所有的驗證控件后，將設(shè)置Web窗體上的IsValid屬性，該屬性值為True表示所有驗證通過，否則該屬性值為False。如果驗證控件發(fā)現(xiàn)用戶輸入的數(shù)據(jù)有錯誤，則出錯信息可由該驗證控件顯示到頁面中，也可以由布局在頁面其他位置的ValidationSummary控件，專門負(fù)責(zé)顯示出錯信息。 如果客戶端使用的是IE4.0以上版本的瀏覽器，即支持D

20、HTML，則驗證控件可以使用客戶端腳本進(jìn)行數(shù)據(jù)驗證，由于減少了一次服務(wù)器的往返，所以使用客戶端腳本驗證的效率更高一些。,4.3 數(shù)據(jù)驗證控件,4.3.1 數(shù)據(jù)驗證控件概述 3. 驗證控件的通用屬性,4.3 數(shù)據(jù)驗證控件,4.3.2 必須項驗證控件（RequiredFieldValidator） RequiredFieldValidator控件用于判斷用戶是否完成了必須填寫的輸入數(shù)據(jù)。正常情況下驗證控件在頁面中是不顯示的，只有在出現(xiàn)了輸入錯誤時，才會在控件中顯示出錯提示信息。在頁面布局時，一般可將驗證控件放置在被驗證控件的旁邊。 當(dāng)執(zhí)行驗證時，若驗證控件的初始值（InitialValue屬性值）

21、沒有改變，則導(dǎo)致驗證失敗。InitialValue的初始默認(rèn)值為空字符串。為了避免用戶輸入若干空格來通過驗證，系統(tǒng)會在驗證前自動調(diào)用Trim()方法，將字符串前后多于的空格移除。也就是說被驗證控件中不能輸入完全由空格組成的字符串。 例6-8,4.3 數(shù)據(jù)驗證控件,4.3.3 比較驗證控件（CompareValidator） CompareValidator將輸入控件的值與常數(shù)或其他輸入控件中的值進(jìn)行比較，以確定這兩個值是否與由比較運算符（=、!=、等）指定的關(guān)系匹配。 例6-9,4.3 數(shù)據(jù)驗證控件,4.3.4 范圍驗證控件（RangeValidator） RangeValidator控件的作

22、用是計算被驗證控件的值，以確定該值是否處于指定的最大和最小值（范圍）之間。 使用RangeValidator控件可以檢查用戶的輸入是否在指定的范圍之間，可以檢查由數(shù)字對、字母對和日期對限定的范圍，范圍邊界（最大值和最小值）用常數(shù)表示。 例6-10,4.3 數(shù)據(jù)驗證控件,4.3.5 正則表達(dá)式驗證控件（RegularExpressionValidator） RegularExpressionValidator控件用于計算輸入控件的值以確定該值是否與某個正則表達(dá)式所定義的模式相匹配。 在使用RegularExpressionValidator控件時應(yīng)注意以下幾個問題： 1) 如果輸入控件的值為空，

23、則不調(diào)用任何驗證函數(shù)且可以通過驗證，這通常需要使用必須項驗證控件的配合，以避免用戶跳過某項的輸入。 2) 除非瀏覽器不支持客戶端驗證，或禁用了客戶端驗證，否則客戶端驗證和服務(wù)器端驗證都要被執(zhí)行?？蛻舳说恼齽t表達(dá)式驗證語法與服務(wù)器端略有不同。在客戶端使用的是JScript正則表達(dá)式語法，在服務(wù)器端使用的是Regex語法。由于JScript正則表達(dá)式語法是Regex語法的子集，故最好使用JScript，以便使客戶端和服務(wù)器端得到相同的結(jié)果。,4.3 數(shù)據(jù)驗證控件,4.3.6 自定義驗證控件(CustomValidator) CustomValidator控件用于計算輸入控件的值，以確定它是否通過自

24、定義的驗證邏輯。例如，可以通過自定義的驗證邏輯來創(chuàng)建CustomValidator控件，以控制用戶輸入的數(shù)據(jù)不能包含漢字。 例6-11,4.3 數(shù)據(jù)驗證控件,4.3.7 驗證摘要控件（ValidatorSummary） 若頁面中存在有很多各類驗證控件，則可能出現(xiàn)大量提示信息占用較多頁面的情況，這對Web頁面的美觀性十分不利。 VS 2005提供的ValidatorSummary控件可以將頁面中所有驗證控件的提示信息集中起來，在指定區(qū)域或以一個彈出信息框的形式顯示給用戶。 ValidatorSummary控件為頁面中每個驗證控件顯示的錯誤信息，是由每個驗證控件的ErrorMessage屬性確定。

25、若某驗證控件沒有設(shè)置ErrorMessage屬性，則在ValidatorSummary控件中不顯示該控件的錯誤信息。 ValidatorSummary控件必須與其他驗證控件一起使用，可分別將各驗證控件的Display屬性設(shè)置為“None”，而通過ValidatorSummary控件收集所有驗證錯誤，并在指定的網(wǎng)頁區(qū)域中或以信息框的形式顯示給用戶。,4.4 用戶自定義控件,4.4.1 用戶自定義控件概述 使用Web用戶控件可根據(jù)程序的需要方便地定義控件，且在設(shè)計用戶控件時所使用的編程技術(shù)與設(shè)計Web頁面的技術(shù)完全相同，為了確保用戶控件不能作為一個獨立的Web窗體來使用，用戶控件文件名以“.asc

26、x”為擴展名進(jìn)行標(biāo)識。 在用戶控件上可以使用標(biāo)準(zhǔn)Web窗體上相同的HTML控件和Web服務(wù)器控件。例如，希望創(chuàng)建一個網(wǎng)站導(dǎo)航欄用戶控件，則可將若干ImageButton控件通過HTML表格進(jìn)行布局，并創(chuàng)建這些ImageButton的事件處理程序即可。 用戶控件頁與Web窗體頁主要有以下兩點區(qū)別： 1) 用戶控件頁只能以.ascx為擴展名； 2) 在用戶控件文件中不能包含、元素，這些元素應(yīng)位于宿主頁（用戶控件所在的Web窗體頁）中。,4.4 用戶自定義控件,4.4.2 創(chuàng)建用戶控件,4.4 用戶自定義控件,4.4.3 在設(shè)計視圖中添加用戶控件 用戶控件的界面和事件處理程序編寫完畢后，還必須將其放置在一個Web窗體頁中才能使用。在設(shè)計視圖中打開希望添加用戶控件的Web窗體頁面，注意一定要將頁面切換到“設(shè)計”視圖。 在解決方案資源管理器中將設(shè)計完畢的用戶控件直接拖動到頁面適當(dāng)?shù)奈恢?。窗體設(shè)計器能自動向Web頁面添加Register頁面指示符，從此開始用戶控件就成為了Web窗體的一個組成部分。此外，當(dāng)用戶控件被添加到Web窗體中后，該控件的公共屬性、事件和方法也將向Web窗體公開，并可以通過編程的方式來使