Пошаговое руководство. Привязка данных веб-страниц с помощью компонента данных Visual Studio

Visual Studio 2010

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

Большинство веб-приложений создаются с использованием нескольких уровней, с одним или несколькими компонентами на среднем уровне, который объединяет доступ к данным с бизнес-логикой. В данном пошаговом руководстве показано, как создать компонент доступа к данным на веб-узле и привязать серверный веб-элемент управления (элемент управления GridView) к данным, управляемым компонентом. Компонент данных взаимодействует с базой данных Microsoft SQL Server и может осуществлять чтение и запись данных.

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

  • Создание компонента, который может считывать и записывать данные.

  • Ссылка на компонент данных, как на источник данных на веб-странице.

  • Привязка элемента управления к данным, возвращаемым компонентом данных.

  • Чтение и запись данных с помощью компонента данных.

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

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

    3h7eexxe.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 можно загрузить с веб-узла Центра разработчиков доступа к данным и их хранения.

Если веб-узел в Visual Web Developer уже создан (см. раздел Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), то его можно использовать для выполнения примера и перейти к следующему подразделу. В противном случае создайте новый веб-узел и страницу, выполнив следующие действия.

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

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

  2. В меню Файл выберите Создатьвеб-узел.

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

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

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

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

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

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

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

В данном пошаговом руководстве для создания компонента, который считывает и записывает данные в базу данных «Борей», используется мастер. Компонент включает файл схемы (XSD-файл), описывающий необходимые данные и методы, которые будут использоваться для чтения и записи данных. Написание какого-либо кода не требуется. Во время выполнения XSD-файл компилируется в сборку, которая выполняет указанные в мастере задачи.

Создание компонента доступа к данным

  1. Если веб-узел не содержит папку App_Code, то выполните следующие действия:

    1. В обозревателе решений щелкните правой кнопкой мыши имя веб-узла.

    2. Выберите Добавить папку и нажмите Папка App_Code.

  2. Щелкните правой кнопкой мыши папку App_Code и выберите команду Добавить новый элемент.

    Откроется диалоговое окно Добавление нового элемента.

  3. В группе Установленные шаблоны Visual Studio выберите DataSet.

  4. В поле Имя введите EmployeesObject и нажмите кнопку Добавить.

    Откроется мастер Настройка адаптера таблицы.

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

  6. В диалоговом окне Выбор источника данных выберите Microsoft SQL Server и нажмите кнопку Продолжить.

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

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

    • Если указываются явные учетные данные, то установите флажок Сохранить пароль.

  9. Нажмите Выберите или введите имя базы данных и затем введите Борей.

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

    Откроется диалоговое окно мастера Настройки адаптера таблицы с заполненной информацией о подключении.

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

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

  12. Установите флажок Да, сохранить подключение как и нажмите кнопку Далее.

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

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

  13. Выберите Использовать инструкции SQL и нажмите кнопку Далее.

    Использование хранимых процедур имеет некоторые преимущества, включая производительность и безопасность. Однако В данном пошаговом руководстве для упрощения будет использоваться инструкция SQL.

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

  14. В группе Какие данные должны быть загружены в таблицу введите следующую инструкцию SQL:

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    
    3h7eexxe.alert_note(ru-ru,VS.100).gifПримечание.

    Если будет использоваться средство построения запросов, то необходимо выбрать Построитель запросов.

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

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

  16. Снимите флажок Заполнить таблицу данных (DataTable) и установите флажки Вернуть таблицу данных (DataTable) и Создать методы для отправки обновлений непосредственно в базу данных.

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

  17. В поле Имя метода введите GetEmployees.

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

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

    Мастер настраивает компонент и выводит его в конструкторе компонентов, отображая управляемые компонентом данные и предоставляемые компонентом методы.

  19. Сохраните компонент данных и закройте конструктор компонентов.

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

Теперь можно использовать компонент данных в качестве источника данных в веб-странице ASP.NET. Для доступа к компоненту данных следует использовать элемент управления ObjectDataSource, настраивая его на вызов предоставляемых компонентом данных методов доступа к данным. Затем можно добавить элементы управления на страницу и привязать их к элементу управления источником данных.

Добавление элемента управления источником данных на страницу

  1. Откройте страницу Default.aspx и переключитесь в режим Представление конструирования.

  2. В Панели элементов из группы Данные перетащите на страницу элемент управления ObjectDataSource.

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

  3. В контекстном меню Задачи ObjectDataSource выберите команду Настройка источника данных.

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

  4. В списке Выбор бизнес-объекта выберите EmployeesObjectTableAdapters.EmployeesTableAdapte.

    Это имя типа (пространство имен и имя класса) компонента, созданного в предыдущем подразделе.

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

  6. На вкладке Выбор в списке Выбор метода выберите GetEmployees(), returns EmployeesDataTable.

    Метод GetEmployees является методом, который был определен в компоненте, созданном в предыдущем подразделе. Он возвращает результаты инструкции SQL, доступные в объекте DataTable, к которому могут быть привязаны элементы управления данными.

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

Теперь на страницу можно добавить элементы управления данными и привязать их к элементу управления ObjectDataSource. В данном пошаговом руководстве будет использоваться элемент управления GridView.

Добавление элемента управления GridView на страницу и связывание его с данными

  1. В Панели элементов из группы Данные перетащите на страницу элемент управления GridView.

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

  2. В контекстном меню Задачи GridView в списке Выбор источника данных выберите ObjectDataSource1, который является идентификатором элемента управления, настроенного в предыдущем подразделе.

    Элемент управления GridView отобразится повторно с возвращаемым инструкцией SQL столбцом для каждого столбца данных.

  3. Убедитесь в том, что в окне «Свойства» свойство DataKeyNames имеет значение EmployeeID.

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

Тестирование страницы

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

  2. Убедитесь, что столбцы «Идентификатор сотрудника», «Фамилия», «Имя» и «Дата приема на работу» из таблицы «Сотрудники» отображаются в таблице.

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

Элемент управления GridView запрашивает данные из элемента управления ObjectDataSource. В свою очередь элемент управления ObjectDataSource создает экземпляр компонента данных и вызывает метод GetEmployees для компонента данных. Метод GetEmployees возвращает объект DataTable, который элемент управления ObjectDataSource вернул элементу управления GridView.

Созданный компонент данных содержит инструкции SQL для обновления базы данных (обновления, вставки и удаления записей). Средства обновления компонента данных предоставляются методами, которые были сформированы автоматически при создании компонента мастером. Элементы управления GridView и ObjectDataSource могут взаимодействовать для автоматического запуска методов обновления.

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

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

Включение обновления и удаления

  1. Щелкните правой кнопкой мыши элемент управления GridView и выберите команду Показать смарт-тег.

  2. Установите флажок Разрешить изменение.

  3. Установите флажок Разрешить удаление.

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

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

Проверка обновлений

Теперь можно проверить использование компонента для обновления базы данных.

Проверка обновления

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

    На этот раз элемент управления GridView в каждой строке отображает ссылки Изменить и Удалить.

  2. Выберите ссылку Изменить, следующую за строкой.

  3. Измените строку и нажмите Обновить.

    Таблица отобразится повторно с обновленными данными.

  4. В строке выберите ссылку Удалить.

    Строка безвозвратно удаляется из базы данных. Таблица отобразится повторно без данной строки.

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

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

Показ: