Пошаговое руководство. Отображение форматированных данных на веб-страницах с помощью серверного веб-элемента управления FormView

Visual Studio 2010

Обновлен: Ноябрь 2007

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

3fs4k4w4.alert_note(ru-ru,VS.100).gifПримечание.

Также при помощи элемента управления DetailsView, предоставляющего ранее указанный макет данных, можно редактировать отдельные записи данных. Дополнительные сведения см. в разделе Общие сведения о серверном веб-элементе управления DetailsView.

В этом пошаговом руководстве рассматриваются следующие задачи:

  • создание страницы, в которой отображаются основные/подробные сведения;

  • использование элемента управления FormView для создания произвольного макета записи данных;

  • настройка элемента управления FormView для редактирования.

Для выполнения этого пошагового руководства потребуется:

  • Microsoft Visual Web Developer.

  • Доступ к учебной базе данных "Northwind" на SQL Server. Сведения о загрузке и установке образца учебной базы данных "Northwind" на SQL Server см. в документе Установка образцов баз данных на веб-узле Microsoft SQL Server.

    3fs4k4w4.alert_note(ru-ru,VS.100).gifПримечание.

    Сведения о входе в систему SQL Server можно получить у администратора сервера.

  • Компоненты доступа к данным MDAC 2.7 или более поздней версии.

    Если используется Microsoft Windows XP или Windows Server 2003, то компоненты MDAC версии 2.7 уже установлены. Однако если используется Microsoft Windows 2000, то может потребоваться обновление компонентов доступа к данным MDAC, уже установленных на компьютере. Дополнительные сведения содержатся в разделе "Установка компонентов доступа к данным MDAC" в библиотеке MSDN.

Создайте новый веб-узел и страницу, выполнив следующие действия.

Создание веб-узла на базе файловой системы

  1. Откройте Visual Web Developer.

  2. В меню Файл выберите команду Создать и затем выберите Веб-узел. При использовании Visual Web Developer, экспресс-выпуск в меню Файл последовательно выберите пункты СоздатьВеб-узел.

    Откроется диалоговое окно Создать веб-узел.

  3. В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

  4. В поле Расположение введите имя папки, где следует хранить страницы веб-узла.

    Например, введите имя папки C:\WebSites\FormViewData.

  5. В списке Язык выберите предпочтительный язык программирования.

  6. Нажмите кнопку ОК.

    Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

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

Создание и заполнение раскрывающегося списка

  1. Переключитесь на страницу Default.aspx или откройте ее. При работе с созданным веб-узлом добавьте или откройте страницу, с которой можно работать в данном пошаговом руководстве.

  2. Перейдите в представление конструирования.

  3. Введите на странице Отображение сведений о продукте.

  4. Из группы Стандартная в Панели элементов перетащите на страницу элемент управления DropDownList.

  5. Если контекстное меню Задачи DropDownList не отображается, то щелкните правой кнопкой мыши элемент управления DropDownList и нажмите кнопку Показать смарт-тег.

  6. В меню DropDownListЗадачи установите флажок Включить AutoPostBack.

  7. Нажмите кнопку Выбор источника данных, чтобы открыть окно Мастера настройки источника данных.

  8. В списке Выбор источника данных выберите пункт <Создать источник данных>.

  9. Нажмите кнопку База данных.

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

    В поле Указать идентификатор для источника данных отображено имя источника данных по умолчанию. Можно оставить это имя.

  10. Нажмите кнопку ОК.

    В мастере отобразится страница, на которой можно выбрать подключение.

  11. Нажмите кнопку Новое подключение.

    Откроется диалоговое окно Добавить подключение.

    • Если в списке Источник данных отсутствует элемент Microsoft SQL Server (SqlClient), нажмите кнопку Изменить и в диалоговом окне Изменить источник данных выберите Microsoft SQL Server.

    • Если откроется страница Выбор источника данных, в списке Источник данных выберите тип используемого источника данных. В данном руководстве в качестве типа источника данных используется Microsoft SQL Server. В списке Поставщик данных выберите Поставщик данных платформы .NET Framework для SQL Server и нажмите кнопку Продолжить.

  12. В диалоговом окне Добавить подключение выполните следующие действия:

    1. В поле Имя сервера введите имя компьютера, на котором выполняется SQL Server.

    2. Для ввода учетных данных, необходимых для входа в систему, выберите соответствующий параметр доступа к выполняющейся базе данных SQL Server (встроенная безопасность или определенный идентификатор и пароль) и, если требуется, введите имя пользователя и пароль. При вводе пароля установите флажок Сохранить мой пароль.

    3. Выберите кнопку Выберите или введите имя базы данных, а затем введите имя базы Northwind.

    4. Нажмите кнопку Проверить подключение и, если есть уверенность, что подключение работает, нажмите кнопку ОК.

    Также можно вернуться к мастеру и внести в него сведения о подключении.

  13. Нажмите кнопку Далее.

  14. Убедитесь, что флажок Да, сохранить подключение как установлен и выберите Далее. (Можно оставить имя строки соединения по умолчанию.)

    В мастере отображается страница, на которой можно указать, какие данные необходимо извлечь из базы данных.

  15. Нажмите кнопку Укажите столбцы из таблицы или представления.

  16. В списке Название выберите Продукты.

  17. В меню Столбцы выберите пункты ProductID и ProductName.

  18. Нажмите кнопку Далее.

  19. Нажмите кнопку Проверить запрос, чтобы убедиться в получении необходимых данных.

  20. Нажмите кнопку Готово.

    Вновь откроется окно мастера.

  21. В списке Выберите поля данных для отображения в DropDownList нажмите кнопку ProductName.

  22. В списке Выберите поля данных для значения DropDownList выберите пункт ProductID.

    Указывает, что когда элемент выбран, поле ProductID будет возвращено в качестве значения элемента.

  23. Нажмите кнопку ОК.

Перед обработкой проверьте раскрывающийся список.

Проверка раскрывающегося списка

  1. Нажмите CTRL+F5 для запуска страницы

  2. Когда страница отобразится, проверьте раскрывающийся список.

  3. Выберите имя продукта и убедитесь, что список выполняет обратную передачу.

Теперь можно добавить элемент управления FormView для отображения сведений о продукте. Элемент управления FormView возвращает данные из другого элемента управления источником данных, который был добавлен на страницу. Во втором элементе управления источником данных содержится параметризованный запрос, возвращающий запись о продукте для элемента, выделенного в элементе управления DropDownList.

Добавление элемента управления FormView

  1. Из группы Данные, расположенной в Панели элементов, перетащите на страницу элемент управления FormView.

  2. Если контекстное меню Задачи FormView не отображается, щелкните правой кнопкой мыши элемент управления FormView и нажмите кнопку Показать смарт-тег.

  3. В меню Задачи FormView в поле Выбор источника данных списка нажмите кнопку <Новый источник данных>.

    Откроется диалоговое окно Мастер настройки источника данных.

  4. Нажмите кнопку База данных.

    Элемент управления FormView будет возвращать данные из той же таблицы, что и элемент управления DropDownList.

    В поле Указать идентификатор для источника данных отображено имя источника данных по умолчанию. Можно оставить это имя.

  5. Нажмите кнопку ОК.

    Запустится мастер Настройка источника данных.

  6. В списке Какое подключение ваше приложение должно использовать для работы с базой данных? выберите ранее созданное и сохраненное в руководстве подключение.

  7. Нажмите кнопку Далее.

    В мастере отобразится страница, в которой вы можете создать инструкцию SQL.

  8. В списке Имя из окна Укажите столбцы из таблицы или представления выберите пункт Продукты.

  9. В поле Столбцы выберите значения ProductID, ProductName и UnitPrice.

  10. Нажмите кнопку WHERE.

    Откроется диалоговое окно Добавить предложение WHERE.

  11. В списке Столбец выберите пункт ProductID.

  12. В списке Оператор выберите значение =.

  13. В списке Источник выберите пункт Элемент управления.

  14. В разделе Свойства параметров списка Идентификатор элемента управления выберите DropDownList1.

    На двух последних шагах можно указать, что запрос будет возвращать значение поиска для идентификатора продукта из ранее добавленного элемента управления DropDownList.

  15. Нажмите кнопку Добавить.

  16. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Добавить предложение WHERE.

  17. Нажмите кнопку Дополнительно.

    Появится диалоговое окно Дополнительные параметры создания SQL.

  18. Установите флажок Создать операторы INSERT, UPDATE и DELETE.

    При использовании этого параметра мастер создает инструкции для обновления SQL на основе настроенной инструкции Select. Далее в руководстве элемент управления FormView будет использоваться для редактирования и вставки записей, которые требуются для обновления инструкций элемента управления источником данных.

  19. Нажмите кнопку ОК.

  20. Нажмите кнопку Далее.

  21. На странице "Предварительный просмотр" нажмите кнопку Проверить запрос.

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

  22. В поле Значение введите 4 и нажмите кнопку ОК.

    Отобразятся сведения о продукте.

  23. Нажмите кнопку Готово.

Причина использования элемента управления FormView заключается в определении структуры отображаемой записи. В данном разделе руководства будет произведена настройка структуры записи путем редактирования шаблона. Для структуры можно использовать HTML-таблицу.

Форматирование структуры

  1. Щелкните элемент управления FormView, чтобы выбрать его, и затем перетащите маркер изменения размера на правую сторону элемента управления, чтобы выровнять ширину элемента управления по ширине текущей странице.

  2. Перетащите маркер изменения размера в нижнюю часть элемента управления, чтобы изменить его высоту приблизительно до 400 точек. (Точная высота не важна.)

  3. Щелкните правой кнопкой мыши элемент управления Изменить шаблон, а затем выберите команду ItemTemplate.

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

    В шаблоне также создаются три элемента управления LinkButton с текстом Редактировать, Удалить и Создать.

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

  5. Поместите курсор ниже элементов управления и статичного текста, а затем в меню Таблица нажмите кнопку Вставить таблицу.

    Создается HTML-таблица, служащая в качестве контейнера для текста и элементов управления.

  6. В диалоговом окне Вставить таблицу задайте значение Строки равным "4", а Столбцы — равным "2".

  7. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Вставить таблицу.

  8. Выделите все ячейки таблицы и затем в меню Таблица выберите пункт Форматирование ячеек.

    Появится диалоговое окно Свойства ячейки.

  9. Задайте Ширину равной 35 точкам (px) и Высоту равной 30 точкам (px).

  10. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Свойства ячейки.

  11. Перетащите элемент управления ProductIdLabel в верхнюю правую ячейку.

  12. Перетащите элемент управления ProductNameLabel во вторую правую ячейку.

  13. Перетащите элемент управления UnitPriceLabel в третью правую ячейку.

  14. Введите статичный текст в левый столбец в качестве заголовков элементов управления Label. Например, в ячейку после элемента управления ProductIdLabel введите Идентификатор. Вы можете ввести любой текст заголовков.

  15. Щелкните правой кнопкой мыши по левому столбцу, нажмите кнопку Выбрать и затем Столбец.

  16. В окне "Свойства" задайте ВыравниваниеПо правому краю для выравнивания текста заголовка по правому краю.

  17. Выберите левый столбец и перетащите его правую границу для установки ширины границы таблицы достаточной для отображения длинных наименований продуктов.

  18. Выберите текст, созданный в Visual Web Developer (например, текст ProductID), и удалите его.

  19. Щелкните правой кнопкой мыши по заголовку окна элемента управления FormView и затем нажмите кнопку Завершить редактирование шаблона.

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

Тестирование элемента управления FormView

Теперь можно провести проверку структуры.

Тестирование элемента управления FormView

  1. Нажмите клавиши CTRL+F5 для запуска страницы.

  2. В элементе управления DropDownList щелкните имя продукта.

    В элементе управления FormView отобразятся сведения об этом продукте.

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

  4. Закройте веб-обозреватель.

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

В данном разделе руководства показано добавление возможности редактирования отображаемой в данный момент записи. Для редактирования записи следует определить другой шаблон, содержащий текстовые поля (и потенциально другие элементы управления).

Добавление функции редактирования в элемент управления FormView

  1. Щелкните правой кнопкой мыши элемент управления FormView, выберите команду Редактировать шаблон и нажмите кнопку EditItemTemplate.

    Отобразится окно редактора шаблонов, в котором показано свойство EditItemTemplate, определяющее расположение записей в том случае, когда элемент управления находится в режиме редактирования. Visual Web Developer заполняет шаблон редактирования элементом управления TextBox для каждого столбца данных, не являющихся ключевыми, и добавляет статический текст для надписей. Этот способ похож на способ создания шаблона элемента, за исключением того, что при редактировании шаблона Visual Web Developer создает текстовые поля.

    Как и ранее, шаблон создается с элементами управления Обновить и ОтменитьLinkButton, которые используются для сохранения и отмены изменений во время редактирования.

  2. При необходимости добавьте табличный макет и выровняйте элементы управления так, как это было сделано при работе с шаблоном элемента ранее в руководстве.

  3. Щелкните правой кнопкой мыши элемент управления FormView, выберите команду Редактировать шаблон и затем нажмите кнопку InsertItemTemplate.

    Как и для свойства EditItemTemplate, Visual Web Developer автоматически создает шаблон макета меток и элементов управления TextBox. Элементы управления отобразятся, когда пользователь захочет вставить новую запись в таблицу "Продукты". Также в шаблоне создаются элементы управления Вставить и Отменить свойства LinkButton.

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

  5. Щелкните правой кнопкой мыши по элементу управления FormView и затем нажмите Завершить редактирование шаблона.

    3fs4k4w4.alert_security(ru-ru,VS.100).gifПримечание о безопасности.

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

Тестирование редактирования и вставки

Теперь можно проверить функции редактирования и вставки.

Проверка возможностей редактирования элемента управления FormView

  1. Нажмите клавиши CTRL+F5 для запуска страницы.

  2. Выберите продукт в элементе управления DropDownList.

    В элементе управления FormView отобразятся сведения о продукте.

  3. Нажмите кнопку Изменить.

    Элемент управления FormView переключится в режим редактирования.

  4. Измените имя продукта или цену за единицу.

  5. Нажмите кнопку Обновить.

    Запись сохранится, и элемент управления FormView переключится в режим отображения. Изменения отобразятся на экране.

  6. Выберите другой продукт.

  7. Нажмите кнопку Изменить.

  8. Измените имя продукта.

  9. Нажмите кнопку Отмена.

    Подтвердите, что изменение не было сохранено.

Проверка возможностей вставки элемента управления FormView

  1. Нажмите кнопку Добавить в элементе управления FormView.

    Элемент управления FormView переключится в режим вставки, в нем отобразятся два пустых текстовых поля.

  2. Введите имя нового продукта и цену, а затем нажмите кнопку Вставить.

    Запись сохранится в базе данных, а элемент управления FormView переключится в представление отображения (ItemTemplate).

    3fs4k4w4.alert_note(ru-ru,VS.100).gifПримечание.

    Новая запись не отображается в раскрывающемся списке. В следующем разделе будет показано, как добавить эту возможность.

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

Можно добавить несколько кодов для устранения этих незначительных проблем. В данном разделе пошагового руководства будет показано следующее:

  • обновление раскрывающегося списка, когда пользователи редактируют или вносят записи;

  • добавление текста "(Выбрать)" в раскрывающийся список при первом появлении страницы и удаление его, когда пользователь делает первое выделение.

Обновление раскрывающегося списка при редактировании или вставке записей

  1. В представлении конструктора страницы выделите элемент управления FormView.

  2. В окне "Свойства" нажмите кнопку События для отображения списка событий элемента управления FormView.

  3. Дважды щелкните поле ItemInserted.

    Visual Web Developer переключится в представление редактирования кода, и в нем будет создан обработчик событий ItemInserted.

  4. Добавьте в обработчик событий следующий выделенный код:

    Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
       ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
       Handles FormView1.ItemInserted
          DropDownList1.DataBind()
    End Sub
    

    [C#]

    protected void FormView1_ItemInserted(object sender, 
            FormViewInsertedEventArgs e)
    {
        DropDownList1.DataBind();
    }
    

    Код выполняется после вставки новой записи. Он выполняет повторную привязку раскрывающегося списка к таблице "Продукты", что приводит к обновлению содержимого списка.

  5. Перейдите в представление конструктора. (Если вы работаете со страницей с выделенным кодом, переключитесь на страницу Default.aspx, а затем переключитесь в представление конструктора.)

  6. В окне "Свойства" нажмите кнопку События для отображения списка событий элемента управления FormView.

  7. Дважды щелкните поле ItemUpdated.

    Visual Web Developer переключится в представление редактирования кода, и в нем будет создан обработчик событий ItemUpdated.

  8. Добавьте следующий выделенный код:

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
       ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
       Handles FormView1.ItemUpdated
          DropDownList1.DataBind()
    End Sub
    

    [C#]

    protected void FormView1_ItemUpdated(object sender, 
        FormViewUpdatedEventArgs e)
    {
        DropDownList1.DataBind();
    }
    

    Код выполняется после обновления записи. Он выполняет повторную привязку раскрывающегося списка к таблице "Продукты", что приводит к обновлению содержимого списка.

  9. Нажмите клавиши CTRL+F5 для запуска страницы.

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

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

Последним шагом является изменение раскрывающегося списка для отображения элемента "(Выделить)" и элемента управления FormView только в том случае, когда пользователи выполняют выделение.

Добавление элемента "Выделить" в элемент управления DropDownList

  1. В представлении конструктора дважды щелкните по пустой части страницы.

    В Visual Web Developer создается обработчик событий для события Load страницы.

  2. В обработчик событий добавьте следующий выделенный код:

    [Visual Basic]

    Protected Sub Page_Load(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then        FormView1.Visible = False    End If
    End Sub
    

    [C#]

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            FormView1.Visible = false;
        }
    }
    

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

  3. В представлении конструктора страницы выделите элемент управления DropDownList.

  4. В окне "Свойства" нажмите кнопку с многоточием (...) в поле Элементы.

    Откроется диалоговое окно Редактор коллекции ListItem.

  5. Нажмите кнопку Добавить для создания нового элемента.

  6. В меню Свойства ListItem в поле Текст введите (Выбрать).

  7. Нажмите кнопку ОК, чтобы закрыть диалоговое окно Редактор коллекции ListItem.

  8. В поле "Свойства" присвойте свойству AppendDataBoundItems значение true.

    Во время заполнения раскрывающегося списка при привязке данных сведения о продукте добавляются в указанный элемент (Выбрать).

  9. В окне "Свойства" нажмите кнопку События для отображения списка событий элемента управления DropDownList.

  10. Дважды щелкните поле SelectedIndexChanged.

  11. Добавьте следующий выделенный код:

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
        As Object, ByVal e As System.EventArgs) _
        Handles DropDownList1.SelectedIndexChanged
            If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
    End Sub
    

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
        EventArgs e)
    {
        if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
    }
    

    Код выполняется, когда пользователи выделяют элемент в элементе управления DropDownList. Ранее добавленный элемент "(Выделить)" удаляется (прежде проверяется, существует ли он), поскольку когда в первый раз пользователи выделяют элемент, дальнейшее выделение элемента не требуется. Код также отображает (не скрывает) элемент управления FormView, поэтому пользователи могут видеть выделенную запись.

  12. Нажмите клавиши CTRL+F5 для запуска страницы.

    На странице отображается только раскрывающийся список со словом (Выделить).

  13. Выберите элемент из списка.

    Элемент отображается в элементе управления FormView.

  14. Проверьте раскрывающийся список и отметьте, что слово (Выделить) отсутствует в списке.

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

Создание шаблонов для серверного веб-элемента управления FormView

Изменение данных с помощью серверного веб-элемента управления FormView

Показ: