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

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

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

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

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

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

Этапы

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

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

НазадВперед