Добавление элементов управления валидацией в интерфейс редактирования DataList (VB)

Скотт Митчелл

Скачивание PDF

В этом руководстве мы рассмотрим, насколько легко добавить контроли валидации в EditItemTemplate DataList, чтобы обеспечить более надежный пользовательский интерфейс редактирования.

Введение

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

В этом руководстве мы увидим, насколько легко добавлять элементы управления проверки в DataList EditItemTemplate, чтобы обеспечить более надежный интерфейс пользователя для редактирования. В частности, в этом руководстве используется пример, созданный в предыдущем руководстве, и расширяет интерфейс редактирования для включения соответствующей проверки.

Шаг 1: Воспроизведение примера изHandling BLL- and DAL-Level Exceptions

В руководстве по обработке исключений BLL и DAL-Level мы создали страницу, на которой перечислены имена и цены продуктов в двух столбцах, редактируемом DataList. Наша цель в этом руководстве — расширить интерфейс редактирования DataList, чтобы включить элементы управления проверкой. В частности, наша логика проверки будет:

• Требовать предоставления имени продукта
• Убедитесь, что значение, введенное для цены, является допустимым форматом валюты
• Убедитесь, что значение, введенное для цены, больше нуля или равно нулю, так как отрицательное UnitPrice значение является незаконным

Прежде чем мы рассмотрим расширение предыдущего примера, чтобы включить проверку, сначала необходимо реплицировать пример из ErrorHandling.aspx страницы в EditDeleteDataList папке на страницу для этого руководства UIValidation.aspx. Для этого необходимо скопировать как декларативную разметку страницы, ErrorHandling.aspx так и его исходный код. Сначала скопируйте декларативную разметку, выполнив следующие действия:

1. Откройте страницу ErrorHandling.aspx в Visual Studio
2. Перейдите к декларативной разметке страницы (нажмите кнопку "Источник" в нижней части страницы)
3. Скопируйте текст внутри <asp:Content> и </asp:Content> тегов (строки 3–32), как показано на рис. 1.

Рис. 2. Копирование текста в <asp:Content> элементе управления (щелкните, чтобы просмотреть изображение полного размера)

1. Откройте UIValidation.aspx страницу
2. Перейдите к декларативной разметке страницы
3. Вставьте текст в <asp:Content> элемент управления.

Чтобы скопировать исходный код, откройте ErrorHandling.aspx.vb страницу и скопируйте только текст вEditDeleteDataList_ErrorHandling классе. Скопируйте три обработчика событий (Products_EditCommand, Products_CancelCommand, и Products_UpdateCommand) вместе с методом DisplayExceptionDetails, но не копируйте объявление класса или using операторы. Вставьте скопированный текст внутриEditDeleteDataList_UIValidation класса UIValidation.aspx.vb.

После переноса содержимого и кода из ErrorHandling.aspx в UIValidation.aspx, уделите немного времени, чтобы протестировать страницы в браузере. Вы должны увидеть одинаковые выходные данные и использовать одинаковые функции на каждой из этих двух страниц (см. рис. 2).

Рис. 2:UIValidation.aspx Страница повторяет функциональность ErrorHandling.aspx (Щелкните, чтобы просмотреть изображение в полном размере)

Шаг 2. Добавление элементов управления проверки в DataList s EditItemTemplate

При создании форм ввода данных важно, чтобы пользователи вводили все необходимые поля и что все предоставленные входные данные являются законными, правильно отформатированными значениями. Чтобы убедиться, что входные данные пользователя допустимы, ASP.NET предоставляет пять встроенных элементов управления проверки, которые предназначены для проверки значения одного входного веб-элемента управления:

• RequiredFieldValidator гарантирует, что задано значение
• CompareValidator проверяет значение на соответствие другому значению веб-элемента управления или постоянному значению или гарантирует, что формат значения является законным для указанного типа данных.
• RangeValidator гарантирует, что значение находится в диапазоне значений
• RegularExpressionValidator проверяет значение по регулярному выражению
• CustomValidator проверяет значение с помощью пользовательского метода, заданного пользователем.

Дополнительные сведения об этих пяти элементах управления см. в руководстве по добавлению элементов управления проверки в интерфейсы редактирования и вставки или в разделе "Элементы управления проверкой"учебника по быстрому началу ASP.NET.

Для работы с нашим руководством необходимо использовать ОбязательныйПолеВалидатор, чтобы убедиться, что задано значение имени продукта, и СравнительныйВалидатор, чтобы убедиться, что введенная цена имеет значение не меньше 0 и представлена в допустимом формате валюты.

Начнем с добавления необходимых элементов управления валидацией в DataList EditItemTemplate. Эту задачу можно выполнить с помощью конструктора, щелкнув ссылку "Изменить шаблоны" из смарт-тега DataList или с помощью декларативного синтаксиса. Давайте рассмотрим процесс с помощью параметра "Изменить шаблоны" в представлении конструктора. После выбора изменения DataList EditItemTemplate, добавьте RequiredFieldValidator, перетащив его из панели элементов в интерфейс редактирования шаблона, поместив его после текстового поля ProductName.

Рис. 3. Добавьте валидатор обязательного поля в EditItemTemplate AfterProductName текстовое поле (щелкните, чтобы просмотреть изображение полного размера)

Все элементы управления проверкой работают путем проверки входных данных одного веб-элемента управления ASP.NET. Таким образом, необходимо указать, что только что добавленный элемент RequiredFieldValidator должен выполнять проверку по ProductName TextBox. Это можно сделать, установив свойство элемента управления проверки ControlToValidate на ID соответствующему веб-элементу управления (ProductName в этом случае). Затем задайте для свойства значение "Вы должны указать имя продукта", а для свойства - значение "*". Если для свойства Text задано значение, то это текст, который отображается элементом управления проверки, если проверка не проходит. ErrorMessage Значение свойства, которое является обязательным, используется элементом управления ValidationSummary; если Text значение свойства отсутствует, ErrorMessage значение свойства отображается элементом управления проверки при недопустимых входных данных.

После задания этих трех свойств ПроверкиОбязательногоПоля ваш экран должен выглядеть примерно так же, как на рис. 4.

Рис. 4. Задайте свойства ControlToValidate, ErrorMessage, и RequiredFieldValidator Text (щелкните, чтобы просмотреть изображение в полном размере)

При добавлении RequiredFieldValidator в элемент EditItemTemplate остается только добавить необходимую проверку TextBox для цены продукта. Поскольку UnitPrice является необязательным при редактировании записи, нам не нужно добавлять RequiredFieldValidator. Однако необходимо добавить CompareValidator, чтобы обеспечить, что в случае, если UnitPrice задан, оно правильно отформатировано как валюта и больше или равно 0.

Добавьте CompareValidator в EditItemTemplate, задайте его свойству ControlToValidate значение UnitPrice, его свойству ErrorMessage значение "Цена должна быть больше или равна нулю и не может включать символ валюты", и его свойству Text значение *. Чтобы указать, что UnitPrice значение должно быть больше или равно 0, установите свойство Operator элемента CompareValidator, задайте его GreaterThanEqual значение 0, а его ValueToCompare.

После добавления этих двух элементов управления проверки декларативный синтаксис DataList EditItemTemplate должен выглядеть следующим образом:

<EditItemTemplate>
    Product name:
        <asp:TextBox ID="ProductName" runat="server"
            Text='<%# Eval("ProductName") %>'></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
            ControlToValidate="ProductName"
            ErrorMessage="You must provide the product's name"
            runat="server">*</asp:RequiredFieldValidator>
    <br />
    Price:
        <asp:TextBox ID="UnitPrice" runat="server"
            Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:TextBox>
        <asp:CompareValidator ID="CompareValidator1"
            ControlToValidate="UnitPrice"
            ErrorMessage="The price must be greater than or equal to zero
                          and cannot include the currency symbol"
            Operator="GreaterThanEqual" Type="Currency" ValueToCompare="0"
            runat="server">*</asp:CompareValidator><br />
    <br />
    <asp:Button ID="UpdateProduct" runat="server" CommandName="Update"
        Text="Update" /> 
    <asp:Button ID="CancelUpdate" runat="server" CommandName="Cancel"
        Text="Cancel" />
</EditItemTemplate>

После внесения этих изменений откройте страницу в браузере. Если вы пытаетесь опустить имя или ввести недопустимое значение цены при редактировании продукта, звездочка появится рядом с текстовым полем. Как показано на рисунке 5, цена с символом валюты, например $19,95, считается недопустимой. Функция CompareValidator CurrencyType допускает использование разделителей разрядов (например, запятых или точек в зависимости от параметров языка и региональных настроек) и знаков "плюс" или "минус", но не допускает использование символа валюты. В нынешнем виде интерфейс редактирования отображает UnitPrice в формате валюты, что может запутать пользователей.

Рис. 5. Звездочка отображается рядом с текстовыми полями с недопустимым вводом (щелкните, чтобы просмотреть изображение полного размера)

Хотя проверка работает как есть, пользователь должен вручную удалить символ валюты при редактировании записи, что недопустимо. Более того, если в интерфейсе редактирования присутствуют недопустимые входные данные, ни кнопка "Обновить", ни "Отмена" при нажатии не инициируют обратную передачу. В идеале кнопка "Отмена" вернет DataList в его состояние предварительного редактирования независимо от допустимости входных данных пользователя. Кроме того, мы должны убедиться, что данные страницы действительны перед обновлением информации о продукте в обработчике событий DataList UpdateCommand, так как клиентская логика проверки данных может быть обойдена пользователями, чьи браузеры либо не поддерживают JavaScript, либо имеют эту поддержку отключенной.

Удаление символа валюты из текстового поля EditItemTemplate s UnitPrice

При использовании средства CompareValidator Currency``Typeвходные данные, проверяемые, не должны включать символы валюты. Наличие таких символов приводит к тому, что CompareValidator помечает входные данные как недопустимые. Однако наш интерфейс редактирования в настоящее время включает символ валюты в UnitPrice TextBox, то есть пользователь должен явно удалить символ валюты перед сохранением изменений. Чтобы устранить эту проблему, у нас есть три варианта:

1. Настройте EditItemTemplate так, чтобы значение UnitPrice TextBox не было отформатировано как валюта.
2. Разрешить пользователю ввести символ валюты, удалив CompareValidator и заменив его на RegularExpressionValidator, который проверяет правильно отформатированную валюту. Проблема заключается в том, что регулярное выражение для проверки значения валюты не так просто, как CompareValidator и потребует написания кода, если мы хотим включить параметры языка и региональных параметров.
3. Удалите элемент управления проверки полностью и полагайтесь на настраиваемую логику проверки на стороне сервера в обработчике событий элемента GridView в RowUpdating.

Давайте рассмотрим вариант 1 для этого руководства. В настоящее время UnitPrice форматируется как значение валюты из-за выражения привязки данных для TextBox в EditItemTemplate<%# Eval("UnitPrice", "{0:c}") %>. Измените оператор Evalна Eval("UnitPrice", "{0:n2}") , который форматирует результат в виде числа с двумя цифрами точности. Это можно сделать непосредственно с помощью декларативного синтаксиса или щелкнув ссылку "Изменить DataBindings" из UnitPrice текстового поля в DataList EditItemTemplate.

При этом изменении форматированная цена в интерфейсе редактирования включает запятые в качестве разделителя групп и период в качестве десятичного разделителя, но оставляет символ валюты.

Исправление кнопки "Отмена"

По умолчанию веб-элементы управления проверки выдают JavaScript для выполнения проверки на стороне клиента. При нажатии кнопок Button, LinkButton или ImageButton элементы валидации на странице проверяются на стороне клиента перед выполнением постбэка. Если есть недопустимые данные, обратное отправление отменяется. Однако для некоторых кнопок валидность данных может быть несущественной. В таком случае отмена выполнения постбэка из-за некорректных данных становится неудобством.

Например, кнопка "Отмена". Представьте, что пользователь вводит недопустимые данные, например, не введено имя продукта, а затем решает, что она не хочет сохранить продукт в конечном итоге и нажимает кнопку "Отмена". В настоящее время кнопка "Отмена" активирует элементы управления проверкой на странице, которые сообщают, что имя продукта отсутствует и блокируют постбэк. Наш пользователь должен ввести текст в ProductName TextBox исключительно для того, чтобы выйти из режима редактирования.

К счастью, элементы управления "Button", "LinkButton" и "ImageButton" имеют свойство , которое может указывать, следует ли нажатие на кнопку инициировать логику проверки (по умолчанию — ). Задайте свойство кнопки "Отмена" CausesValidation значением False.

Обеспечение допустимости входных данных в обработчике событий UpdateCommand

Из-за скрипта на стороне клиента, созданного элементами управления проверки, если пользователь вводит неверные данные, элементы управления проверки отменяют любые обратные вызовы, инициированные элементами управления Button, LinkButton или ImageButton, свойства которых CausesValidation равны True (по умолчанию). Однако если пользователь посещает устаревший браузер или один, поддержка JavaScript которого отключена, проверка на стороне клиента не будет выполнена.

Все элементы управления проверки ASP.NET повторяют логику проверки сразу после обратной отправки и сообщают об общей допустимости вводимых данных страницы через Page.IsValid свойство. Однако поток страницы не прерывается или не останавливается каким-либо образом в зависимости от значения Page.IsValid. Как разработчики, мы должны убедиться, что Page.IsValid свойство имеет значение True перед продолжением кода, который предполагает допустимые входные данные.

Если пользователь отключил JavaScript, посетит нашу страницу, изменит продукт, введет значение цены "Слишком дорого" и нажмет кнопку "Обновить", то обойдёт проверка на стороне клиента и произойдет серверный запрос. При обратной отправке выполняется обработчик событий страницы ASP.NET UpdateCommand, и при попытке преобразовать строку "Too expensive" в Decimal возникает исключение. Так как у нас предусмотрена обработка исключений, такое исключение будет корректно обработано, но мы могли бы изначально предотвратить прохождение недопустимых данных, продолжая работу с обработчиком UpdateCommand событий только в том случае, если у Page.IsValid есть значение True.

Добавьте следующий код в начало обработчика UpdateCommand событий непосредственно перед блоком Try :

If Not Page.IsValid Then
    Exit Sub
End If

При этом продукт попытается обновиться только в том случае, если отправленные данные действительны. Большинству пользователей не удастся отправить обратно недопустимые данные из-за клиентских скриптов проверки данных, но пользователи, в браузерах которых не поддерживается JavaScript или у которых поддержка JavaScript отключена, могут обойти проверки на стороне клиента и отправить недопустимые данные.

Шаг 3. Сводка проблем с записью данных

Помимо пяти элементов управления проверки, ASP.NET включает элемент управления ValidationSummary, который отображает сообщения элементов управления проверки, которые обнаружили недопустимые данные. Эти сводные данные можно отображать как текст на веб-странице или через модальное текстовое поле сообщения на стороне клиента. Давайте расширим этот учебник, чтобы включить окно сообщения на стороне клиента со сводкой всех проблем валидации.

Для этого перетащите элемент управления ValidationSummary из панели элементов на конструктор. Расположение элемента управления ValidationSummary не имеет значения, так как мы настраиваем его только для отображения сводки в виде почтового ящика. После добавления элемента управления задайте его свойству ShowSummary значение False, а свойству ShowMessageBox значение True. С этим дополнением все ошибки проверки суммируются в клиентском почтовом ящике сообщений (см. рис. 6).

Рис. 6. Ошибки проверки: суммируются в сообщении Client-Side (щелкните, чтобы просмотреть изображение полного размера)

Итоги

В этом руководстве мы узнали, как уменьшить вероятность исключений с помощью элементов управления проверки, чтобы заранее убедиться, что входные данные пользователей действительны перед попыткой использовать их в рабочем процессе обновления. ASP.NET предоставляет пять веб-элементов управления проверки, предназначенных для проверки входных данных и обратного отчета о допустимости входных данных. В этом руководстве мы использовали два из этих пяти элементов управления RequiredFieldValidator и CompareValidator, чтобы убедиться, что предоставлено имя продукта, и что цена была в формате валюты со значением больше или равным нулю.

Добавление элементов управления проверки в интерфейс редактирования DataList так же просто, как перетаскивание их из Панели инструментов и задание нескольких свойств. По умолчанию элементы управления проверки автоматически выдают скрипт проверки на стороне клиента; они также предоставляют проверку на стороне сервера при обратной отправке, сохраняя совокупный результат в свойстве Page.IsValid . Чтобы обойти проверку на стороне клиента при нажатии кнопки, LinkButton или ImageButton, задайте для свойства кнопки CausesValidation значение False. Кроме того, перед выполнением любых задач с данными, отправленными при обратной отправке, убедитесь, что свойство Page.IsValid возвращает значение True.

Все руководства по редактированию DataList, которые мы изучили до сих пор, имели очень простые интерфейсы: текстовое поле для имени продукта и другое текстовое поле для цены. Однако интерфейс редактирования может содержать сочетание различных веб-элементов управления, таких как DropDownLists, Calendars, RadioButtons, CheckBoxes и т. д. В следующем руководстве мы рассмотрим создание интерфейса, использующего различные веб-элементы управления.

Счастливое программирование!

Об авторе

Скотт Митчелл, автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с технологиями Microsoft Web с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Серия самоучителей Сэмс: ASP.NET 2.0 за 24 часа. С ним можно связаться по адресу mitchell@4GuysFromRolla.com.

Особое спасибо кому

Эта серия учебников была проверена многими полезными рецензентами. Ведущими рецензентами этого руководства были Деннис Паттерсон, Кен Песписа и Лиз Шулок. Хотите просмотреть мои предстоящие статьи MSDN? Если да, напишите мне на mitchell@4GuysFromRolla.com.