AJAX 컨트롤 도구 키트의 TextBoxWatermark 컨트롤은 텍스트 상자 내에 텍스트가 표시되도록 텍스트 상자를 확장합니다. 사용자가 상자를 클릭하면 비워집니다. 사용자가 텍스트를 입력하지 않고 상자를 나가면 미리 채워진 텍스트가 다시 나타납니다. 이는 동일한 페이지의 ASP.NET 유효성 검사 컨트롤과 충돌할 수 있지만 이러한 문제를 해결할 수 있습니다.
개요
AJAX 컨트롤 도구 키트의 컨트롤은 TextBoxWatermark 텍스트 상자 내에 텍스트가 표시되도록 텍스트 상자를 확장합니다. 사용자가 상자를 클릭하면 비워집니다. 사용자가 텍스트를 입력하지 않고 상자를 나가면 미리 채워진 텍스트가 다시 나타납니다. 이는 동일한 페이지의 ASP.NET 유효성 검사 컨트롤과 충돌할 수 있지만 이러한 문제를 해결할 수 있습니다.
단계
샘플의 기본 설정은 다음과 같습니다. 컨트롤은 컨트롤을 TextBox 사용하여 워터마크가 지정 TextBoxWatermarkExtender 됩니다. 단추는 포스트백을 트리거하고 나중에 페이지에서 유효성 검사 컨트롤을 트리거하는 데 사용됩니다. ScriptManager 또한 ASP.NET AJAX를 초기화하려면 컨트롤이 필요합니다.
<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" />
그러나 이 방법에는 한 가지 문제가 있습니다. 클라이언트가 JavaScript를 사용하지 않도록 설정하면 텍스트 필드가 워터마크 텍스트로 미리 채워지지 않으므로 는 RequiredFieldValidator 오류 메시지를 트리거하지 않습니다. 따라서 빈 텍스트 상자(특성 생략)를 확인하는 두 번째 RequiredFieldValidator 컨트롤이 InitialValue 필요합니다.
<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
Text="*" Display="Dynamic" runat="server" />
두 유효성 검사기 모두 를 사용 Display="Dynamic"하므로 최종 사용자는 두 유효성 검사기 중 발생한 시각적 모양을 구별할 수 없습니다. 대신 하나만 있는 것처럼 보입니다.
마지막으로 유효성 검사기가 오류 메시지를 실행하지 않은 경우 일부 서버 쪽 코드를 추가하여 필드에 텍스트를 출력합니다.
<script runat="server">
protected void btn_Click(object sender, EventArgs e)
{
lbl.Text = HttpUtility.HtmlEncode(Name.Text);
}
</script>
유효성 검사기가 필드에 텍스트가 없다고 불평합니다(전체 크기 이미지를 보려면 클릭).
