Пошаговое руководство. Основы доступа к данным на веб-страницах

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

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

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

  • Подключение к базе данных Microsoft SQL Server в средстве разработки Microsoft Visual Web Developer.

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

  • Использовать элемент управления SqlDataSource для управления доступом к данным и связыванием.

  • Отображение данных при помощи элемента управления GridView.

  • Настраивать элемент управления GridView для сортировки и разбиения по страницам.

  • Создавать фильтрованные запросы, отображающие только выбранные записи.

Обязательные компоненты

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

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

    tw738475.alert_note(ru-ru,VS.90).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.

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

  6. Нажмите ОК.

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

Добавление элемента управления GridView для отображения данных

Для отображения данных на веб-странице ASP.NET требуется следующее:

  • Подключение к источнику данных, например к базе данных.

    В следующей процедуре будет создано подключение к базе данных Northwind SQL Server.

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

  • Элемент управления на странице, фактически отображающий данные.

    В следующей процедуре данные отображаются в элементе управления GridView. Элемент управления GridView возвращает данные из элемента управления SqlDataSource.

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

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

  1. В Visual Web Developer переключитесь в режим конструктора.

  2. Из папки Данные в панели элементов перетащите на страницу элемент управления GridView.

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

  4. В меню Задачи GridView выберите в раскрывающемся списке Выбор источника данных команду Создать источник данных.

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

    Мастер настройки источника данных

  5. Выберите База данных.

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

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

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

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

    Выбрать подключение - диалоговое окно

  7. Выберите Новое подключение.

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

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

  9. В поле Имя сервера введите имя сервера SQL Server, которое следует использовать.

    Добавить подключение - диалоговое окно

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

  11. Нажмите Выберите или введите имя базы данных и затем введите Northwind.

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

    Появится мастер мастер настройки источника данных - <Имя источника данных> с заполненными сведениями о подключении.

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

    Мастер отображает страницу, на которой можно выбрать строку соединения, которая сохраняется в файле конфигурации. Сохранение строки подключения в файле конфигурации имеет два преимущества.

    1. Это более безопасно, чем сохранение в странице.

    2. Можно повторно использовать строку соединения в нескольких страницах.

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

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

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

  16. В группе Столбцы установите флажки Код клиента, Название организации и Город.

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

    Настроить панель оператора выбора

    tw738475.alert_note(ru-ru,VS.90).gifПримечание.

    Мастер позволяет задать критерии (предложение WHERE) и другие параметры запроса SQL. В этой части руководства предстоит создать простую инструкцию без параметров выборки или сортировки.

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

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

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

    Мастер завершает работу и происходит возврат на страницу. При помощи мастера выполнены две следующие задачи.

    • Мастер создал и настроил элемент управления SqlDataSource (с именем SqlDataSource1), сочетающий указанные данные подключения и запроса.

    • Мастер выполнил привязку элемента управления GridView к источнику данных SqlDataSource. Поэтому элемент управления GridView отображает данные, возвращаемые элементом управления SqlDataSource.

    Если просмотреть свойства элемента управления SqlDataSource, можно увидеть, что мастер создал значения для свойств ConnectionString и SelectQuery.

    tw738475.alert_note(ru-ru,VS.90).gifПримечание.

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

Проверка страницы

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

Проверка страницы

  1. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

    Страница отобразится в обозревателе. Элемент управления GridView отображает все строки данных из таблицы «Клиенты».

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

Добавление сортировки и разбиения по страницам

К элементу управления GridView можно добавить возможность сортировки и разбиения по страницам без написания какого-либо кода.

Добавление сортировки и разбиения по страницам

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

  2. В меню Задачи GridView установите флажок Включить сортировку.

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

  3. В меню Задачи GridView установите флажок Включить разбиение по страницам.

    К элементу управления GridView добавляется нижний колонтитул с ссылками на номера страниц.

  4. В окне Свойства измените значение свойства PageSize с 10 на меньшее число.

  5. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

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

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

Добавление фильтрации

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

Сначала для создания текстового поля, в котором пользователи могут ввести название города, используется элемент управления TextBox. Затем в запрос включается параметризованный фильтр (предложение WHERE). Для этого создается элемент параметра для элемента управления SqlDataSource. Элемент параметра определяет, как элемент управления SqlDataSource получает значение параметризованного запроса, а именно запроса.

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

Страница фильтра данных в представлении конструктора

Добавление текстового поля для указания города

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

    Элемент управления Button используется только для передачи страницы на сервер. Для этого элемента управления не требуется написание кода.

  2. В окне «Свойства» для элемента управления TextBox присвойте свойству ID значение textCity.

  3. При необходимости введите Город или аналогичный текст в текстовое поле в качестве заголовка.

  4. В окне Свойства для элемента управления Button присвойте свойству Text значение Отправить.

Теперь можно включить в запрос фильтр.

Включение в запрос параметризованного фильтра

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

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

    Появится мастер Настройка источника данных - <Имя источника данных>.

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

    Мастер отображает настроенные в настоящее время команды SQL для элемента управления SqlDataSource.

  4. Нажмите WHERE.

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

  5. В списке Столбец выберите Город.

  6. В списке Операторы выберите =.

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

  8. В свойствах параметра в списке Идентификатор элемента управления выберите textCity.

    Добавить предложение WHERE – диалоговое окно

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

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

    Созданное предложение WHERE отображается в нижней части страницы.

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

  11. В мастере Настройка источника данных - <Имя источника данных> нажмите кнопку Далее.

  12. На странице Пробный запрос щелкните Пробный запрос.

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

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

    Отображаются записи клиентов из Лондона.

  14. Нажмите кнопку Готово, чтобы завершить работу мастера.

Теперь можно проверить фильтрацию.

Проверка фильтрации

  1. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

  2. В текстовом поле введите Лондон и нажмите кнопку Отправить.

    Список клиентов из Лондона отображается в элементе управления GridView.

  3. Попробуйте ввести другие города, например, Буэнос-Айрес и Берлин.

Следующие действия

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

См. также

Основные понятия

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