検証コントロールと共に TextBoxWatermark を使用する (C#)
作成者: Christian Wenz
テキスト ボックス内にテキストが表示されるように、AJAX Control Toolkit の TextBoxWatermark コントロールによってそのボックスが拡張されます。 ボックスは、ユーザーがクリックすると空になります。 ユーザーがテキストを入力せずにボックスから離れると、事前入力されたテキストが再表示されます。 これは同じページ上の ASP.NET 検証コントロールと競合する可能性がありますが、このような問題は解決できます。
概要
テキスト ボックス内にテキストが表示されるように、AJAX Control Toolkit の TextBoxWatermark コントロールによってそのボックスが拡張されます。 ボックスは、ユーザーがクリックすると空になります。 ユーザーがテキストを入力せずにボックスから離れると、事前入力されたテキストが再表示されます。 これは同じページ上の ASP.NET 検証コントロールと競合する可能性がありますが、このような問題は解決できます。
手順
サンプルの基本的な設定は次のとおりです: TextBoxWatermarkExtender コントロールを使用して TextBox コントロールに透かしを付けます。 ポストバックがボタンによってトリガーされ、後でページ上の検証コントロールをトリガーするために使用されます。 また、ASP.NET AJAX を初期化するには、ScriptManager コントロールが必要です。
<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>
検証コントロールによって、フィールド内にテキストがないことが示されます (クリックするとフルサイズの画像が表示されます)
