Scott Mitchell 的ASP.NET 2.0資料教程之三十九:: 在編輯和插入介面裡添加驗證控制項

原文 | 下載本教程中的編碼例子 | 下載本教程的PDF版

導言

到目前為止的討論編輯DataList的教程裡，沒有包含任何驗證使用者的輸入，即使是使用者非法輸入— 遺漏了product的name或者負的price— 會導致異常。在前面一章裡我們學習了如何在DataList的UpdateCommand事件處理中添加異常處理代碼，以便在出現異常時捕捉它並顯示友好的錯誤資訊。然而理想的編輯介面應該包含驗證控制項，用來在第一時間裡阻止使用者輸入一些非法資料。

本章我們將學習在DataList的EditItemTemplate裡添加驗證控制項從而提供一個更安全的編輯介面，這非常容易。本章將使用前面建立的例子，並擴充編輯介面用來添加合適的驗證控制項。

第一步: 從 處理 BLL和 DAL的異常複製例子

在 處理BLL和DAL的異常裡我們建立了一個以兩列的方式列出product的name和price的DataList。本章的目標是擴充這個DataList的編輯介面，讓它包含驗證控制項。我們的驗證邏輯如下：

• product的 name 是必填的
• 確保輸入的price的值是合法的貨幣類型格式
• 確保輸入的price的值大於等於0

我們首先需要將ErrorHandling.aspx頁的例子複製到UIValidation.aspx裡。這其中包括頁面的聲明代碼和後台代碼。下面是複製聲明代碼的步驟：

1. 在  Visual Studio的開啟 ErrorHandling.aspx
2. 切換到源視圖
3. 複製從 <asp:Content> 到</asp:Content> 標籤內的代碼， 見圖1.

圖 1: 複製<asp:Content> 內的代碼

4. 開啟UIValidation.aspx
5. 切換到源視圖 
6. 粘貼代碼.

完成上面的步驟後，開啟ErrorHandling.asxp.cs，複製DispalyExcetionDetails方法和三個事件處理（Products_EditCommand,Products_CancelCommand, 和Products_UpdateCommand），注意不要複製聲明類和using的代碼。將這些代碼粘貼到ErrorHandling.asxp.cs裡的EditDeleteDataList_UIValidation 類裡。

完成這些後，瀏覽一下頁面。這兩個頁面無論是輸出還是功能都是一樣的（見圖2）。

圖 2: UIValidation.aspx 頁ErrorHandling.aspx一樣

第二步: 為DataList的 EditItemTemplate添加驗證控制項

當建立輸入表格時，很重要的一點是聲明必要欄位和使用者的輸入必須是格式正確的合法值。為了確保使用者輸入是合法的，ASP.NET提供了5個內建的驗證控制項，這些驗證控制項被設計用來驗證單個的輸入控制項裡的輸入值。

• RequiredFieldValidator —確保必填值
• CompareValidator — 根據另外的控制項的值或常量來驗證某個值，或者確保輸入值是特定的類型
• RangeValidator — 確保輸入值在某個範圍內
• RegularExpressionValidator — 根據Regex（ regular expression ）來驗證某個值
• CustomValidator — 根據使用者自訂的方法來驗證某個值

 

更多的關於這5個控制項的資訊請參考給編輯和新增介面增加驗證控制項  或著ASP.NET Quickstart Tutorials裡的Validation Controls section。

本章裡我們需要使用RequiredFieldValidator 來確保使用者輸入了product的name，CompareValidator 來確保price的值大於等於0並且是合法的貨幣格式。

 

注意：在ASP.NET 1.x裡已經包含了這些驗證控制項了，在ASP.NET 2.0裡對它們有很多改進。其中最重要的兩點一是對除了IE之外的瀏覽器的用戶端指令碼支援，二是同一頁面上的驗證控制項分組。更多的2.0裡驗證控制項新特性的資訊請參考Dissecting the Validation Controls in ASP.NET 2.0.

現在我們來將需要的驗證控制項添加到DataList的EditItemTemplate裡。這個可以通過點擊DataList智能標籤上的Edit Template，或者直接寫聲明代碼來完成。我們這裡使用第一種方法。選擇Edit Template後拖一個RequiredFieldValidator 進來，將它放在ProductName TextBox後面。

圖 3: 添加 RequiredFieldValidator

所有的驗證控制項都只驗證單個的Web控制項。因此我們需要指明剛添加的RequiredFieldValidator 是用來驗證ProductName TextBox。這個關聯是通過將驗證控制項的ControlToValidate property設為合適的Web控制項（在這裡是ProductName）.然後將ErrorMessage property設為“You must provide the product’s name”，Text property設為“*”。如果提供了Text屬性的值，它將在驗證失敗時顯示。ErrorMessage 屬性是提供給ValidationSummary 控制項使用的。如果省略了Text的值，在非法輸入時會顯示 ErrorMessage 。

完成這些後你的頁面看起來應該和圖4差不多：

圖 4: 設定 RequiredFieldValidator的 ControlToValidate, ErrorMessage, 和Text Properties

添加完RequiredFieldValidator 後，剩下的事就是為product的price添加驗證控制項了。由於編輯時UnitPrice屬於可選項，所以我們不用添加RequiredFieldValidator。我們需要做的是添加一個CompareValidator 來保證在輸入了price的情況下，它的值是正確的貨幣格式和大於等於0。

為EditIteTemplate添加一個ControlToValidate 屬性為UnitPrice的CompareValidator 。將ErrorMessage 設為“The price must be greater than or equal to zero and cannot include the currency symbol”，Text設為“*”。為了指定UnitPrice的值必須大於等於0，將CompareValidator的Operator property設為GreaterThanEqual，ValueToCompare property設為“0”，Type property設為Currency。

添加完這兩個驗證控制項後,DataList的EditItemTemplate聲明代碼應該和下面差不多：

ASP.NET

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<EditItemTemplate> Product name: <asp:TextBox ID="ProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="ProductName" ErrorMessage="You must provide the product's name" runat="server">*</asp:RequiredFieldValidator> <br /> Price: <asp:TextBox ID="UnitPrice" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox> <asp:CompareValidator ID="CompareValidator1" ControlToValidate="UnitPrice" ErrorMessage="The price must be greater than or equal to zero and cannot include the currency symbol" Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0" runat="server">*</asp:CompareValidator><br /> <br /> <asp:Button ID="UpdateProduct" runat="server" CommandName="Update" Text="Update" />&nbsp; <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel" Text="Cancel" /> </EditItemTemplate>

瀏覽一下頁面。現在如果你編輯的時候不輸入name或者在price裡輸入一個非法的值，在textbox後面會出現一個“*”。見圖5。一個包含貨幣符號的值—比如$19.95 —被認為是合法的。CompareValidator的Currency 類型允許數字分隔字元（比如句號和逗號）和前面帶"+"或"-"號，但是不允許帶貨幣符號。而在編輯介面裡的UnitPrice又會以貨幣格式展現，這可能會讓使用者感到困惑。

圖 5: 非法輸入 Textboxes 後面會出現“*”

當驗證控制項象上面這樣工作時，使用者在編輯時需要手工移除掉貨幣符號，這是不可接受的。而且，如果在編輯的時候有非法輸入，不管是點Update還是Cancel button，頁面都會postback。理想的情況是，點Cancel button會返回DataList的編輯前狀態，而不管輸入的值是否合法。當然由於使用者的瀏覽器可能不支援JavaScript 或者被禁用了，在更新product資訊前我們要在UpdateCommand事件處理裡確保頁面的資料都是合法的。

從EditItemTemplate的UnitPrice TextBox裡移除貨幣符號

當使用CompareValidator的貨幣類型時，輸入不能包含任何貨幣符號，否則CompareValidator 會視為非法。然而編輯介面裡的UnitPrice TextBox已經包含了一個貨幣符號，這就意味著使用者在儲存前必須手動移除它。我們有三種方法來修補它：

1. 配置EditItemTemplate 使 UnitPrice TextBox 的值的格式不為貨幣.
2. 用RegularExpressionValidator 代替CompareValidator來檢查正確格式的貨幣值 . 這裡的挑戰是用Regex不象用CompareValidator 那樣直接，方便，需要寫一些代碼。
3. 移除所有的驗證控制項，驗證的功能將完全依賴於伺服器端的GridView的RowUpdating事件處理。

我們這裡使用第一種方法。現在UnitPrice為貨幣格式是由於TextBox的綁定運算式<%# Eval("UnitPrice", "{0:c}") %>. 將它修改為 Eval("UnitPrice", "{0:n2}")（允許兩位小數的數字）。這個可以通過點擊DataList裡EditItemTemplate裡的UnitPrice TextBox的Edit DataBindings連結或直接修改聲明文法來完成。

完成這些後，編輯介面的price格式包含兩種分隔字元，逗號和句號。

注意：在移除貨幣格式的時候，我發現將貨幣符號作為text放在TextBox前面是一種好的做法。它會提醒使用者他們不需要再輸入貨幣符號。

修補 Cancel Button

預設情況下，驗證控制項產生JavaScript 在用戶端執行驗證。當點擊Button, LinkButton, 或ImageButton時，驗證控制項會在頁面postback之前檢查。如果有非法的資料，postback不會發生。然而對某些Button來說，這時並不需要驗證資料。在這樣的情況下，取消了postback是非常討厭的。

Cancel button就屬於這種情況。想象一下使用者輸入了非法的資料，比如忽略了product的name，然後決定他不需要儲存product，然後點擊了Cancel button。在這種情況下，Cancel button會觸發驗證控制項，它會報告說缺少product的name，並阻止postback。我們的使用者不得不向Product TextBox裡輸入一些文字然後再取消編輯。

 validation logic (defaults to True). Set the Cancel Button’s CausesValidation property to False.
幸運的是，Button, LinkButton, 和ImageButton 有CausesValidation property，它可以指明當點擊Button時是否需要發起驗證（預設為True）。將 Cancel Button的CausesValidation 設為False.

在 UpdateCommand Event Handler裡確保輸入是合法的

用戶端的指令碼是由驗證控制項產生的，如果使用者輸入非法資料，並點擊CausesValidation屬性 為True的button時將不會引起postback。然而如果使用者使用者使用的是版本很低的瀏覽器或者禁用了對JavaScript 的支援，那麼用戶端的驗證將不會執行。

頁面postback的時候所有的驗證控制項執行驗證，然後將驗證報告提交給Page.IsValid property。然而，整個流程並不會被Page.IsValid的值打斷。作為開發人員，我們需要保證在Page.IsValid為True的情況下代碼再繼續運行。

如果禁用了JavaScript 的使用者瀏覽我們的頁，編輯了product，在price裡輸入一個“太貴”的值，然後點Update button，用戶端的驗證將被跳過，頁面會繼續postback。UpdateCommand事件處理將執行，隨後在試圖將“太貴”的價格轉換為Decimal時拋出異常。雖然已經寫過異常處理了，但是我們其實可以根據Page.IsValid的值在第一時間裡阻止非法輸入。

在UpdateCommand 的最開始加上下面的代碼：

C#
1 2	if (!Page.IsValid) return;

完成這個後，product將只在提交的資料合法時才被更新。大多數使用者的非法提交會由於用戶端指令碼而被拒絕postback，而那些瀏覽器不支援JavaScript 或禁用了JavaScript 的客戶會跳過用戶端檢查，提交非法資料。

注意：細心的讀者會記起在GridView裡更新資料時，我們並不需要顯式的檢查Page.IsValid 。這是因為GridView已經幫我們完成了這部分工作，即它只在Page.IsValid 為True時才繼續更新。

第三步: Summarizing Data Entry Problems

除了上面提到的5種驗證控制項外，ASP.NET還包含ValidationSummary control，它用來顯示那些檢查到非法資料的驗證控制項的錯誤資訊。這些匯總的資料可以以文本或用戶端訊息框的方式顯示。我們現在來添加包含驗證問題匯總資訊的用戶端訊息框。

拖一個ValidationSummary 進來。由於我們將它配置為以訊息框的形式顯示匯總資訊，所以它的位置無所謂。將 ShowSummary property設為False， ShowMessageBox property設為True.這樣，所有驗證的錯誤資訊會以用戶端訊息框的形式顯示。見圖6。

圖 6: 用一個用戶端訊息框匯總驗證的錯誤資訊

總結

本章我們學習了如何使用驗證控制項保證在更新開始前確保使用者的輸入是合法的，從而減少異常的出現。ASP.NET提供了5種驗證控制項來檢查特定的控制項的輸入並報告是否合法。本章我們使用了其中的兩種 —RequiredFieldValidator  和CompareValidator —來保證product的name是必填的和price是大於等於0的貨幣格式。

在DataList的編輯介面裡加驗證控制項只需要簡單的將它們拖到EditItemTemplate裡，然後設定幾個屬性。預設情況下驗證控制項自動產生用戶端驗證指令碼，當然也提供在postback時的伺服器端驗證，並將所有的結果累積儲存在Page.IsValid 裡。在點擊Button,LinkButton或ImageButton時，可以將CausesValidation 設為False從而跳過用戶端驗證。在執行任何代碼前，首先需要保證 Page.IsValid 為True.

All of the DataList editing tutorials we’ve examined so far have had very simple editing interfaces — a TextBox for the product’s name and another for the price. The editing interface, however, can contain a mix of different Web controls, such as DropDownLists, Calendars, RadioButtons, CheckBoxes, and so on. In our next tutorial we’ll look at building an interface that uses a variety of Web controls.
目前我們學習的DataList的編輯教程都只是簡單的介面— 在TextBox裡顯示name和price。然而編輯介面可以包含各種不同的web控制項，比如DropDownLists，Calenda，RadioButtons, CheckBoxes等。我們下章會建立一個包含各種web控制項的介面。

祝編程愉快！