Использование элемента управления TextBoxWatermark с проверяющими элементами управления (C#)
Элемент управления 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 void btn_Click(object sender, EventArgs e)
{
lbl.Text = HttpUtility.HtmlEncode(Name.Text);
}
</script>
Проверяющий элемент управления жалуется на отсутствие текста в поле (щелкните для просмотра полноразмерного изображения)