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

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

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

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

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

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

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

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

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

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

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

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

У папку із створеним веб-вузлом скопіювати (або створитиу ній) базу даних Access. База повинна містити таблицю з даними. Структура таблиці:

Таблицю заповнити даними за зразком

У першому рядку таблиці ввести прізвище та ім’я виконавця.Запам’ятати створену таблицю та базу даних, після чого закрити вікно Access. Під’єднати створену базу даних до веб-вузла. Для цього перейти Visual Web Developer, у вікні Обозреватель решений клацнути правою клавішею мишки на імені веб-вузла . З контекстного меню вибрати пункт Существующий элемент. У вікні, що відкриється, вибрати файл створеної бази даних та натиснути клавішу Добавить.

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

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

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

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

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

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

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

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

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

У вікні Настроить источник данных клацнути клавішу Обзор. Вибрати раніше створену базу даних (наприклад, bd4.mdb).

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

Мастер отображает страницу Настроить источник данных, на которой можно указать данные, которые следует получить из базы данных. В групі Как извлекать данные из базы данных познчити Укажите столбцы из таблицы или представления. В списку Имя виберіть Співробітник.

8. В групі Столбцы позначити всі поля.

У розділі Оператор Select Майстер покаже автоматично створену інструкцію на мові SQL. Клацнути клавішу Далее.

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

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

Примечание.

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

Натистути смарт-тег, із випадаючого меню вибрати Правка столбцов. В розділі Выбранные поля позначити поле Фотографія та клацнути по клавіші Вилучити . Клацнути Готово.

Натистути смарт-тег, із випадаючого меню вибрати Добавить новый столбец. У вікні Добавить поле встановити:

Клацнути ОК.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. В окне Свойства измените значение свойства PageSize с 10 на меньшее число (наприклад, 5).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Появится мастер Настройка источника данных – Перше вікно майстра – Выберите базу данных. Нажмите кнопку Далее.

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

3. Нажмите WHERE.

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

4. В списке Столбец выберите Країна.

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

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

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

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

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

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

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

10. В мастере Настройка источника данных нажмите кнопку Далее.

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

Мастер отобразит страницу редактора значений параметров, на которой в стовпці країна необходимо ввести значение, наприклад Росія (Україна буде відображатися автоматично).

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

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

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

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

2. В текстовом поле введите Росія и нажмите кнопку Відправити.

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

3. Попробуйте ввести другие країни, например, Білорусь чи Польща.