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

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

Загрузить 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.

Рис. 1. Копирование текста в элементе <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 в 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.

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

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

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

Рис. 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 (!Page.IsValid)
    return;

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

Примечание

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

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

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

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

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

Сводка

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

НазадВперед