Использование TextBoxWatermark с элементами управления проверки (C#)

Кристиан Венц

Скачать в формате PDF

Элемент управления TextBoxWatermark в наборе элементов управления AJAX расширяет текстовое поле, чтобы текст отображался в поле. Когда пользователь щелкает по окну, оно становится пустым. Если пользователь покидает поле без ввода текста, предварительно заполненный текст снова появится. Это может конфликтовать с элементами управления валидацией ASP.NET на той же странице, но эти проблемы могут быть преодолены.

Обзор

Элемент TextBoxWatermark управления в наборе элементов управления AJAX расширяет текстовое поле, чтобы текст отображался в поле. Когда пользователь щелкает по окну, оно становится пустым. Если пользователь покидает поле без ввода текста, предварительно заполненный текст снова появится. Это может конфликтовать с элементами управления проверки ASP.NET на той же странице, но эти проблемы можно преодолеть.

Шаги

Базовая настройка примера следующая: TextBox контрол используется в качестве водяного знака с помощью TextBoxWatermarkExtender контрола. Кнопка активирует postback и позже будет использоваться для активации контролей валидации на странице. Кроме того, 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>

Валидатор сообщает об отсутствии текста в поле (Щелкните, чтобы просмотреть изображение полного размера)