Поделиться через

Пошаговое руководство: создание основных веб-страниц и страниц подробностей в Visual Studio

  • Статья

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

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

  • Заполнение раскрывающегося списка данными из базы данных.

  • Создание фильтров — инструкций SQL с предложением WHERE (параметризованные запросы).

  • Отображение отфильтрованной информации в зависимости от выбора пользователя в раскрывающемся списке.

  • Отображение сведений о выбранной записи с помощью элемента управления DetailsView.

  • Выбор записи на одной странице и отображение связанной записи на другой.

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

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

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

    stc0szde.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" в библиотеке MSDN.

Создание веб-узла

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

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

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

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

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

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

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

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

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

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

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

Подключение к SQL Server

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

Чтобы создать подключение к SQL Server

  1. Нажмите клавиши CTRL+ALT+S для отображения Обозревателя баз данных. В обозревателе баз данных щелкните элемент Подключения данных правой кнопкой мыши и выберите команду Добавить подключение.

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

  2. В диалоговом окне Смена источника данных выберите пункт Microsoft SQL Server. и нажмите кнопку ОК.

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

    • Введите или выберите имя компьютера SQL Server. Для сервера, расположенного на локальном компьютере, введите (local).

    • Выберите Использовать проверку подлинности SQL Server.

    • Введите имя пользователя и пароль.

    • Выберите элемент Сохранить пароль.

    • Выберите Northwind в качестве базы данных.

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

    Подключение будет добавлено в обозреватель сервера.

Использование раскрывающегося списка в качестве главного списка

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

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

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

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

  3. На странице введите текст Выберите продукты по категории и отформатируйте его как заголовок с помощью раскрывающегося списка Формат блока над панелью элементов.

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

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

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

  6. В диалоговом окне Задачи DropDownList выберите элемент Выбор источника данных.

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

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

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

  8. Выберите элемент База данных.

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

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

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

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

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

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

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

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

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

  13. В списке Имя элемента Параметры таблиц и представлений выберите пункт Категории.

  14. В поле Столбцы выберите CategoryID и CategoryName.

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

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

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

    Отобразится Мастер настройки источника данных, содержащий имя настроенного источника данных.

  18. Из списка Выберите поле данных для отображения в DropDownList выберите CategoryName.

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

    Если список не содержит элементов, щелкните ссылку Обновить схему.

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

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

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

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

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

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

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

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

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

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

Использование сетки для отображения подробной информации

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

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

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

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

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

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

  4. Выберите элемент База данных.

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

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

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

  6. Из раскрывающегося списка соединений выберите соединение, которое было создано и сохранено ранее в данном пошаговом руководстве (NorthwindConnectionString).

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

    Мастер отобразит страницу Настройка источника данных — SqlDataSource2, на которой можно создать инструкцию SQL.

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

  9. В поле Столбцы выберите элементы ProductID, ProductName и CategoryID.

  10. Нажмите WHERE.

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

  11. Из списка Столбец выберите элемент CategoryID.

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

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

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

    Два последних шага указывают на то, что запрос получит значение поиска для идентификатора категории из добавленного ранее элемента управления DropDownList.

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

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

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

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

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

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

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

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

Теперь можно проверить страницу отображения отношений "основной/подробности".

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

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

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

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

Отображение данных отношения "основной/подробности" на одной странице

В этой части пошагового руководства описывается отображение данных из связанных таблиц на одной странице. Данные основной таблицы отображаются в сетке, в которой пользователи могут выбирать отдельные строки. При этом одна или несколько записей подробной информации отображаются в элементе управления с полосой прокрутки, расположенном в другом месте страницы. Для наглядности таблица "Категории" базы Northwind будет использоваться в этом руководстве как основная таблица, а таблица "Продукты" — как таблица подробной информации.

Чтобы отобразить основные записи

  1. Добавьте на веб-узел новую страницу с именем MasterDetails2.aspx.

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

  3. Введите на странице текст Страница отношения "основная информация/подробности" и отформатируйте текст в качестве заголовка.

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

  5. В списке Выбор источника данных меню Задачи GridView щелкните элемент <Новый источник данных> и выполните описанные ниже шаги для настройки источника данных для элемента управления GridView:

    1. Выберите элемент База данных.

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

    3. Из раскрывающегося списка соединений выберите соединение, которое было создано и сохранено ранее в данном пошаговом руководстве (NorthwindConnectionString).

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

    5. Из списка Имя выберите элемент Категории.

    6. В поле Столбцы выберите CategoryID и CategoryName.

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

  6. Выберите элемент управления GridView и затем в меню Задачи GridView выберите команду Редактировать столбцы.

    На экране появится диалоговое окно Поля.

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

  8. В списке Выбранные поля выберите команду Выбрать, а затем в сетке свойств CommandField установите свойство SelectText в значение Сведения.

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

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

  10. Выберите элемент управления GridView, откройте окно "Свойства" и убедитесь, что свойство DataKeyNames установлено в значение CategoryID.

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

Сетка позволяет выбирать отдельную категорию. Следующим шагом является добавление элемента управления DetailsView, который будет отображать записи подробной информации — продукты, связанные с выбранной категорией. Элемент управления DetailsView будет использовать другой SQL-запрос для получения данных, поэтому для него требуется второй элемент управления источника данных.

Чтобы настроить запрос для отображения связанных записей

  1. Нажмите ВВОД, чтобы освободить место под элементом управления SqlDataSource1 на странице MasterDetails2.aspx в представлении "Сведения".

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

  3. Настройте его на использование второго источника данных, выполнив следующие шаги:

    1. В списке Выбор источника данных выберите элемент <Новый источник данных>.

    2. Выберите элемент База данных.

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

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

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

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

    7. В поле Столбцы выберите элементы ProductID, ProductName и CategoryID.

    8. Нажмите WHERE.

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

    9. Из списка Столбец выберите элемент CategoryID.

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

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

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

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

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

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

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

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

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

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

  4. В меню Задачи DetailsView выделите команду Включить разбиение по страницам.

    Это позволит прокручивать отдельные записи продуктов.

  5. При необходимости в окне "Свойства" можно открыть узел PagerSettings и выбрать другое значение параметра Режим.

    По умолчанию перелистывание страниц осуществляется путем щелчка по номеру страницы, но настройка параметров позволяет использовать ссылки "Назад" и "Далее".

Теперь можно протестировать комбинацию основной сетки и представления "Сведения".

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

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

  2. Выберите категорию в сетке.

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

  3. Используйте ссылки страничного навигатора в элементе управления DetailsView для перехода на другие продукты для той же категории.

  4. Выберите другую категорию в сетке.

  5. Просмотрите продукты для этой категории в элементе управления DetailsView.

Отображение данных отношения "основной/подробности" на отдельных страницах

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

Чтобы отобразить основные записи

  1. Добавьте к веб-узлу новую страницу и назовите ее MasterCustomers.aspx.

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

  3. Введите на странице Клиенты и отформатируйте текст в качестве заголовка.

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

  5. Из меню элемента управления Задачи GridView выберите элемент <Новый источник данных> из списка Выбор источника данных, а затем выполните следующие действия с помощью мастера:

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

    • Подключитесь к базе данных Northwind (подключение NorthwindConnectionString).

    • Извлеките столбцы CustomerID, CompanyName и City из таблицы Customers.

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

  7. В меню Задачи GridView выберите команду Правка столбцов.

    На экране появится диалоговое окно Поля.

  8. Снимите флажок Автоматически создавать поля.

  9. В разделе Доступные поля выберите Поле гиперссылки, щелкните Добавить и установите следующие свойства:

    Свойство

    Значение

    Text

    Подробные сведения

    DatahrefFields

    CustomerID

    Это указывает на то, что гиперссылка должна получать свое значение из столбца CustomerID

    DatahrefFormatString

    DetailsOrders.aspx?custid={0}

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

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

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

Чтобы создать страницу сведений

  1. Добавьте на веб-узел новую страницу и назовите ее DetailsOrders.aspx.

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

  3. Введите на странице Заказы и отформатируйте текст в качестве заголовка.

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

  5. В меню элемента управления Задачи GridView выберите элемент <Новый источник данных> из списка Выбор источника данных.

  6. В списке Выбор типа источника данных выберите элемент База данных и нажмите кнопку ОК.

  7. Из списка подключений выберите подключение, созданное и сохраненное ранее в этом пошаговом руководстве (NorthwindConnectionString).

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

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

  9. Из списка Имя выберите элемент Orders.

  10. В поле Столбцы выберите OrderID, CustomerID и OrderDate.

  11. Нажмите WHERE.

  12. Из списка Столбцы выберите элемент CustomerID.

  13. Из списка Операторы выберите элемент =.

  14. Из списка Источник выберите элемент QueryString.

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

  15. В поле Поле QueryString раздела Свойства параметра введите custid.

    Запрос будет получать значение идентификатора клиента из строки запроса, которая создается при щелчке по ссылке Сведения на странице MasterCustomers.aspx.

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

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

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

  19. Из узла Стандартныепанели элементов перетащите на страницу элемент управления Гиперссылка. Установите его свойство Text в значение Вернуться к странице "Клиенты", а свойство href — в значение MasterCustomers.aspx.

Теперь можно протестировать связанные страницы отношения "основной-подробности".

Чтобы проверить страницы

  1. Переключитесь на страницу MasterCustomers.aspx.

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

  3. Щелкните ссылку Сведения для одного из клиентов.

    Обозреватель отобразит страницу DetailsOrders.aspx с заказом для выбранного клиента. Обратите внимание, что URL в поле обозревателя "Адрес" выглядит следующим образом:

    DetailsOrder.aspx?custid=x

    где x — это идентификатор выбранного клиента.

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

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

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

См. также

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

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

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