Share via

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

  • Статья

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

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

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

Введение

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

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

Шаг 1. Репликация примера изобработки исключений BLL и DAL-Level

В руководстве По обработке исключений 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.

Копирование текста в элементе <управления asp:Content>

Рис. 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).

Страница UIValidation.aspx имитирует функциональные возможности в ErrorHandling.aspx

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

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

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

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

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

В нашем руководстве нам потребуется использовать RequiredFieldValidator, чтобы убедиться, что указано значение для названия продукта, и CompareValidator, чтобы убедиться, что введенная цена имеет значение больше или равно 0 и представлено в допустимом формате валюты.

Примечание

Хотя в ASP.NET 1.x были те же пять элементов управления проверкой, в ASP.NET 2.0 добавлен ряд улучшений, main два — поддержка клиентских скриптов для браузеров в дополнение к интернет-Обозреватель и возможность секционирования элементов управления проверкой на странице в группы проверки. Дополнительные сведения о новых функциях элементов управления проверкой в версии 2.0 см. в разделе Разбор элементов управления проверкой в ASP.NET 2.0.

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

Добавление RequiredFieldValidator в элемент EditItemTemplate после элемента ProductName TextBox

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

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

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

Задание свойств RequiredFieldValidator ControlToValidate, ErrorMessage и Text

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

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

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

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

<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, либо отключены.

Удаление символа валюты из элемента UnitPrice TextBox в EditItemTemplate

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

If Not Page.IsValid Then
    Exit Sub
End If

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

Примечание

Проницательный читатель вспомнит, что при обновлении данных с помощью GridView нам не нужно явно проверка Page.IsValid свойство в классе кода программной части страницы. Это связано с тем, что GridView обращается к свойству Page.IsValid и продолжает обновление только в том случае, если возвращает значение True.

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

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

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

Ошибки проверки отображаются в Client-Side messagebox

Рис. 6. Сводные данные об ошибках проверки отображаются в Client-Side messagebox (щелкните для просмотра полноразмерного изображения)

Сводка

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

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

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

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

Об авторе

Скотт Митчелл (Scott Mitchell), автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с Веб-технологиями Майкрософт с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга Sams Teach Yourself ASP.NET 2.0 в 24 часа. Его можно связать по адресу mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.

Отдельная благодарность

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

НазадВперед