Share via


將驗證控制項新增至編輯和插入介面 (C#)

作者 :Scott Mitchell

下載 PDF

在本教學課程中,我們將瞭解如何將驗證控件新增至數據 Web 控件的 EditItemTemplate 和 InsertItemTemplate,以提供更易懂的使用者介面。

簡介

我們在過去三個教學課程中探索的範例中的 GridView 和 DetailsView 控件全都由 BoundFields 和 CheckBoxFields 組成, (Visual Studio 透過智慧標記將 GridView 或 DetailsView 系結至數據源控件時自動新增的字段類型) 。 在 GridView 或 DetailsView 中編輯數據列時,不是只讀的 BoundFields 會轉換成文本框,使用者可以從其中修改現有的數據。 同樣地,在 DetailsView 控制項中插入新記錄時,屬性 InsertVisible 設定為 true (預設) 的 BoundFields 會轉譯為空白文字框,用戶可以在其中提供新記錄的域值。 同樣地,在標準唯讀介面中停用的 CheckBoxFields 會轉換成編輯和插入介面中的已啟用複選框。

雖然 BoundField 和 CheckBoxField 的預設編輯和插入介面很有説明,但介面缺少任何類型的驗證。 如果使用者發生數據輸入錯誤,例如省略 ProductName 字段或 (輸入 UnitsInStock 無效的值,例如 -50) 例外狀況將會從應用程式架構的深度引發。 雖然此例外狀況可以正常處理,如 上一個教學課程所示,但理想情況下,編輯或插入使用者介面會包含驗證控件,以防止使用者第一次輸入這類無效的數據。

為了提供自定義的編輯或插入介面,我們需要以TemplateField取代 BoundField 或 CheckBoxField。 TemplateFields 是 GridView 控件中使用 TemplateFields 和 DetailsView 控件教學課程中使用 TemplateFields 討論的主題,可以包含多個範本,定義不同數據列狀態的個別介面。 TemplateField 用於 ItemTemplate 呈現 DetailsView 或 GridView 控制項中的唯讀欄位或數據列,而 EditItemTemplateInsertItemTemplate 則分別表示用於編輯和插入模式的介面。

在本教學課程中,我們將瞭解如何將驗證控件新增至 TemplateField 的 EditItemTemplate ,並提供 InsertItemTemplate 更易懂的使用者介面。 具體而言,本教學課程會採用在 檢查與插入、更新和刪除相關的事件 教學課程中建立的範例,並增強編輯和插入介面以包含適當的驗證。

步驟 1:複寫範例,以檢查與插入、更新和刪除相關聯的事件

檢查與插入、更新和刪除相關聯的事件 教學課程中,我們建立了一個頁面,其中列出可編輯 GridView 中產品的名稱和價格。 此外,頁面也包含 DetailsView,其 DefaultMode 屬性設定為 Insert,因此一律會在插入模式中呈現。 在此 DetailsView 中,使用者可以輸入新產品的名稱和價格,按兩下 [插入],並將其新增至系統 (請參閱圖 1) 。

上一個範例可讓使用者新增產品並編輯現有的產品

圖 1:上一個範例可讓使用者新增產品並編輯現有產品, (按兩下即可檢視完整大小的影像)

本教學課程的目標是要增強 DetailsView 和 GridView 以提供驗證控件。 特別是,我們的驗證邏輯會:

  • 要求在插入或編輯產品時提供名稱
  • 要求在插入記錄時提供價格;編輯記錄時,我們仍需要價格,但會使用 GridView RowUpdating 事件處理程式中的程式設計邏輯,已從先前的教學課程中呈現
  • 確定為價格輸入的值是有效的貨幣格式

我們必須先從DataModificationEvents.aspx頁面將範例複寫到本教學課程的頁面,才能增強先前的範例以包含驗證。 UIValidation.aspx 若要達成此目的,我們必須複製 DataModificationEvents.aspx 頁面的宣告式標記及其原始程式碼。 執行下列步驟,先複製宣告式標記:

  1. DataModificationEvents.aspx在 Visual Studio 中開啟頁面
  2. 移至頁面的宣告式標記 (按下頁面底部的 [來源] 按鈕)
  3. 複製 和 </asp:Content> 標籤內的<asp:Content>文字, (行 3 到 44) ,如圖 2 所示。

複製 asp:Content> 控件內的<文字

圖 2:複製控件內的 <asp:Content> 文字 (按兩下即可檢視全大小的影像)

  1. UIValidation.aspx開啟頁面
  2. 移至頁面的宣告式標記
  3. 貼上 控件內的 <asp:Content> 文字。

若要複製原始程式碼,請開啟DataModificationEvents.aspx.cs頁面,並只複製 類別內的EditInsertDelete_DataModificationEvents文字。 複製三個事件處理程式 (Page_LoadGridView1_RowUpdatingObjectDataSource1_Inserting) ,但 請勿 複製類別宣告或 using 語句。 在類別貼上複製的EditInsertDelete_UIValidationUIValidation.aspx.cs文字。

將內容和程式代碼從 DataModificationEvents.aspxUIValidation.aspx移至 之後,請花一點時間在瀏覽器中測試進度。 您應該會在這兩個頁面中看到相同的輸出,並體驗相同的功能, (請參閱圖 1,以取得作用中) 的 DataModificationEvents.aspx 螢幕快照。

步驟 2:將 BoundFields 轉換為 TemplateFields

若要將驗證控件新增至編輯和插入介面,DetailsView 和 GridView 控件所使用的 BoundFields 必須轉換成 TemplateFields。 若要達成此目的,請分別按兩下 GridView 和 DetailsView 智慧標記中的 [編輯資料行] 和 [編輯字段] 連結。 在該處,選取每個 BoundFields,然後按兩下 [將此字段轉換成 TemplateField] 連結。

將每個 DetailsView 和 GridView 的 BoundFields 轉換成 TemplateFields

圖 3:將每個 DetailsView 和 GridView 的 BoundFields 轉換成 TemplateFields (按兩下即可檢視完整大小的影像)

透過 [字段] 對話框將 BoundField 轉換成 TemplateField,會產生一個 TemplateField,以呈現與 BoundField 本身相同的唯讀、編輯和插入介面。 下列標記顯示 DetailsView 中欄位在轉換成 TemplateField 之後的宣告式語法 ProductName

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <InsertItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </InsertItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

請注意,此 TemplateField 有三個樣本會自動建立 ItemTemplateEditItemTemplateInsertItemTemplate。 會顯示 ItemTemplate 單一數據域值 (ProductName 使用標籤 Web 控件) ,而 EditItemTemplateInsertItemTemplate 則會在 TextBox Web 控件中呈現數據域值,以使用雙向數據系結將數據欄位與 TextBox 的 Text 屬性產生關聯。 由於我們只會使用此頁面中的 DetailsView 進行插入,因此您可以移除和EditItemTemplate從這兩個 TemplateFields 中移除 ItemTemplate ,雖然離開它們並沒有任何損害。

由於 GridView 不支援 DetailsView 的內建插入功能,因此將 GridView 的 ProductName 欄位轉換成 TemplateField 只會 ItemTemplate 產生 和 EditItemTemplate

<asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

單擊 [將此字段轉換成 TemplateField],Visual Studio 已建立 TemplateField,其範本會模擬已轉換 BoundField 的使用者介面。 您可以透過瀏覽器瀏覽此頁面來確認這一點。 您會發現 TemplateFields 的外觀和行為與已改用 BoundFields 的體驗相同。

注意

您可以視需要自訂範本中的編輯介面。 例如,我們可能會想要讓 TemplateFields 中的 UnitPrice TextBox 轉譯為比文本框更小的文字框 ProductName 。 若要達成此目的,您可以將 TextBox 的 Columns 屬性設定為適當的值,或透過 Width 屬性提供絕對寬度。 在下一個教學課程中,我們將瞭解如何將 TextBox 取代為替代數據輸入 Web 控件,以完全自定義編輯介面。

步驟 3:將驗證控件新增至 GridView 的EditItemTemplate

建構數據輸入表單時,請務必讓使用者輸入任何必要欄位,而且所有提供的輸入都是合法、格式正確的值。 為了協助確保使用者的輸入有效,ASP.NET 提供五個內建驗證控件,其設計目的是要用來驗證單一輸入控件的值:

如需這五個控件的詳細資訊,請參閱 ASP.NET 快速入門教學課程驗證控件一節

在本教學課程中,我們必須在 DetailsView 和 GridView 的 ProductName TemplateFields 和 DetailsView 的 TemplateFieldValidator 中使用 RequiredFieldValidator,以及 DetailsView 的 UnitPrice TemplateField 中的 RequiredFieldValidator。 此外,我們需要將 CompareValidator 新增至這兩個控件 UnitPrice 的 TemplateFields,以確保輸入的價格值大於或等於 0,並以有效的貨幣格式呈現。

注意

雖然 ASP.NET 1.x 有這五個相同的驗證控件,ASP.NET 2.0 新增了一些改善,但主要兩個是 Internet Explorer 以外的瀏覽器用戶端腳本支援,以及將頁面上的驗證控件分割成驗證群組的能力。

讓我們從將必要的驗證控件新增至 EditItemTemplate GridView 的 TemplateFields 中的 開始。 若要達成此目的,請按兩下 GridView 智慧標記中的 [編輯範本] 連結,以顯示範本編輯介面。 您可以從這裡從下拉式清單中選取要編輯的範本。 由於我們想要增強編輯介面,因此必須將驗證控制項新增至 ProductNameUnitPriceEditItemTemplate

我們需要擴充 ProductName 和 UnitPrice 的 EditItemTemplates

圖 4:我們需要擴充 ProductNameUnitPriceEditItemTemplate (按兩下即可檢視完整大小的影像)

在 中 ProductNameEditItemTemplate,將 RequiredFieldValidator 從 [工具箱] 拖曳至範本編輯介面,並將它拖曳到 TextBox 之後。

將 RequiredFieldValidator 新增至 ProductName EditItemTemplate

圖 5:將 RequiredFieldValidator 新增至 ProductNameEditItemTemplate (按兩下即可檢視完整大小的影像)

所有驗證控件的運作方式是驗證單一 ASP.NET Web 控件的輸入。 因此,我們需要指出我們剛新增的 RequiredFieldValidator 應該根據 中的 EditItemTemplateTextBox 進行驗證;這可藉由將驗證控件的 ControlToValidate 屬性 設定為 ID 適當 Web 控件的 來完成。 TextBox 目前具有 非描述 IDTextBox1但讓我們將其變更為更適當的專案。 點選取樣本中的 TextBox,然後從 屬性視窗 將變更IDTextBox1EditProductName

將 TextBox 的標識碼變更為 EditProductName

圖 6:將 TextBox 的 變更為 IDEditProductName (按兩下即可檢視完整大小的影像)

接下來,將 RequiredFieldValidator 的 ControlToValidate 屬性設定為 EditProductName。 最後,將 ErrorMessage 屬性 設定為 “You must provide the product's name”,並將 Text 屬性 設定為 “*”。 Text如果提供屬性值,則為驗證控件在驗證失敗時所顯示的文字。 ErrorMessage ValidationSummary 控件會使用必要屬性值;如果Text省略屬性值,ErrorMessage屬性值也是驗證控件在無效輸入上所顯示的文字。

設定 RequiredFieldValidator 的這三個屬性之後,您的畫面看起來應該類似圖 7。

設定 RequiredFieldValidator 的 ControlToValidate、ErrorMessage 和 Text 屬性

圖 7:設定 RequiredFieldValidator 的 ControlToValidateErrorMessageText Properties (按兩下即可檢視完整大小的影像)

將 RequiredFieldValidator 新增至 ProductNameEditItemTemplate時,所有剩餘專案都是將必要的驗證新增至 UnitPriceEditItemTemplate。 由於我們已決定在此頁面中,編輯記錄時是 UnitPrice 選擇性的,因此不需要新增 RequiredFieldValidator。 不過,我們需要新增 CompareValidator,以確保 UnitPrice提供時,格式正確為貨幣且大於或等於 0。

將 CompareValidator 新增至 UnitPriceEditItemTemplate之前,讓我們先將 TextBox Web 控制件的識別碼從 TextBox2 變更為 EditUnitPrice。 進行這項變更之後,將 CompareValidator 的 屬性設定ControlToValidate為 、其 ErrorMessage 屬性設為 “Price 必須大於或等於零,且不能包含貨幣符號”,並將其Text屬性設定EditUnitPrice為 “*”。

若要指出 UnitPrice 值必須大於或等於 0,請將 CompareValidator 的 Operator 屬性 設定為 GreaterThanEqual、其 ValueToCompare 屬性 設定為 “0”,並將其 Type 屬性 設定為 Currency。 下列宣告式語法顯示 UnitPrice TemplateField EditItemTemplate 在進行這些變更之後的 :

<EditItemTemplate>
    <asp:TextBox ID="EditUnitPrice" runat="server"
      Text='<%# Bind("UnitPrice", "{0:c}") %>'
      Columns="6"></asp:TextBox>
    <asp:CompareValidator ID="CompareValidator1" runat="server"
        ControlToValidate="EditUnitPrice"
        ErrorMessage="The price must be greater than or equal to zero and
                       cannot include the currency symbol"
        Operator="GreaterThanEqual" Type="Currency"
        ValueToCompare="0">*</asp:CompareValidator>
</EditItemTemplate>

進行這些變更之後,請在瀏覽器中開啟頁面。 如果您嘗試在編輯產品時省略名稱或輸入無效的價格值,文字框旁邊會出現星號。 如圖 8 所示,包含貨幣符號的價格值,例如 $19.95 會被視為無效。 CompareValidator 允許 CurrencyType 數位分隔符 (例如逗號或句號,視文化特性設定) 和前置加號或減號而定,但 不允許 貨幣符號。 此行為可能會讓使用者感到困惑,因為編輯介面目前會使用貨幣格式轉譯 UnitPrice

注意

回想一下,在 與插入、更新和刪除相關的事件 教學課程中,我們將 BoundField 的 DataFormatString 屬性 {0:c} 設定為 ,以將它格式化為貨幣。 此外,我們將 屬性設定 ApplyFormatInEditMode 為 true,導致 GridView 的編輯介面將 格式化 UnitPrice 為貨幣。 將 BoundField 轉換成 TemplateField 時,Visual Studio 會記錄這些設定,並使用數據系結語法<%# Bind("UnitPrice", "{0:c}") %>將 TextBox 的 Text 屬性格式化為貨幣。

文字框旁出現星號,且輸入無效

圖 8:星號出現在文字框旁,輸入無效 (按兩下即可檢視全大小影像)

當驗證依原樣運作時,用戶必須在編輯記錄時手動移除貨幣符號,這無法接受。 若要解決此問題,我們有三個選項:

  1. 設定 , EditItemTemplateUnitPrice 值不會格式化為貨幣。
  2. 允許使用者移除 CompareValidator 並取代為 RegularExpressionValidator 來輸入貨幣符號,以正確檢查格式正確的貨幣值。 此處的問題在於驗證貨幣值的正則表達式並不美觀,而且如果我們想要納入文化特性設定,則需要撰寫程序代碼。
  3. 完全移除驗證控制項,並依賴 GridView RowUpdating 事件處理程式中的伺服器端驗證邏輯。

讓我們來看看此練習的選項 #1。 UnitPrice目前的格式為貨幣,因為 中的 TextBox EditItemTemplate數據系結表示式: <%# Bind("UnitPrice", "{0:c}") %>。 將 Bind 語句變更為 Bind("UnitPrice", "{0:n2}"),將結果格式化為具有兩位數有效位數的數位。 這可以直接透過宣告式語法完成,或按兩下TemplateField (EditItemTemplate 中 TextBox UnitPrice 的 [編輯 DataBindings] 連結EditUnitPrice,請參閱圖 9 和 10) 。

按兩下 TextBox 的 [編輯資料系結] 連結

圖 9:按兩下 TextBox 的 [編輯 DataBindings] 連結, (按兩下即可檢視大小完整的影像)

在 Bind 語句中指定格式規範

圖 10:在語句中 Bind 指定格式規範, (按兩下即可檢視完整大小的影像)

有了這項變更,編輯介面中的格式化價格會包含逗號做為群組分隔符,以及句點做為小數分隔符,但會離開貨幣符號。

注意

UnitPriceEditItemTemplate不包含 RequiredFieldValidator,允許回傳加入,以及開始更新邏輯。 不過, RowUpdating檢查與插入、更新和刪除相關聯的事件 教學課程複製的事件處理程式包含程式設計檢查,以確保 UnitPrice 提供 。 請隨意移除此邏輯、依原樣保留,或將 RequiredFieldValidator 新增至 UnitPriceEditItemTemplate

步驟 4:摘要數據輸入問題

除了五個驗證控件之外,ASP.NET 還包含 ValidationSummary 控制件,其中會顯示 ErrorMessage 偵測到無效資料的驗證控件的 。 此摘要數據可以顯示為網頁上的文字,或透過強制回應的用戶端消息框顯示。 讓我們增強本教學課程,以包含摘要任何驗證問題的用戶端消息框。

若要達成此目的,請將 ValidationSummary 控件從 [工具箱] 拖曳至 Designer。 驗證控件的位置並不重要,因為我們將它設定為只將摘要顯示為消息框。 新增控制項之後,將其 ShowSummary 屬性 設定為 false ,並將其 ShowMessageBox 屬性 設定為 true。 此外,用戶端消息框中會摘要說明任何驗證錯誤。

驗證錯誤摘要於 Client-Side 消息框中

圖 11:驗證錯誤摘要於 [Client-Side Messagebox] 中, (按兩下即可檢視完整大小的影像)

步驟 5:將驗證控件新增至 DetailsView 的InsertItemTemplate

本教學課程所保留的一切都是將驗證控件新增至 DetailsView 的插入介面。 將驗證控件新增至 DetailsView 範本的程式與步驟 3 中所檢查的程式相同;因此,我們將逐步完成此步驟中的工作。 如同使用 GridView 的 EditItemTemplate ,我鼓勵您將 TextBox 的 s 從非描述TextBox1TextBox2 重新命名IDInsertProductNameInsertUnitPrice

將 RequiredFieldValidator 新增至 ProductNameInsertItemTemplateControlToValidate將 設定為ID範本中 TextBox 的 ,其 Text 屬性設定為 “*”,並將其 ErrorMessage 屬性設定為 “You must provide the product's name”。

UnitPrice由於在新增記錄時需要此頁面的 ,因此請將 RequiredFieldValidator 新增至 UnitPriceInsertItemTemplate,並適當地設定其ControlToValidateTextErrorMessage 屬性。 最後,也請將 CompareValidator 新增至 UnitPriceInsertItemTemplate ,並設定其 ControlToValidateTextTypeErrorMessage、、 OperatorValueToCompare 屬性,就像我們在 GridView EditItemTemplate中的 CompareValidator 一UnitPrice樣。

新增這些驗證控件之後,如果未提供新產品的名稱,或是其價格為負數或格式不合法,則無法新增至系統。

驗證邏輯已新增至 DetailsView 的插入介面

圖 12:驗證邏輯已新增至 DetailsView 的 [插入介面] (按兩下即可檢視完整大小的影像)

步驟 6:將驗證控件分割成驗證群組

我們的頁面包含兩組邏輯上不同的驗證控件:對應至 GridView 編輯介面的驗證控件,以及對應至 DetailsView 插入介面的控件。 根據預設,會檢查頁面上 的所有 驗證控件發生回傳時。 不過,編輯記錄時,我們不希望 DetailsView 的插入介面驗證控件進行驗證。 圖 13 說明當使用者編輯具有完全合法值的產品時,按兩下 [更新] 會導致驗證錯誤,因為插入介面中的名稱和價格值是空白的。

更新產品會導致插入介面的驗證控件引發

圖 13:更新產品會導致插入介面的驗證控件引發 (按兩下即可檢視完整大小的影像)

ASP.NET 2.0 中的驗證控制項可以透過其 ValidationGroup 屬性分割成驗證群組。 若要在群組中建立一組驗證控件的關聯,只要將其 ValidationGroup 屬性設定為相同的值即可。 在本教學課程中,將 ValidationGroup GridView TemplateFields 中驗證控件的屬性設定為 EditValidationControls ,並將 ValidationGroup DetailsView 的 TemplateFields 屬性設定為 InsertValidationControls。 使用這些 Designer 的編輯範本介面時,可以直接在宣告式標記中或透過 屬性視窗 來完成這些變更。

除了驗證控件之外,ASP.NET 2.0 中的 Button 和 Button 相關控件也包含 ValidationGroup 屬性。 只有在具有相同 ValidationGroup 屬性設定的 Button 所引發回傳時,才會檢查驗證群組的驗證程式是否有效。 例如,若要讓 DetailsView 的 [插入] 按鈕觸發 InsertValidationControls 驗證群組,我們需要將 CommandField 的 ValidationGroup 屬性設定為 InsertValidationControls (請參閱圖 14) 。 此外,將 GridView 的 CommandField ValidationGroup 屬性設定為 EditValidationControls

將 DetailsView 的 CommandField 的 ValidationGroup 屬性設定為 InsertValidationControls

圖 14:將 DetailsView 的 CommandField ValidationGroup 屬性設定為 InsertValidationControls (按兩下即可檢視完整大小的影像)

這些變更之後,DetailsView 和 GridView 的 TemplateFields 和 CommandFields 看起來應該如下所示:

DetailsView 的 TemplateFields 和 CommandField

<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <InsertItemTemplate>
        <asp:TextBox ID="InsertProductName" runat="server"
         Text='<%# Bind("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2"
          runat="server" ControlToValidate="InsertProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="InsertValidationControls">*
        </asp:RequiredFieldValidator>
    </InsertItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <InsertItemTemplate>
         <asp:TextBox ID="InsertUnitPrice" runat="server"
           Text='<%# Bind("UnitPrice") %>' Columns="6">
         </asp:TextBox>
         <asp:RequiredFieldValidator ID="RequiredFieldValidator3"
           runat="server" ControlToValidate="InsertUnitPrice"
            ErrorMessage="You must provide the product price"
            ValidationGroup="InsertValidationControls">*
         </asp:RequiredFieldValidator>
        <asp:CompareValidator ID="CompareValidator2" runat="server"
           ControlToValidate="InsertUnitPrice"
           ErrorMessage="The price must be greater than or equal to zero and
                          cannot include the currency symbol"
           Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
           ValidationGroup="InsertValidationControls">*
        </asp:CompareValidator>
     </InsertItemTemplate>
 </asp:TemplateField>
<asp:CommandField ShowInsertButton="True"
  ValidationGroup="InsertValidationControls" />

GridView 的 CommandField 和 TemplateFields

<asp:CommandField ShowEditButton="True" ValidationGroup="EditValidationControls" />
<asp:TemplateField HeaderText="ProductName"
  SortExpression="ProductName">
    <EditItemTemplate>
        <asp:TextBox ID="EditProductName" runat="server"
          Text='<%# Bind("ProductName") %>'>
        </asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            runat="server" ControlToValidate="EditProductName"
            ErrorMessage="You must provide the product name"
            ValidationGroup="EditValidationControls">*
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
          Text='<%# Bind("ProductName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UnitPrice" SortExpression="UnitPrice">
    <EditItemTemplate>
        <asp:TextBox ID="EditUnitPrice" runat="server"
          Text='<%# Bind("UnitPrice", "{0:n2}") %>' Columns="6"></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1" runat="server"
            ControlToValidate="EditUnitPrice"
            ErrorMessage="The price must be greater than or equal to zero and
                           cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency"
            ValueToCompare="0"
            ValidationGroup="EditValidationControls">*
        </asp:CompareValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("UnitPrice", "{0:c}") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:TemplateField>

此時,只有在按兩下 GridView 的 [更新] 按鈕時,才會引發編輯特定的驗證控件,而且只有在按兩下DetailsView的 [插入] 按鈕時,才會引發插入特定的驗證控件,解決圖13所醒目提示的問題。 不過,隨著這項變更,我們的 ValidationSummary 控件在輸入無效的數據時不會再顯示。 ValidationSummary 控件也包含 ValidationGroup 屬性,而且只會在其驗證群組中顯示這些驗證控件的摘要資訊。 因此,我們需要在此頁面中擁有兩個驗證控制項,用於 InsertValidationControls 驗證群組,另一個用於 EditValidationControls

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="EditValidationControls" />
<asp:ValidationSummary ID="ValidationSummary2" runat="server"
    ShowMessageBox="True" ShowSummary="False"
    ValidationGroup="InsertValidationControls" />

在此新增之後,我們的教學課程已完成!

摘要

雖然 BoundFields 可以提供插入和編輯介面,但無法自定義介面。 通常,我們想要將驗證控件新增至編輯和插入介面,以確保使用者以合法格式輸入必要的輸入。 若要達成此目的,我們必須將 BoundFields 轉換成 TemplateFields,並將驗證控件新增至適當的範本 () 。 在本教學課程中,我們已從 檢查與插入、更新和刪除相關的事件 教學課程擴充範例,將驗證控件新增至 DetailsView 的插入介面和 GridView 的編輯介面。 此外,我們已瞭解如何使用 ValidationSummary 控件來顯示摘要驗證資訊,以及如何將頁面上的驗證控件分割成不同的驗證群組。

如本教學課程中所見,TemplateFields 允許編輯和插入介面擴大以包含驗證控件。 TemplateFields 也可以擴充以包含其他輸入 Web 控件,讓 TextBox 可由更適合的 Web 控制項取代。 在下一個教學課程中,我們將瞭解如何將 TextBox 控件取代為數據系結的 DropDownList 控件,這在編輯外鍵 (,例如 CategoryIDSupplierID 數據表 Products) 時很理想。

快樂的程序設計!

關於作者

Scott Mitchell 是 1998 年以來,1998 年與 Microsoft Web 技術合作的 篇 ASP/ASP.NET 書籍和 4GuysFromRolla.com 作者。 Scott 是獨立的顧問、訓練者和作者。 他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 2.0。 您可以透過mitchell@4GuysFromRolla.com部落格連到,也可以透過其部落格來存取,網址為 http://ScottOnWriting.NET

特別感謝

本教學課程系列是由許多實用的檢閱者檢閱。 本教學課程的首席檢閱者是 Liz Shulok 和 Zack Jones。 有興趣檢閱即將推出的 MSDN 文章嗎? 如果是,請將一行 mitchell@4GuysFromRolla.com放在 。