Использование элемента управления TextBoxWatermark с проверяющими элементами управления (VB)

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

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

Общие сведения

Элемент TextBoxWatermark управления в наборе элементов управления AJAX расширяет текстовое поле, чтобы в ней отображался текст. Когда пользователь щелкает поле, оно очищается. Если пользователь покидает поле, не вводя текст, предварительно заполненный текст появляется снова. Это может столкнуться с 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 Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 lbl.Text = HttpUtility.HtmlEncode(Name.Text)
 End Sub
</script>

Проверяющий элемент управления жалуется, что в поле нет текста (щелкните для просмотра полноразмерного изображения)

Назад