編集および挿入インターフェイスに検証コントロールを追加する (VB)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

このチュートリアルでは、データ Web コントロールの EditItemTemplate と InsertItemTemplate に検証コントロールを追加して、より確実なユーザー インターフェイスを提供する方法について説明します。

はじめに

過去 3 つのチュートリアルで説明した例の GridView コントロールと DetailsView コントロールはすべて、BoundFields と CheckBoxFields で構成されています (フィールド型は、GridView または DetailsView をスマート タグを使用してデータ ソース コントロールにバインドするときに Visual Studio によって自動的に追加されます)。 GridView または DetailsView の行を編集すると、読み取り専用ではない BoundFields はテキスト ボックスに変換され、エンド ユーザーは既存のデータを変更できます。 同様に、DetailsView コントロールに新しいレコードを挿入すると、プロパティが にTrue設定されている BoundFields InsertVisible (既定値) は空のテキスト ボックスとしてレンダリングされ、ユーザーは新しいレコードのフィールド値を指定できます。 同様に、標準の読み取り専用インターフェイスで無効になっている CheckBoxFields は、編集インターフェイスと挿入インターフェイスで有効なチェックボックスに変換されます。

BoundField と CheckBoxField の既定の編集および挿入インターフェイスは役に立ちますが、インターフェイスにはあらゆる種類の検証がありません。 フィールドを省略 ProductName したり、 に無効な値 UnitsInStock (-50 など) を入力したりするなど、ユーザーがデータ入力の間違いを犯した場合、アプリケーション アーキテクチャの深さから例外が発生します。 この例外は 前のチュートリアルで示したように適切に処理できますが、ユーザー インターフェイスの編集または挿入には、ユーザーが最初にこのような無効なデータを入力できないようにするための検証コントロールが含まれるのが理想的です。

カスタマイズされた編集または挿入インターフェイスを提供するには、BoundField または CheckBoxField を TemplateField に置き換える必要があります。 TemplateFields は、 GridView コントロールでの TemplateFields の使用と DetailsView コントロール のチュートリアルでの TemplateFields の使用に 関するページで説明したトピックであり、行の状態ごとに個別のインターフェイスを定義する複数のテンプレートで構成できます。 TemplateField は ItemTemplate 、DetailsView コントロールまたは GridView コントロールで読み取り専用フィールドまたは行をレンダリングする場合に使用します。一方 EditItemTemplate 、 と InsertItemTemplate は、それぞれ編集モードと挿入モードに使用するインターフェイスを示します。

このチュートリアルでは、TemplateField EditItemTemplate に検証コントロールを追加し InsertItemTemplate 、より確実なユーザー インターフェイスを提供する方法を簡単に説明します。 具体的には、このチュートリアルでは、「 挿入、更新、および削除に関連するイベントを調べる 」チュートリアルで作成した例を取り上げます。また、適切な検証を含むように編集インターフェイスと挿入インターフェイスを拡張します。

手順 1:挿入、更新、および削除に関連するイベントの検査から例をレプリケートする

「 挿入、更新、および削除に関連するイベントの確認 」チュートリアルで、編集可能な GridView で製品の名前と価格を一覧表示するページを作成しました。 さらに、ページには、プロパティが にInsert設定された DetailsView がDefaultMode含まれていたため、常に挿入モードでレンダリングされます。 この DetailsView から、ユーザーは新しい製品の名前と価格を入力し、[挿入] をクリックして、システムに追加することができます (図 1 を参照)。

前の例では、ユーザーは新しい製品を追加し、既存の製品を編集できます

図 1: 前の例では、ユーザーが新しい製品の追加と既存の製品の編集を許可します (クリックすると、フルサイズの画像が表示されます)

このチュートリアルの目的は、DetailsView と GridView を拡張して検証コントロールを提供することです。 特に、検証ロジックでは次の処理が行われます。

  • 製品の挿入または編集時に名前を指定する必要がある
  • レコードを挿入するときに価格を指定する必要があります。レコードを編集する場合、価格は引き続き必要ですが、前のチュートリアルで既に存在する GridView の RowUpdating イベント ハンドラーでプログラムロジックを使用します
  • 価格に入力された値が有効な通貨形式であることを確認します

前の例を拡張して検証を含める前に、最初に、このチュートリアルUIValidation.aspxのページに例DataModificationEvents.aspxをレプリケートする必要があります。 これを実現するには、ページの DataModificationEvents.aspx 宣言型マークアップとそのソース コードの両方をコピーする必要があります。 まず、次の手順を実行して宣言型マークアップをコピーします。

  1. Visual Studio でページを DataModificationEvents.aspx 開く
  2. ページの宣言型マークアップに移動します (ページの下部にある [ソース] ボタンをクリックします)
  3. 図 2 に示すように、 <asp:Content> タグと </asp:Content> タグ (3 行目から 44 行目) 内のテキストをコピーします。

asp:Content> コントロール内のテキストを<コピーする

図 2: コントロール内のテキストをコピーする <asp:Content> (クリックするとフルサイズの画像が表示されます)

  1. ページを UIValidation.aspx 開く
  2. ページの宣言型マークアップに移動する
  3. コントロール内にテキストを <asp:Content> 貼り付けます。

ソース コードをコピーするには、ページをDataModificationEvents.aspx.vb開き、 クラス内EditInsertDelete_DataModificationEventsのテキストのみをコピーします。 3 つのイベント ハンドラー (Page_Load、、 GridView1_RowUpdatingおよび ObjectDataSource1_Inserting) をコピーしますが、クラス宣言はコピー しません 。 クラス 内 にコピーしたテキストを EditInsertDelete_UIValidation に UIValidation.aspx.vb貼り付けます。

コンテンツとコードを から DataModificationEvents.aspx に UIValidation.aspx移動した後、少し時間を取ってブラウザーで進行状況をテストします。 これら 2 つの各ページで同じ出力が表示され、同じ機能が表示されます (実際のスクリーン ショット DataModificationEvents.aspx については、図 1 を参照してください)。

手順 2: BoundFields を TemplateFields に変換する

編集インターフェイスと挿入インターフェイスに検証コントロールを追加するには、DetailsView コントロールと GridView コントロールで使用される BoundFields を TemplateFields に変換する必要があります。 これを実現するには、GridView と DetailsView のスマート タグの [列の編集] リンクと [フィールドの編集] リンクをそれぞれクリックします。 そこで、各 BoundFields を選択し、[このフィールドを TemplateField に変換する] リンクをクリックします。

DetailsView と GridView の各 BoundFields を TemplateFields に変換する

図 3: DetailsView と GridView の BoundFields をそれぞれ TemplateFields に変換する (フルサイズの画像を表示する をクリックします)

[フィールド] ダイアログ ボックスを使用して BoundField を TemplateField に変換すると、BoundField 自体と同じ読み取り専用、編集、および挿入インターフェイスを示す TemplateField が生成されます。 次のマークアップは、TemplateField に変換された後の DetailsView のフィールドの宣言構文 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 には、 の 3 つのテンプレートが自動的に作成ItemTemplateEditItemTemplateInsertItemTemplateされていることに注意してください。 には ItemTemplate 、Label Web コントロールを使用して単一のデータ フィールド値 (ProductName) が表示され EditItemTemplate 、 と InsertItemTemplate は、双方向データ バインドを使用してデータ フィールドを TextBox のプロパティに関連付ける TextBox Web コントロール内の Text データ フィールド値を表示します。 このページでは DetailsView のみを挿入に使用しているため、2 つの TemplateFields から と EditItemTemplate を削除ItemTemplateできますが、残しても問題はありません。

GridView は DetailsView の組み込みの挿入機能をサポートしていないため、GridView ProductName のフィールドを TemplateField に変換すると、 と EditItemTemplateのみがItemTemplate発生します。

<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: GridViewEditItemTemplate の に検証コントロールを追加する

データ入力フォームを作成するときは、ユーザーが必要なフィールドを入力し、指定されたすべての入力が適切に書式設定された有効な値であることが重要です。 ユーザーの入力が有効であることを確認するために、ASP.NET には、1 つの入力コントロールの値を検証するために使用するように設計された 5 つの組み込みの検証コントロールが用意されています。

  • RequiredFieldValidator は、値が指定されていることを確認します
  • CompareValidator は、別の Web コントロール値または定数値に対して値を検証するか、指定されたデータ型に対して値の形式が有効であることを確認します
  • RangeValidator は、値が値の範囲内にあることを確認します
  • RegularExpressionValidator は、正規表現に対して値を検証します
  • CustomValidator は、ユーザー定義のカスタム メソッドに対して値を検証します

これら 5 つのコントロールの詳細については、「ASP.NET クイックスタート チュートリアル」の「検証コントロール」セクションチェック。

このチュートリアルでは、DetailsView と GridView の TemplateField の両方で RequiredFieldValidator を使用し、DetailsView UnitPrice の ProductName TemplateField で RequiredFieldValidator を使用する必要があります。 さらに、両方のコントロールの TemplateFields UnitPrice に CompareValidator を追加する必要があります。これにより、入力された価格が 0 以上の値を持ち、有効な通貨形式で表示されます。

注意

ASP.NET 1.x には同じ 5 つの検証コントロールがありましたが、ASP.NET 2.0 には多くの機能強化が加わりました。メイン 2 は、インターネット エクスプローラー以外のブラウザーに対するクライアント側スクリプトのサポートと、ページ上の検証コントロールを検証グループにパーティション分割する機能です。 2.0 の新しい検証コントロール機能の詳細については、「ASP.NET 2.0 での検証コントロールの分離」を参照してください。

まず、GridView の TemplateFields 内の に EditItemTemplate 必要な検証コントロールを追加します。 これを行うには、GridView のスマート タグから [テンプレートの編集] リンクをクリックして、テンプレート編集インターフェイスを表示します。 ここから、編集するテンプレートをドロップダウン リストから選択できます。 編集インターフェイスを拡張するため、 と UnitPriceEditItemTemplate の に検証コントロールを追加するProductName必要があります。

ProductName と UnitPrice の EditItemTemplates を拡張する必要がある

図 4: と の を拡張ProductNameUnitPriceする必要があります (フルサイズのEditItemTemplate画像を表示するには、ここをクリックします)

ProductNameEditItemTemplateで、RequiredFieldValidator を追加します。これをツールボックスからテンプレート編集インターフェイスにドラッグして、TextBox の後に配置します。

ProductName EditItemTemplate に RequiredFieldValidator を追加する

図 5: RequiredFieldValidator を に ProductNameEditItemTemplate 追加します (クリックするとフルサイズの画像が表示されます)

すべての検証コントロールは、単一の ASP.NET Web コントロールの入力を検証することによって機能します。 したがって、追加した RequiredFieldValidator が 内の TextBox に EditItemTemplate対して検証されることを示す必要があります。これは、検証コントロールの ControlToValidate プロパティ を適切な Web コントロールの に ID 設定することによって実現されます。 現在、TextBox には ではなく のTextBox1非記述IDがありますが、より適切なものに変更してみましょう。 テンプレートの [テキスト ボックス] をクリックし、プロパティ ウィンドウから を ID にTextBox1EditProductName変更します。

TextBox の ID を EditProductName に変更する

図 6: TextBox の を にEditProductName変更します (クリックするとフルサイズのID画像が表示されます)

次に、RequiredFieldValidator の ControlToValidate プロパティを に設定します EditProductName。 最後に、 ErrorMessage プロパティ を "製品の名前を指定する必要があります" に設定し、 Text プロパティ を "*" に設定します。 プロパティ値 ( Text 指定されている場合) は、検証が失敗した場合に検証コントロールによって表示されるテキストです。 ErrorMessage必要なプロパティ値は ValidationSummary コントロールで使用されます。プロパティ値をText省略すると、ErrorMessageプロパティ値は無効な入力時に検証コントロールによって表示されるテキストでもあります。

RequiredFieldValidator のこれら 3 つのプロパティを設定すると、画面は図 7 のようになります。

RequiredFieldValidator の ControlToValidate、ErrorMessage、および Text プロパティを設定する

図 7: RequiredFieldValidator の 、ErrorMessage、および Text プロパティをControlToValidate設定します (フルサイズの画像を表示するには、ここをクリックします)

RequiredFieldValidator を に追加すると ProductNameEditItemTemplate、残っているのは、必要な検証を に追加することです UnitPriceEditItemTemplate。 このページ UnitPrice では、 がレコードを編集するときに省略可能であると判断したので、RequiredFieldValidator を追加する必要はありません。 ただし、CompareValidator を追加して、 が指定されている場合は、通貨として正しく書式設定され、0 以上であることを確認 UnitPriceする必要があります。

CompareValidator を に追加する前に UnitPriceEditItemTemplate、まず TextBox Web コントロールの ID を から TextBox2 に EditUnitPrice変更しましょう。 この変更を行った後、CompareValidator を追加し、その ControlToValidate プロパティを に EditUnitPrice設定し、その ErrorMessage プロパティを "Price は 0 以上である必要があり、通貨記号を含めることはできません"、その Text プロパティは "*" に設定します。

値が 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 はこれらの設定を書き出し、Databinding 構文 を使用して TextBox の Text プロパティを通貨として書式設定しました <%# Bind("UnitPrice", "{0:c}") %>。

入力が無効なテキスト ボックスの横にアスタリスクが表示されます

図 8: 入力が無効なテキスト ボックスの横にアスタリスクが表示されます (フルサイズの画像を表示する場合はクリックします)

検証はそのまま動作しますが、ユーザーはレコードを編集するときに通貨記号を手動で削除する必要があります。これは許容されません。 これを解決するには、次の 3 つのオプションがあります。

  1. EditItemTemplate値がUnitPrice通貨として書式設定されないように を構成します。
  2. CompareValidator を削除し、正しく書式設定された通貨値を正しくチェックする RegularExpressionValidator に置き換えることで、ユーザーが通貨記号を入力できるようにします。 ここでの問題は、通貨値を検証する正規表現が適切ではなく、カルチャ設定を組み込む場合にコードを記述する必要があるということです。
  3. 検証コントロールを完全に削除し、GridView のイベント ハンドラーでサーバー側の RowUpdating 検証ロジックに依存します。

この演習では、オプション #1 を使用してみましょう。 現在、 UnitPrice は、 の TextBox EditItemTemplate<%# Bind("UnitPrice", "{0:c}") %>のデータバインド式のために通貨として書式設定されています。 Bind ステートメントを に Bind("UnitPrice", "{0:n2}")変更します。これにより、結果が有効桁数の 2 桁の数値として書式設定されます。 これを行うには、宣言構文を使用するか、TemplateField EditItemTemplate の TextBox UnitPrice の [DataBindings の編集] リンクEditUnitPriceをクリックします (図 9 と 10 を参照)。

TextBox の [Edit DataBindings]\(DataBindings の編集\) リンクをクリックします

図 9: TextBox の [DataBindings の編集] リンクをクリックします (フルサイズの画像を表示するには、ここをクリックします)

Bind ステートメントで書式指定子を指定する

図 10: ステートメントで書式指定子を Bind 指定します (フルサイズの画像を表示する場合は、ここをクリックします)

この変更により、編集インターフェイスの書式設定された価格には、グループ区切り記号としてコンマ、小数点の区切り記号としてピリオドが含まれますが、通貨記号は使用されません。

注意

には UnitPriceEditItemTemplate RequiredFieldValidator が含まれていません。これにより、ポストバックがエンスされ、更新ロジックが開始されます。 ただし、挿入、RowUpdating更新、および削除に関連するイベントの確認に関するチュートリアルからコピーされたイベント ハンドラーには、 が確実に提供されるようにUnitPriceするプログラムによるチェックが含まれています。 このロジックを削除するか、そのままにするか、RequiredFieldValidator を に UnitPriceEditItemTemplate追加してください。

手順 4: データ入力の問題の概要

ASP.NET には、5 つの検証コントロールに加えて、無効なデータを検出した検証コントロールの が表示ErrorMessageされる ValidationSummary コントロールが含まれています。 この概要データは、Web ページ上のテキストとして、またはモーダルのクライアント側のメッセージ ボックスを使用して表示できます。 検証の問題をまとめたクライアント側のメッセージ ボックスを含むように、このチュートリアルを強化しましょう。

これを実現するには、ツールボックスから ValidationSummary コントロールをDesignerにドラッグします。 検証コントロールの場所は、概要のみをメッセージ ボックスとして表示するように構成するため、実際には重要ではありません。 コントロールを追加した後、 ShowSummary プロパティ を に False 設定し、 ShowMessageBox プロパティ を に True設定します。 この追加により、検証エラーはクライアント側のメッセージ ボックスにまとめられます。

検証エラーは、Client-Side メッセージ ボックスに要約されます

図 11: 検証エラーは、Client-Side メッセージ ボックスに要約されています (フルサイズの画像を表示する をクリックします)

手順 5: DetailsView に検証コントロールを追加するInsertItemTemplate

このチュートリアルで残っているのは、DetailsView の挿入インターフェイスに検証コントロールを追加することです。 DetailsView のテンプレートに検証コントロールを追加するプロセスは、手順 3 で調べたプロセスと同じです。そのため、この手順ではタスクを簡単に実行します。 GridView EditItemTemplate の と同様に、TextBoxes の の名前をID非記述TextBox1から および TextBox2 にInsertProductNameInsertUnitPrice変更することをお勧めします。

RequiredFieldValidator を に追加します ProductNameInsertItemTemplate。 ControlToValidateIDをテンプレートの TextBox の に設定し、そのTextプロパティを "*" に設定し、そのErrorMessageプロパティを "製品の名前を指定する必要があります" に設定します。

UnitPriceは新しいレコードを追加するときにこのページに必要であるため、RequiredFieldValidator を に追加しUnitPriceInsertItemTemplate、そのプロパティ、Text、および ErrorMessage プロパティをControlToValidate適切に設定します。 最後に、 に CompareValidator をUnitPrice追加し、GridView EditItemTemplateの CompareValidator とUnitPriceValueToCompare同様に、および プロパティを構成ErrorMessageOperatorControlToValidateTypeTextします。InsertItemTemplate

これらの検証コントロールを追加した後、名前が指定されていない場合、または価格が負の数値または不正な形式の場合、新しい製品をシステムに追加することはできません。

DetailsView の挿入インターフェイスに検証ロジックが追加されました

図 12: DetailsView の挿入インターフェイスに検証ロジックが追加されました (フルサイズの画像を表示する場合はクリックします)

手順 6: 検証コントロールを検証グループにパーティション分割する

このページは、GridView の編集インターフェイスに対応する検証コントロールと DetailsView の挿入インターフェイスに対応する検証コントロールの 2 つの論理的に異なるセットで構成されています。 既定では、ポストバックが発生すると、ページ 上のすべての 検証コントロールがオンになります。 ただし、レコードを編集する場合、DetailsView の挿入インターフェイスの検証コントロールを検証する必要はありません。 図 13 は、ユーザーが完全に有効な値を持つ製品を編集しているときの現在のジレンマを示しています。[更新] をクリックすると、挿入インターフェイスの名前と価格の値が空白であるため、検証エラーが発生します。

製品を更新すると、挿入インターフェイスの検証コントロールが起動します

図 13: 製品を更新すると、挿入インターフェイスの検証コントロールが起動します (クリックするとフルサイズの画像が表示されます)

ASP.NET 2.0 の検証コントロールは、プロパティ ValidationGroup を使用して検証グループにパーティション分割できます。 グループ内の検証コントロールのセットを関連付けるには、そのプロパティを ValidationGroup 同じ値に設定するだけです。 このチュートリアルでは、GridView の TemplateFields の検証コントロールのプロパティを にEditValidationControls設定しValidationGroup、DetailsView の TemplateFields のプロパティを にInsertValidationControls設定ValidationGroupします。 これらの変更は、宣言型マークアップで直接行うか、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 の プロパティを にInsertValidationControls設定します (フルサイズの画像を表示する 場合は、ここをクリックします)ValidationGroup

これらの変更後、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 の [更新] ボタンがクリックされ、[詳細ビューの挿入] ボタンがクリックされた場合にのみ挿入固有の検証コントロールが起動し、図 13 で強調表示されている問題を解決します。 ただし、この変更により、無効なデータを入力するときに ValidationSummary コントロールが表示されなくなります。 ValidationSummary コントロールにはプロパティも含まれており ValidationGroup 、検証グループ内のこれらの検証コントロールの概要情報のみが表示されます。 したがって、このページには 2 つの検証コントロールが必要です。1 つは検証グループ用、もう 1 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 最適です。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズは24時間で2.0 ASP.NET 自分自身を教えています。 にアクセスmitchell@4GuysFromRolla.comすることも、ブログを介して アクセスすることもできます。これは でhttp://ScottOnWriting.NET確認できます。

特別な感謝

このチュートリアル シリーズは、多くの役立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は、Liz Shulok と Zack Jones でした。 今後の MSDN 記事の確認に関心がありますか? その場合は、 に行mitchell@4GuysFromRolla.comをドロップしてください。

前へ次へ