DataList の編集インターフェイスに検証コントロールを追加する (VB)

  • [アーティクル]

作成者: Scott Mitchell

PDF のダウンロード

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

はじめに

これまでの DataList 編集チュートリアルでは、製品名の欠落や価格の低下など、無効なユーザー入力によって例外が発生する場合でも、DataLists 編集インターフェイスにプロアクティブなユーザー入力検証は含まれていません。 前の チュートリアル では、発生した例外に関する情報をキャッチして適切に表示するために、DataList の UpdateCommand イベント ハンドラーに例外処理コードを追加する方法について説明しました。 ただし、編集インターフェイスには、ユーザーがこのような無効なデータを最初に入力できないようにするための検証コントロールが含まれているのが理想的です。

このチュートリアルでは、より確実な編集ユーザー インターフェイスを提供するために、DataList EditItemTemplate に検証コントロールを追加する方法を簡単に説明します。 具体的には、このチュートリアルでは、前のチュートリアルで作成した例を取り、適切な検証を含むように編集インターフェイスを拡張します。

手順 1:BLL 例外と DAL-Level 例外の処理から例をレプリケートする

「BLL と DAL-Level 例外の処理」チュートリアルでは、製品の名前と価格を 2 列の編集可能な DataList に一覧表示するページを作成しました。 このチュートリアルの目的は、検証コントロールを含むように DataList の編集インターフェイスを拡張することです。 特に、検証ロジックでは次の処理が行われます。

  • 製品名を指定する必要がある
  • 価格に入力された値が有効な通貨形式であることを確認します
  • 負 UnitPrice の値が無効であるため、価格に入力された値が 0 以上であることを確認します

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

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

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

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

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

ソース コードをコピーするには、ページをErrorHandling.aspx.vb開き、 クラス内EditDeleteDataList_ErrorHandlingのテキストのみをコピーします。 メソッドと共DisplayExceptionDetailsに 3 つのイベント ハンドラー (Products_EditCommand、、Products_CancelCommandおよびProducts_UpdateCommand) をコピーしますが、クラス宣言またはusingステートメントはコピーしないでください。 クラス 内 にコピーしたテキストを EditDeleteDataList_UIValidation に UIValidation.aspx.vb貼り付けます。

コンテンツとコードを から ErrorHandling.aspx に UIValidation.aspx移動した後、少し時間を取ってブラウザーでページをテストします。 同じ出力が表示され、これら 2 つの各ページで同じ機能が表示されます (図 2 を参照)。

UIValidation.aspx ページは、ErrorHandling.aspxの機能を模倣します

図 2: ページは UIValidation.aspx の ErrorHandling.aspx 機能を模倣します (クリックするとフルサイズの画像が表示されます)

手順 2: DataList の EditItemTemplate に検証コントロールを追加する

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

これら 5 つのコントロールの詳細については、「Editing and Inserting Interfaces に検証コントロールを追加する」チュートリアルに戻るか、「ASP.NET クイックスタート チュートリアル」の「検証コントロール」セクションをチェックしてください。

このチュートリアルでは、RequiredFieldValidator を使用して製品名の値が指定されていることを確認し、CompareValidator を使用して、入力した価格が 0 以上の値を持ち、有効な通貨形式で表示されるようにする必要があります。

注意

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

まず、DataList EditItemTemplateに必要な検証コントロールを追加します。 このタスクは、DataList のスマート タグから [テンプレートの編集] リンクをクリックするか、宣言型構文を使用して、Designerを使用して実行できます。 [デザイン] ビューの [テンプレートの編集] オプションを使用して、プロセスをステップ実行してみましょう。 DataList を EditItemTemplate編集することを選択した後、ツールボックスからテンプレート編集インターフェイスにドラッグして、それを TextBox の後に配置して RequiredFieldValidator を ProductName 追加します。

ProductName TextBox の後に、EditItemTemplate に RequiredFieldValidator を追加する

図 3: TextBox に RequiredFieldValidator をEditItemTemplate AfterProductName追加する (フルサイズの画像を表示するには、ここをクリックします)

すべての検証コントロールは、単一の ASP.NET Web コントロールの入力を検証することによって機能します。 したがって、追加した RequiredFieldValidator を TextBox に対して ProductName 検証する必要があることを示す必要があります。これは、検証コントロールの ControlToValidate プロパティ を ID 適切な Web コントロールの に設定することによって行われます (ProductNameこのインスタンスでは)。 次に、 プロパティを ErrorMessage に設定します。製品の名前を指定し、 プロパティを Text * に指定する必要があります。 プロパティ値 ( Text 指定されている場合) は、検証が失敗した場合に検証コントロールによって表示されるテキストです。 ErrorMessage必要なプロパティ値は ValidationSummary コントロールで使用されます。プロパティ値をText省略すると、ErrorMessage無効な入力時に検証コントロールによってプロパティ値が表示されます。

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

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

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

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

CompareValidator を に EditItemTemplate 追加し、その ControlToValidate プロパティを に UnitPrice設定し、その ErrorMessage プロパティを に設定します。price は 0 以上である必要があり、通貨記号を含めず、その Text プロパティを *に含めることはできません。 値が UnitPrice 0 以上である必要があることを示すには、CompareValidator のOperatorプロパティを に、そのValueToCompareプロパティを GreaterThanEqual0 に、そのTypeプロパティを にCurrency設定します。

これら 2 つの検証コントロールを追加すると、DataList の EditItemTemplate 宣言型構文は次のようになります。

<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" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

これらの変更を行った後、ブラウザーでページを開きます。 製品の編集時に名前を省略したり、無効な価格値を入力しようとすると、テキストボックスの横にアスタリスクが表示されます。 図 5 に示すように、$19.95 などの通貨記号を含む価格値は無効と見なされます。 CompareValidator では CurrencyType 、桁区切り記号 (カルチャの設定に応じてコンマやピリオドなど) と先頭のプラス記号またはマイナス記号を使用できますが、通貨記号は使用 できません 。 この動作は、編集インターフェイスが現在通貨形式を使用して を UnitPrice レンダリングすると、ユーザーを困惑させる可能性があります。

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

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

検証はそのまま動作しますが、ユーザーはレコードを編集するときに通貨記号を手動で削除する必要があります。これは受け入れられません。 さらに、編集インターフェイスに無効な入力がある場合は、クリックしたときに [更新] ボタンと [キャンセル] ボタンの両方がポストバックを呼び出しません。 [キャンセル] ボタンは、ユーザーの入力の有効性に関係なく、DataList を編集前の状態に戻すのが理想的です。 また、検証コントロールのクライアント側ロジックは、JavaScript をサポートしていないユーザーまたはサポートが無効になっているユーザーによってバイパスできるため、DataList の UpdateCommand イベント ハンドラーの製品情報を更新する前に、ページのデータが有効であることを確認する必要があります。

EditItemTemplate s UnitPrice TextBox から通貨記号を削除する

CompareValidator を Currency``Type使用する場合、検証対象の入力に通貨記号を含めてはいけません。 このようなシンボルが存在すると、CompareValidator によって入力が無効としてマークされます。 ただし、現在、編集インターフェイスには TextBox に通貨記号が UnitPrice 含まれています。つまり、ユーザーは変更を保存する前に通貨記号を明示的に削除する必要があります。 これを解決するには、次の 3 つのオプションがあります。

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

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

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

注意

編集可能なインターフェイスから通貨形式を削除する場合は、通貨記号をテキストボックスの外側に置くと便利です。 これは、通貨記号を指定する必要がないことをユーザーに示すヒントとして機能します。

キャンセル ボタンの修正

既定では、検証 Web コントロールは JavaScript を出力して、クライアント側で検証を実行します。 Button、LinkButton、または ImageButton をクリックすると、ポストバックが発生する前に、ページ上の検証コントロールがクライアント側でチェックされます。 無効なデータがある場合、ポストバックは取り消されます。 ただし、特定のボタンの場合、データの有効性は重要ではない可能性があります。このような場合、無効なデータのためにポストバックを取り消すのが面倒です。

[キャンセル] ボタンは次の例です。 ユーザーが製品の名前を省略するなど、無効なデータを入力し、後で製品を保存したくないと判断し、[キャンセル] ボタンを押したとします。 現在、[キャンセル] ボタンをクリックすると、ページ上の検証コントロールがトリガーされ、製品名が見つからないことが報告され、ポストバックが防止されます。 ユーザーは、編集プロセスを取り消すためだけにテキストを TextBox に ProductName 入力する必要があります。

幸いなことに、Button、LinkButton、および ImageButton には CausesValidation 、 Button をクリックして検証ロジックを開始するかどうかを示すプロパティがあります (既定値は Trueです)。 [キャンセル ボタン] プロパティを CausesValidation に False設定します。

UpdateCommand イベント ハンドラーで入力が有効であることを確認する

検証コントロールによって出力されるクライアント側スクリプトにより、ユーザーが無効な入力を入力した場合、検証コントロールはTrue、プロパティが (既定値) である Button、LinkButton、または ImageButton コントロールCausesValidationによって開始されたすべてのポストバックを取り消します。 ただし、ユーザーが古いブラウザーを使用してアクセスしている場合、または JavaScript のサポートが無効になっている場合、クライアント側の検証チェックは実行されません。

すべての ASP.NET 検証コントロールは、ポストバックの直後に検証ロジックを繰り返し、 プロパティを使用してページの入力の全体的な有効性を Page.IsValid 報告します。 ただし、 の値 Page.IsValidに基づいてページ フローが中断または停止されることはありません。 開発者は、有効な入力データを前提とするコードを Page.IsValid 続行する前に、 プロパティの True 値が であることを確認する必要があります。

ユーザーが JavaScript を無効にし、ページにアクセスし、製品を編集し、価格値が [高すぎる] を入力し、[更新] ボタンをクリックすると、クライアント側の検証がバイパスされ、ポストバックが続きます。 ポストバック時に、ASP.NET ページの UpdateCommand イベント ハンドラーが実行され、 を解析 Decimalしようとすると例外が発生します。 例外処理があるため、このような例外は正常に処理されますが、 の値Trueがある場合Page.IsValidにのみイベント ハンドラーを続行UpdateCommandすることで、最初に無効なデータがスリップするのを防ぐことができます。

ブロックの直前のイベント ハンドラーの先頭に UpdateCommand 次のコードを Try 追加します。

If Not Page.IsValid Then
    Exit Sub
End If

この追加により、送信されたデータが有効な場合にのみ、製品の更新が試みられます。 検証コントロールのクライアント側スクリプトにより、ほとんどのユーザーは無効なデータをポストバックできませんが、ブラウザーで JavaScript がサポートされていないユーザーや JavaScript のサポートが無効になっているユーザーは、クライアント側のチェックをバイパスし、無効なデータを送信できます。

注意

astute リーダーは、GridView でデータを更新するときに、ページの分離コード クラスの プロパティを明示的にチェックPage.IsValidする必要がなかったことを思い出します。 これは、GridView が プロパティを Page.IsValid 参照し、 の値 Trueを返す場合にのみ更新を続行するためです。

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

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

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

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

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

まとめ

このチュートリアルでは、検証コントロールを使用して例外の可能性を減らし、更新ワークフローでユーザー入力を使用する前にユーザー入力が有効であることを事前に確認する方法について説明しました。 ASP.NET には、特定の Web コントロールの入力を検査し、入力の有効性を報告するように設計された 5 つの検証 Web コントロールが用意されています。 このチュートリアルでは、RequiredFieldValidator と CompareValidator の 5 つのコントロールのうち 2 つを使用して、製品の名前が指定され、価格が 0 以上の通貨形式であることを確認しました。

DataList の編集インターフェイスに検証コントロールを追加することは、ツールボックスから に EditItemTemplate ドラッグしていくつかのプロパティを設定するのと同じくらい簡単です。 既定では、検証コントロールはクライアント側の検証スクリプトを自動的に出力します。また、ポストバック時にサーバー側の検証を行い、累積的な結果を プロパティに Page.IsValid 格納します。 Button、LinkButton、または ImageButton がクリックされたときにクライアント側の検証をバイパスするには、ボタンの CausesValidation プロパティを に False設定します。 また、ポストバック時に送信されたデータを使用してタスクを実行する前に、 プロパティが Page.IsValid を返すようにします True。

これまでに調べてきた DataList 編集チュートリアルはすべて、非常に単純な編集インターフェイスに、製品名の TextBox と価格の別のテキスト ボックスを含めていました。 ただし、編集インターフェイスには、DropDownLists、Calendars、RadioButtons、CheckBoxes など、さまざまな Web コントロールを組み合わせて使用できます。 次のチュートリアルでは、さまざまな Web コントロールを使用するインターフェイスの構築について説明します。

幸せなプログラミング!

著者について

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

特別な感謝

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

前へ次へ