検証コントロールと共に TextBoxWatermark を使用する (VB)
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 Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
lbl.Text = HttpUtility.HtmlEncode(Name.Text)
End Sub
</script>
検証コントロールは、フィールドにテキストが存在しないという苦情を表示します (フルサイズの画像を表示するには、ここをクリックします)
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示