Web程序設(shè)計-第6章-HTML控件和Web服務(wù)器控件

第6章HTML控件和Web效勞器控件本章講述的主要內(nèi)容 6.1ASP.NET控件概述 6.2標準效勞器端控件 6.3數(shù)據(jù)驗證控件 6.4用戶自定義控件 6.1ASP.NET控件概述6.1.1HTML控件HTML控件在默認情況下屬于客戶端〔瀏覽器〕控件，效勞器無法對其進行控制。HTML控件是從HTML標記衍生而來的，每個控件對應(yīng)于一個或一組HTML標記。例如，前面我們經(jīng)常使用的HTML表格控件，就是一個常用于頁面布局工具的HTML控件，如果不使用工具箱中的控件，而直接在源視圖中書寫相應(yīng)的HTML代碼也可以得到相同的效果，但使用控件可以節(jié)省大量的代碼書寫時間，且使操作變成了可視化的方式。HTML控件可以通過修改代碼將其變成Web效勞器端控件，幾乎所有的HTML標記只要加上runat="server"，這個效勞器控件標識屬性后都可以變成效勞器端控件。這與普通HTML標記相比最大的區(qū)別在于，效勞器端控件可以通過效勞器端代碼來控制。6.1ASP.NET控件概述6.1.2效勞器端控件1.效勞器端控件的執(zhí)行過程當用戶請求一個包含有Web效勞器端控件的.aspx頁面時，效勞器首先對頁面進行處理，將頁面中包含的效勞端控件及其他內(nèi)容解釋成標準的HTML代碼，然后將處理結(jié)果以標準HTML的形式一次性發(fā)送給客戶端。2.ASP.NET頁面的處理過程當用戶通過瀏覽器發(fā)出一個對ASP.NET頁面的請求后，Web效勞器將用戶的請求交由ASP.NET引擎來處理。系統(tǒng)首先會檢查在效勞器緩存中是否有該頁面，或此頁面是否已被編譯成了.dll文件〔DynamicLinkLibrary，動態(tài)鏈接庫〕。假設(shè)沒有那么將頁面轉(zhuǎn)換為源程序代碼，然后由編譯器將其編譯成.dll文件，否那么直接利用已編譯過的.dll文件建立對象，并將執(zhí)行結(jié)果返回到客戶端瀏覽器。6.2標準效勞器端控件6.2.1ImageButton和HyperLink控件ImageButton〔圖像按鈕〕、Image〔圖像〕和HyperLink〔超鏈接〕控件都可以在控件中顯示圖片，且都具有超鏈接跳轉(zhuǎn)的功能。1.ImageButton控件

6.2標準效勞器端控件6.2.1ImageButton和HyperLink控件2.HyperLink控件雙擊HyperLink〔超鏈接〕控件在工具箱中的圖標，可將控件添加到當前頁面光標所在位置。HyperLink控件與標簽控件很相似，但該控件支持用戶的單擊事件，可以在控件中顯示圖片，可以指定超鏈接的目標框架等特有屬性。6.2標準效勞器端控件6.2.2Image和ImageMap控件Image控件和ImageMap控件都是用于圖片顯示的控件。1.Image控件6.2標準效勞器端控件6.2.2Image和ImageMap控件2.ImageMap控件例6-1利用ImageMap控件可以創(chuàng)立一個圖像，該圖像包含任意數(shù)目的，用戶可以單擊的區(qū)域，這些區(qū)域稱為“作用點”。每一個作用點都可以是一個單獨的超鏈接或回發(fā)事件。ImageMap控件與其他網(wǎng)頁編輯工具〔如Dreamware〕提供的“熱點地圖”功能類似。ImageMap控件主要由以下兩個局部組成：1)顯示于控件中的圖像。它可是任何標準Web圖形格式的圖形，如*.gif、*.jpg或*.png文件，該圖像構(gòu)成用戶操作界面。2)隱藏在圖像中的作用點集合。每個作用點控件都是一個不同的Web元素。對于每個作用點控件，需要定義其形狀〔圓形、矩形或多邊形〕以及用于指定作用點位置和大小的坐標。例如，如果創(chuàng)立一個圓形作用點，那么應(yīng)定義圓心的x、y坐標及圓的半徑。6.2標準效勞器端控件6.2.3RadioButton和RadioButtonList控件1.單項選擇按鈕控件〔RadioButton〕6.2標準效勞器端控件6.2.3RadioButton和RadioButtonList控件2.單項選擇按鈕組控件〔RadioButtonList〕6.2標準效勞器端控件6.2.4CheckBox和CheckList控件CheckBox〔復(fù)選框〕與CheckList〔復(fù)選框組〕控件的作用十分相似，都是用于向用戶提供多項選擇輸入數(shù)據(jù)的控件。用戶可以在控件提供的多個選項中選擇一個或多個。被選中的對象中帶有一個“√”標記，CheckBox和CheckList控件的外觀如圖6-15所示。6.2標準效勞器端控件6.2.5ListBox和DropDownList控件ListBox〔列表框〕和DropDownList〔下拉列表框〕控件也是一種常見的用于向用戶提供輸入數(shù)據(jù)選項的控件，其外觀如圖6-15和圖6-16所示。例6-26.2標準效勞器端控件6.2.6FileUpload控件文件上傳〔FileUpload〕控件，顧名思義是用于將文件從本地計算機上傳到遠程Web效勞器的控件，使用該控件可替代ASP程序中常用FSO〔文件系統(tǒng)對象〕，且FileUpload控件具有更高的效率和平安性。FileUpload控件在工具箱的圖標為。如圖6-21所示，從外觀上看FileUpload控件有一個文本框和一個【瀏覽】按鈕控件組成，用戶可直接在文本框中輸入希望上傳的文件名〔包括文件存放路徑〕。假設(shè)用戶在Web頁面中單擊控件的【瀏覽】按鈕時，系統(tǒng)將自動彈出一個“選擇文件”對話框〔類似與Windows的“翻開”對話框〕，通過該對話框用戶可根據(jù)需要選擇希望上傳到遠程Web效勞器的文件。出于平安方面的考慮，不能將文件名預(yù)先加載到FileUpload控件中。6.2標準效勞器端控件6.2.7Table控件前面介紹過在Web頁面中用于頁面布局的HTML表格控件，那是一種用于靜態(tài)環(huán)境的布局工具。在工具箱“標準”選項卡中也有一個Table控件，其圖標為。這是一個Web效勞器端控件，使用該控件可更易于編程，用戶可通過程序代碼方便地控制表格中顯示的內(nèi)容及表格的行、列數(shù)。Tabel控件除了具有HTML表格的一般屬性，如BackImageUrl〔背景圖片〕、BackColor〔背景顏色〕、BorderStyle〔邊框樣式〕、BorderColor〔背景顏色〕、CellPadding〔單元格內(nèi)間距〕、CellSpacing〔單元格之間距離〕、GridLines〔單元格框線〕、Width〔寬〕、Height〔高〕等，還具有兩個關(guān)鍵的子對象TableRow和TableCell，前者用于創(chuàng)立和設(shè)置表格中的行，后者用于創(chuàng)立和設(shè)置表格中的列。通常可以通過TableCell對象的Text屬性從單元格讀取，或向其中寫入數(shù)據(jù)。例6-46.2標準效勞器端控件6.2.8容器控件所謂“容器”控件是指可以安放其他控件的控件。ASP.NET2.0提供有兩種容器控件，PlaceHolder和Panel控件。PlaceHolder控件用于在Web頁面上保存一個位置，以便在程序運行時向其中動態(tài)地添加其他控件，這對動態(tài)網(wǎng)頁的布局設(shè)計是十分有利的。Panel控件對應(yīng)于HTML的<div>標記，其作用與PlaceHolder控件相似，可以將放置在其中的一組控件作為一個整體來操作。最常用的是通過設(shè)置Panel的Visible屬性來控制這一組控件的顯示或隱藏。【例6-5】6.2標準效勞器端控件6.2.9Calendar控件1.Calendar控件的常用屬性2.Calendar控件的主要事件3.Calendar控件應(yīng)用實例

【例6-6】

6.2標準效勞器端控件6.2.10AdRotator控件AdRotator〔廣告〕控件，可配合XML說明文件，在頁面中產(chǎn)生一個可動態(tài)顯示圖片的廣告展現(xiàn)框。假設(shè)將鼠標指針指向圖片，可顯示出預(yù)設(shè)的廣告詞，單擊圖片可導(dǎo)航到預(yù)設(shè)的URL地址。用戶每次刷新頁面廣告展現(xiàn)框中的圖片都會有所不同，且不同圖片出現(xiàn)的頻率，可由XML文件中的設(shè)置決定。

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

6.3數(shù)據(jù)驗證控件6.3.1數(shù)據(jù)驗證控件概述2.數(shù)據(jù)驗證的處理機制在處理用戶輸入時，Web窗體將用戶的輸入傳送給與輸入控件相關(guān)聯(lián)的驗證控件。驗證控件檢測用戶的輸入，并設(shè)置屬性以指示是否通過了驗證。處理完所有的驗證控件后，將設(shè)置Web窗體上的IsValid屬性，該屬性值為True表示所有驗證通過，否那么該屬性值為False。如果驗證控件發(fā)現(xiàn)用戶輸入的數(shù)據(jù)有錯誤，那么出錯信息可由該驗證控件顯示到頁面中，也可以由布局在頁面其他位置的ValidationSummary控件，專門負責顯示出錯信息。如果客戶端使用的是IE4.0以上版本的瀏覽器，即支持DHTML，那么驗證控件可以使用客戶端腳本進行數(shù)據(jù)驗證，由于減少了一次效勞器的往返，所以使用客戶端腳本驗證的效率更高一些。6.3數(shù)據(jù)驗證控件6.3.1數(shù)據(jù)驗證控件概述

3.驗證控件的通用屬性

6.3數(shù)據(jù)驗證控件6.3.2必須項驗證控件〔RequiredFieldValidator〕RequiredFieldValidator控件用于判斷用戶是否完成了必須填寫的輸入數(shù)據(jù)。正常情況下驗證控件在頁面中是不顯示的，只有在出現(xiàn)了輸入錯誤時，才會在控件中顯示出錯提示信息。在頁面布局時，一般可將驗證控件放置在被驗證控件的旁邊。當執(zhí)行驗證時，假設(shè)驗證控件的初始值〔InitialValue屬性值〕沒有改變，那么導(dǎo)致驗證失敗。InitialValue的初始默認值為空字符串。為了防止用戶輸入假設(shè)干空格來通過驗證，系統(tǒng)會在驗證前自動調(diào)用Trim()方法，將字符串前后多于的空格移除。也就是說被驗證控件中不能輸入完全由空格組成的字符串。例6-86.3數(shù)據(jù)驗證控件6.3.3比較驗證控件〔CompareValidator〕CompareValidator將輸入控件的值與常數(shù)或其他輸入控件中的值進行比較，以確定這兩個值是否與由比較運算符〔==、!=、<、>等〕指定的關(guān)系匹配。例6-96.3數(shù)據(jù)驗證控件6.3.4范圍驗證控件〔RangeValidator〕RangeValidator控件的作用是計算被驗證控件的值，以確定該值是否處于指定的最大和最小值〔范圍〕之間。使用RangeValidator控件可以檢查用戶的輸入是否在指定的范圍之間，可以檢查由數(shù)字對、字母對和日期對限定的范圍，范圍邊界〔最大值和最小值〕用常數(shù)表示。例6-106.3數(shù)據(jù)驗證控件6.3.5正那么表達式驗證控件〔RegularExpressionValidator〕RegularExpressionValidator控件用于計算輸入控件的值以確定該值是否與某個正那么表達式所定義的模式相匹配。在使用RegularExpressionValidator控件時應(yīng)注意以下幾個問題：1)如果輸入控件的值為空，那么不調(diào)用任何驗證函數(shù)且可以通過驗證，這通常需要使用必須項驗證控件的配合，以防止用戶跳過某項的輸入。2)除非瀏覽器不支持客戶端驗證，或禁用了客戶端驗證，否那么客戶端驗證和效勞器端驗證都要被執(zhí)行?？蛻舳说恼敲幢磉_式驗證語法與效勞器端略有不同。在客戶端使用的是JScript正那么表達式語法，在效勞器端使用的是Regex語法。由于JScript正那么表達式語法是Regex語法的子集，故最好使用JScript，以便使客戶端和效勞器端得到相同的結(jié)果。6.3數(shù)據(jù)驗證控件6.3.6自定義驗證控件(CustomValidator)CustomValidator控件用于計算輸入控件的值，以確定它是否通過自定義的驗證邏輯。例如，可以通過自定義的驗證邏輯來創(chuàng)立CustomValidator控件，以控制用戶輸入的數(shù)據(jù)不能包含漢字。例6-116.3數(shù)據(jù)驗證控件6.3.7驗證摘要控件〔ValidatorSummary〕假設(shè)頁面中存在有很多各類驗證控件，那么可能出現(xiàn)大量提示信息占用較多頁面的情況，這對Web頁面的美觀性十分不利。VS2005提供的ValidatorSummary控件可以將頁面中所有驗證控件的提示信息集中起來，在指定區(qū)域或以一個彈出信息框的形式顯示給用戶。ValidatorSummary控件為頁面中每個驗證控件顯示的錯誤信息，是由每個驗證控件的ErrorMessage屬性確定。假設(shè)某驗證控件沒有設(shè)置ErrorMessage屬性，那么在ValidatorSummary控件中不顯示該控件的錯誤信息。ValidatorSummary控件必須與其他驗證控件一起使用，可分別將各驗證控件的Display屬性設(shè)置為“None”，而通過ValidatorSummary控件收集所有驗證錯誤，并在指定的網(wǎng)頁區(qū)域中或以信息框的形式顯示給用戶。6.4用戶自定義控件6.4.1用戶自定義控件概述使用Web用戶控件可根據(jù)程序的需要方便地定義控件，且在設(shè)計用戶控件時所使用的編程技術(shù)與設(shè)計Web頁面的技術(shù)完全相同，為了確保用戶控件不能作為一個獨立的Web窗體來使用，用戶控件文件名以“.ascx”為擴展名進行標識。在用戶控件上可以使用標準Web窗體上相同的HTML控件和Web效勞器控件。例如，希望創(chuàng)立一個網(wǎng)站導(dǎo)航欄用戶控件，那么可將假設(shè)干ImageButton控件通過HTML表格進行布局，并創(chuàng)立這些ImageButton的事件處理程序即可。用戶控件頁與Web窗體頁主要有以下兩點區(qū)別：1)用戶控件頁只能以.ascx為擴展名；2)在用戶控件文件中不能包含<html>、<body>、<from>元素，這些元素應(yīng)位于宿主頁〔用戶控件所在的Web窗體頁〕中。6.4用戶自定義控件6.4.2創(chuàng)立用戶控件6.4用戶自定義控件6.4.3在設(shè)計視圖中添加用戶控件用戶控件的界面和事件處理程序編寫完畢后，還必須將其放置在一個Web窗體頁中才能使用。在設(shè)計視圖中翻開希望添加用戶控件的Web窗體頁面，注意一定要將頁面切換到“設(shè)計”視圖。在解決方案資源管理器中將設(shè)計完畢的用戶控件直接拖動到頁面適當?shù)奈恢?。窗體設(shè)計器能自動向Web頁面添加@Register頁面指示符，從此開始用戶控件就成為了Web窗體的一個組成局部。此外，當用戶控件被添加到Web窗體中后，該控件的公共屬性、事件和方法也將向Web窗體公開，并可以通過編程的方式來使用。例6-136.4用戶自定義控件6.4.4程序運行時動態(tài)添加用戶控件用戶控件也可以在程序運行時通過代碼動態(tài)地加載，這樣就能根據(jù)實際需要向頁面中添加不同的用戶控件，或通過循環(huán)向頁面中添加假設(shè)干個相同的用戶控件。在實際應(yīng)用中，通常需要在主Web頁面中添加一個容器控件PlaceHolder，作為用戶自定義控件的“占位”控件。在程