検証コントロールと共に TextBoxWatermark を使用する (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

AJAX コントロール ツールキットの TextBoxWatermark コントロールは、テキスト ボックスを拡張して、ボックス内にテキストが表示されるようにします。 ユーザーがボックス内をクリックすると、空になります。 ユーザーがテキストを入力せずにボックスを離れた場合は、事前入力されたテキストが再び表示されます。 これは、同じページ上の ASP.NET 検証コントロールと競合する可能性がありますが、これらの問題は解決される可能性があります。

概要

AJAX Control Toolkit のコントロールは TextBoxWatermark 、テキスト ボックスを拡張して、ボックス内にテキストが表示されるようにします。 ユーザーがボックス内をクリックすると、空になります。 ユーザーがテキストを入力せずにボックスを離れた場合は、事前入力されたテキストが再び表示されます。 これは、同じページ上の ASP.NET 検証コントロールと競合する可能性がありますが、これらの問題は解決される可能性があります。

手順

サンプルの基本的なセットアップは次のとおりです。コントロールは、コントロールを TextBox 使用してウォーターマークされます TextBoxWatermarkExtender 。 ボタンはポストバックをトリガーし、後でページ上の検証コントロールをトリガーするために使用されます。 また、AJAX を ScriptManager 初期化するには、コントロール ASP.NET 必要です。

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <asp:TextBox ID="Name" runat="server" /> <br />
 <asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
 <asp:Label ID="lbl" runat="server" />
 </div>
 <ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
 TargetControlID="Name" WatermarkText=" Your Name " />
</form>

次に、フォームの RequiredFieldValidator 送信時にフィールドにテキストがあるかどうかを確認するコントロールを追加します。 検証コントロールの プロパティは InitialValue 、コントロールで TextBoxWatermarkExtender 使用されるのと同じ値に設定する必要があります。フォームが送信されると、変更されていないテキスト ボックスの値は、その中の透かし値になります。

<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
 Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />

ただし、この方法には 1 つの問題があります。クライアントが JavaScript を無効にした場合、テキスト フィールドには透かしテキストが事前に入力されていないため、 RequiredFieldValidator によってエラー メッセージがトリガーされません。 したがって、空のテキスト ボックスをチェックする 2 つ目 RequiredFieldValidator のコントロールが必要です (属性を InitialValue 省略)。

<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
 Text="*" Display="Dynamic" runat="server" />

両方の検証コントロールで が使用 Display="Dynamic"されるため、エンド ユーザーは 2 つの検証コントロールのうちどれが発生したかを視覚的な外観と区別できません。代わりに、そのうちの 1 つだけが存在しているように見えます。

最後に、検証コントロールがエラー メッセージを発行しなかった場合に、フィールドにテキストを出力するサーバー側のコードをいくつか追加します。

<script runat="server">
 protected void btn_Click(object sender, EventArgs e)
 {
 lbl.Text = HttpUtility.HtmlEncode(Name.Text);
 }
</script>

検証コントロールは、フィールドにテキストが存在しないという苦情を表示します

検証コントロールは、フィールドにテキストが存在しないという苦情を表示します (フルサイズの画像を表示するには、ここをクリックします)

前へ次へ