Доступ к данным с помощью элементов управления источником данных (DataSource) в ASP.NET 2.0 - Модификация интерфейса редактирования
ОГЛАВЛЕНИЕ
Модификация интерфейса редактирования
Элемент управления GridView может работать в тандеме вместе с элементом SqlDataSource для того, чтобы предоставить простой интерфейс редактирования, составленный из текстовых полей. Данный упрощенный интерфейс позволяет разработчикам создавать интерфейсы редактирования без необходимости написания и строки кода, интерфейс настолько прост, что он используется (применим только к простым задачам) только для простых задач. Некоторые ограничения можно привести на примере обновления категории товара. Вкратце, вам придется (пришлось бы) обновить CategoryID значения, то есть для того, чтобы поменять категорию товара с напитков на молочные, вам придется поменять значение CategoryID с одного значения на другое. В таких случаях упрощенный интерфейс имеет такой недостаток, как отсутствие проверки вводимых значений, что может оказаться необходимым при редактировании требуемых полей, либо для полей, которые должны впоследствии быть отображены в определенном формате (к примеру, даты, числа).
К счастью, интерфейс редактирования GridView может быть настроен таким образом, что он будет включать в себя элементы управления для валидации и альтернативные элементы управления интерфейсом пользователя. Интерфейс требует немного усилий, но в большинстве случаев данные изменения могут быть выполнены посредством дизайнера (Designer) либо декларативной разметки страницы. В данной статье мы расширим упрощенный интерфейс редактирования таким образом, что он будет включать в себя элементы управления валидации для полей ProductName и UnitPrice ; мы также заменим текстовое поле CategoryID выпадающим списком, в котором перечислены все возможные категории. Читайте далее, чтобы узнать больше об этом!
Как генерируется интерфейс редактирования?
GridView может быть сделан редактируемым в случае, если он привязан к элементу управления источником данных, у которого активированы возможности обновления. Элемент управления SqlDataSource настроен так же, как и в случае если бы было указано его свойство UpdateCommand. В случае с SqlDataSource, UpdateCommand указывает выражение UPDATE либо хранимую процедуру, которая выполняется когда вызывается метод Update элемента управления источником данных.
В Visual Studio Designer GridView может быть помечен как редактируемый путем выбора опции активизации редактирования ("Enable Editing") в смарт-теге GridView либо вручную добавлением CommandField к GridView, чье свойство ShowEditButton установлено в True. Со стороны пользователя это будет выглядеть как колонка кнопок редактирования, добавленной к сетке. Нажатие на кнопку вызовет запуск постбэка и выполнение события RowEditing GridView. После того, как событие выполняется, GridView обрабатывает себя, но выбранная строка будет в режиме редактирования.
Все колонки редактируемой строки также переходят в режим редактирования. Для BoundFields, чье свойство ReadOnly не равно True используется элемент управления TextBox и его свойству Text присваивается значение данной клетки. CheckBoxFields обрабатываются вместе с активизируемой кнопкой с зависимой фиксацией. В случае когда используется BoundFields и CheckBoxField режим редактирования будет составлен из элементов управления TextBox и активированным элементом управления CheckBox.
Для того чтобы модифицировать интерфейс редактирования – чтобы он проверял вводимые значения или чтобы использовал альтернативные элементы управления, - нам необходимо использовать TemplateField вместо BoundField. TemplateFields составлены из редактируемых и только читаемых шаблонов (read-only). Шаблон позволяет разработчику указать набор статического HTML, элементов управления и синтаксиса привязки данных в пределах шаблона. При отображении строки в режиме редактирования для любых TemplateFields их EditItemTemplates используются для обработки интерфейса редактирования. Если TemplateField не хватает EditItemTemplate , то вместо него используется ItemTemplate.
Шаги модификации интерфейса редактирования
Для того чтобы модифицировать интерфейс редактирования для конкретной колонки в GridView, нам необходимо использовать TemplateField. Данная модификация подразумевает следующие шаги:
- Добавьте новый TemplateField к колонке GridView для интерфейса редактирования. В качестве альтернативы, если у вас уже есть BoundField вы можете преобразовать существующий BoundField в TemplateField нажав ссылку "Convert this field into a TemplateField" ("Преобразовать данное поле в TemplateField" ) в диалоговом окне полей (Fields). Чтобы открыть данное окно нажмите на ссылку "Edit Columns" ("Редактировать колонки") из смарт-тега GridView. Далее выберите колонку, которую вы хотите преобразовать в TemplateField и нажмите на ссылку.
- Отредактируйте EditItemTemplate. Это можно сделать, используя декларативную разметку страницы путем ввода вручную синтаксиса HTML и элемента управления. Если вам по душе дизайн, то нажмите на ссылку Edit Templates (редактирование шаблонов) в смарт-теге GridView. Отсюда вы можете выбрать шаблон, который отредактируете, и затем перетащить элементы управления из инструментария (Toolbox) в интерфейс дизайна шаблона.
- Если вы создаете альтернативный пользовательский интерфейс для редактирования, то вы должны добавить необходимые элементы управления к EditItemTemplate.
- Добавьте любые элементы управления валидацией и настройте их свойство по мере необходимости.
- Если вы используете альтернативный пользовательский интерфейс или же добавляете TemplateField вручную, то вам необходимо использовать двустороннюю привязку данных для того, чтобы ассоциировать значение параметра обновления со свойством элемента управления в EditItemTemplate. Данный шаг не является обязательным в случае, если вы преобразовали существующий BoundField в TemplateField, при этом не изменяли или добавляли новые элементы управления для сбора пользовательского ввода, потому что процесс преобразования автоматически добавляет TextBox к EditItemTemplate и использует двустороннюю привязку данных для того, чтобы ассоциировать поле данных со свойством Text элемента TextBox.
Двусторонняя привязка данных является специализированным синтаксисом, который оповещает GridView о том, что он должен взять конкретное значение из интерфейса редактирования и связать его с конкретным параметром в наборе UpdateParameters его элемента управления источником данных. К примеру, в GridView мы имеем поле с данными, названое ProductName , которое отображает название товара. Существует параметр в наборе UpdateParameters, также названный ProductName, и данный параметр используется в UpdateCommand элемента управления источником. Если мы используем TemplateField вместо BoundField для колонки ProductName , то нам понадобится использовать двустороннюю привязку, которая говорит GridView: "Эй, когда пользователь нажимает кнопку Update (обновление), тебе необходимо присвоить значение данного свойства Text элемента TextBox параметру ProductName.
В дополнение к присвоению значения, введенного пользователем в соответствующий параметр обновления, двусторонняя привязка данных также устанавливает значение свойства Text элемента TextBox в значение поля данных в момент, когда нажимается кнопка Edit данной записи. Вкратце, нам не нужно писать никакого кода, благодаря двусторонней привязке. Редактирование при помощи элемента DataGrid в ASP.NET 1.x требует написания кода по заполнению интерфейса редактирования значениями тогда, когда редактируется строка, а также получение обновленных пользователем значений и сохранение их в базе данных.