Принципы разработки пользовательского интерфейса интернет-приложения

Проверка вводимых данных с помощью CustomValidator происходит в специально создаваемых процедурах, которые могут быть реализованы на стороне клиента и на стороне сервера. При этом данные процедуры имеют одинаковое определение - они должны принимать два параметра: ссылку на элемент управления проверкой достоверности и целевой объект, содержащий проверяемое значение, которое доступно через свойство Value, а также свойство IsValid, с помощью которого возможно определить значение результата проверки.

Предположим, при вводе данных о пользователе, последнему необходимо ввести сумму своей зарплаты на последнем месте работы. Предположим также, что величина зарплаты должны быть кратна 10. Подобную проверку можно реализовать следующим образом.

Сначала необходимо добавить те элементы управления, которые будут использоваться для ввода данных, а также элемент CustomValidator. Исходный код этих элементов показан ниже.

<asp:Label ID="Label6" runat="server" Text=
 "Зарплата (кратна 10)"></asp:Label>
<asp:TextBox ID="tb_Salary" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
 ErrorMessage="размер зарплаты должен быть кратным 10"
 ClientValidationFunction="SalaryCheck"
 ControlToValidate="tb_Salary">*</asp:CustomValidator>

В качестве значений свойств ClientValidationFunction и ControlToValidate установлены соответственно значения SalaryCheck и tb_Salary. Первое соответствует имени функции, осуществляющей проверку вводимых данных, второе - ID элемента управления, осуществляющего ввод данных.

Функция SalaryCheck может быть написана на языке JavaScript следующим образом:

<script language="javascript">
function SalaryCheck(vc,control)
{
  control.IsValid=(control.Value%10==0);
}
</script>

При успешной проверке функцией SalaryCheck вводимых данных страница отправляется на сервер, и там запускается событие ServerValidate элемента CustomValidator. Это событие можно обработать, реализовав исходный код на языке C# или VB.NET. Серверная обработка вводимых данных должна осуществляться всегда, независимо от существования проверок на стороне клиента.

Для реализации серверной обработки вводимых данных о зарплате в рассматриваемом примере необходимо добавить обработчик события ServerValidate элемента CustomValidator. Ниже приведен возможный код такого обработчика.

protected void CustomValidator1_ServerValidate(object source,
ServerValidateEventArgs args)
  {
    try
    {
      args.IsValid = int.Parse(args.Value) % 10 == 0;
    }
    catch
    {
      args.IsValid = false;
    }
  }

Для отображения итоговой информации о результатах всех проверок вводимой информации необходимо использовать элемент управления ValidationSummary. Он выводит значение ErrorMessage каждого валидатора, для которого эта проверка завершилась неудачей. Итоговая информация может отображаться либо на странице, либо в отдельном окне. Для указания данного режима необходимо установить свойства ShowMessageBox и ShowSummary. При значении свойства ShowMessageBox=true сообщение выводится в отдельном окне, если же значение свойства ShowSummary=true - на странице. При отображении итоговой информации на странице возможно установить некоторые дополнительные параметры с помощью свойства DisplayMode, а также задать заголовок для итоговой информации с помощью свойства HeaderText. Пример использования элемента управления ValidationSummary на основе созданной ранее страницы приведен ниже.

Исходный код элемента ValidationSummary выглядит следующим образом:

<asp:ValidationSummary ID="ValidationSummary" runat="server"
DisplayMode="List" HeaderText="В результате заполнения полей воз-
никли следующие ошибки:" />

В результате использования данного элемента ошибки на странице выводятся, как показано на рис. 5.39.

Рис. 5.39. Пример использования элемента управления Validation Summary

Доступ к верификаторам возможен и из программного кода. Все валидаторы при их размещении на странице помещаются в коллекцию Validators. Для последовательного обращения ко всем валидаторам можно организовать циклический перебор элементов этой коллекции.

Это можно продемонстрировать на следующем примере. Добавим на страницу четыре флажка, с помощью которых будем изменять текущие свойства валидаторов, отвечающие за проверку вводимых данных. Результат показан на рис. 5.40.

Рис. 5.40. Пример страницы, содержащей элементы управления, которые предназначены для изменения режимов работы валидаторов

Для работы данного примера необходимо создать обработчик события изменения значения флажка и ввести в него следующий код:

{
  foreach (BaseValidator v in Page.Validators)
  {
    v.Enabled = cb_EnableValidators.Checked;
    v.EnableClientScript = cb_ClientValidation.Checked;
  }
  ValidationSummary.ShowSummary = cb_ShowSummary.Checked;
  ValidationSummary.ShowMessageBox = cb_ShowMessageBox.Checked;
}

При реализации механизмов проверки вводимых данных возможно создать пользовательскую проверку. Для этого необходимо установить значение свойства CausesValidation кнопки, инициирующей метод postback равным false, затем создать обработчик события нажатия на эту кнопку, внутри которого и реализовать алгоритм проверки вводимых данных. Для того чтобы инициировать проверку введенных данных с помощью присутствующих на странице валидаторов, необходимо вызвать метод Validate() страницы. Данный метод устанавливает свойство IsValid страницы на основе данных валидаторов. По значению данного метода можно судить о существовании ошибок на странице.

В качестве примера создадим пользовательскую проверку вводимых данных на странице. Для этого установим свойство CausesValidation кнопки OK равным false. В обработчике события нажатия этой кнопки необходимо ввести следующий код:

protected void btn_OK_Click(object sender, EventArgs e)
{
  this.Validate();
  if (!this.IsValid)
  {
    string msg = "<b>В результате заполнения полей возникли
     следующие ошибки:</b><br/>";
    //Перебор валидаторов
    TextBox tb;
    foreach (BaseValidator bv in this.Validators)
    {
      if (!bv.IsValid)
      {
        msg += bv.ErrorMessage + "<br/>";
        tb = (TextBox)this.FindControl(bv.ControlToValidate);
        msg += "Ошибка ввода в следующем значении:";
        msg += tb.Text+"<br/>";
        tb.BackColor = System.Drawing.Color.Pink;
      }
    }
    lbl_Error.Text = msg;
  }
}

При вводе данных и нажатии на кнопку OK будет выполнена проверка, в результате которой будет сформирована строка сообщения об ошибках с указанием расшифровки ошибки, а также значения поля ввода, которое привело к возникновению этой ошибки. Кроме того, поле ввода, содержащее ошибку, будет выделено розовым цветом.

Пример результатов этой проверки приведен на рис. 5.41.

Рис. 5.41. Выделение цветом полей ввода, содержащих ошибку валидации