Выполнение лабораторной работы

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

Создадим проект с типом "Веб-приложение ASP.NET" с именем WebReportOkved.

Рисунок 4.1 – Создание Веб-приложения

В результате буде создано приложение и откроется домашняя страница этого приложения с именем Default.

Рисунок 4.2 – Домашняя страница приложения

Как видим, эта страница создана на основе главной страницы (главной для нее является Site.master). Кроме этой страницы автоматически создана About.aspx, которая предназначена для общих сведений о программе.

Если мы раскроем папку Account, то увидим, что здесь имеется еще четыре страницы, предназначенные для работы с паролями.

Рисунок 4.3 – Страница для регистрации пользователей

С помощью страницы Register.aspx выполняется регистрация пользователей. Страница Login.aspx предназначена для входа в приложение, ChangePassword.aspx – для изменения пароля, ChangePasswordSuccess.aspx – для сообщения об успешной смены пароля.

Добавим к проекту новый элемент с типом "Веб-форма, использующая главную страницу" с именем ReportForm.

Рисунок 4.4 – Создание формы, использующей главную страницу

В качестве главной страницы выберем форму Site.master.

Рисунок 4.5 – Выбор главной страницы

В результате будет создана форма, зависимая от главной страницы.

Рисунок 4.6 – Вновь созданная форма

Как видим, созданный объект не является формой в строгом смысле слова, здесь нет тегов формы HTTP. Здесь имеется два объекта типа asp:Content, в которые мы можем поместить заголовок формы и ее содержимое.

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

Рисунок 4.7 – Ввод названия формы

Теперь перейдем в режим конструктора и занесем на поверхность элемента MainContent таблицу HTML, состоящую из трех строк и двух столбцов. Поверхность элемента MainContent сначала высвечивалась в виде узкой горизонтальной полоски, после занесения таблицы HTML эта полоска существенно расширилась. Остальная часть формы (вне элемента MainContent) является недоступной. Если мы хотим изменить эту внешнюю часть, мы должны открыть Site.master (главная страница) и внести необходимые изменения. В данный момент мы это делать не будем.

В левую нижнюю ячейку поместим панель Panel1 с размерами 300 на 550, а в правую нижнюю – панель Panel2 с размерами 300 на 350. На эти панели добавим таблицы GridView1 и GridView2.

В левую верхнюю ячейку добавим CheckBox1, TextBox1 и кнопку Button1 с текстом "Обновить данные". В правую верхнюю ячейку добавим метку Label1 с пустым свойством Text, раскроем свойство Font и установим свойство Bold в True. Заменим также цвет таким образом, чтобы метка была более заметной (свойство ForeColor).

В левую ячейку средней строки поместим CheckBox2.

Форма примет следующий вид.

Рисунок 4.8 – Форма после добавления элементов

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

Рисунок 4.9 – Построение SQL запроса

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

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

Рисунок 4.10 – SQL запрос после преобразования

Отметим, что данный запрос формирует сведения по всем видам экономической деятельности, независимо от наличия данных по данному виду в таблице Ul_Okved. Для того чтобы можно было выдавать сведения только по видам, по которым есть данные в Okved, будем использовать свойство FilterExpression. Будем его в обработчиках событий либо очищать, либо устанавливать значение " UlCount <> 0".

Параметры запроса определим следующим образом.

Рисунок 4.11 – Определение параметров запроса

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

Рисунок 4.12 – SQL запрос для второй таблицы

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

Рисунок 4.13 – Параметры SQL запроса для второй таблицы

После этого форма будет выглядеть следующим образом.

Рисунок 4.14 – Форма после определения источников данных

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

Как видим здесь контролируется дата. После контроля значение даты заноситься в скрытое поле с идентификатором DateField и принудительно инициируется связь с данными для GridView1.

Ввиду того, что источники данных SqlDataSource1 и SqlDataSource2 требуют для своей работы дату независимо от состояния CheckBox1, будем присваивать значение даты в методе Page_Load. Значение этой даты не играет никакой роли при выключенном элементе CheckBox1, главное, чтобы было не пустое значение.

Операторы, обеспечивающие изменение свойства FilterExpression у элемента SqlDataSource1, также, занесем в метод Page_Load, который примет следующий вид.

Откроем окно свойств GridView1 и свойство AutoGenerateSelectButton установим в True. Далее зайдем в редактор столбцов, и заменим их наименования на русские.

В элементе GridView2 также заменим названия столбцов на русские текстовые значения. Отредактируем форматы дат таким образом, чтобы они выдавались в формате 00.00.0000.

После этого наша форма примет следующий вид.

Рисунок 4.15 – Форма после правки столбцов в таблицах

Откроем теперь главную страницу Site.master. Она имеет следующий вид.

Рисунок 4.16 – Вид главной страницы приложения

Изменим название приложения и к меню добавим еще один элемент, который назовем "Отчет-таблица". У этого элемента изменим свойство Text и зададим свойство NavigateUrl (выберем в качестве значения этого свойства разработанную форму ReportForm.aspx). Вид главной формы изменится следующим образом.

Рисунок 4.17 – Главная страница после корректировки

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

Рисунок 4.18 – Созданная страница в процессе отладки

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

Рисунок 4.19 – Форма для отображения диаграммы

Зайдем в режим конструктора, добавим на форму элемент Chart и увеличим размеры этого элемента таким образом, чтобы он занимал почти всю доступную часть страницы.

Рисунок 4.20 – Форма после добавления диаграммы

Добавим на форму CheckBox с текстом "Учитывать дату", TextBox, кнопку Button с текстом "Обновить данные" и метку, у которой изменим цвет и Font, таким же образом, как это было сделано для формы ReportForm.

Рисунок 4.21 – Форма после добавления всех элементов

Добавим на форму скрытое поле HiddenField и назовем его DateField. Зайдем в окно свойств элемента Chart1 и создадим для него новый источник данных (свойство DataSourceId).

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

Рисунок 4.22 – Запрос для получения данных, отображаемых в диаграмме

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

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

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

Рисунок 4.23 – Параметры запроса для диаграммы

Щелкнем по смарт тегу элемента Chart1 и выберем значения для оси X и Y.

Рисунок 4.24 – Определение полей для оси X и Y

Откроем свойство ChartAreas элемента Chart1, раскроем свойство Area3DStyle и сделаем Enable3D равным True.

Рисунок 4.25 – Определение свойств, обеспечивающих режим 3D

Форма после этого изменится следующим образом.

Рисунок 4.26 – Вид диаграммы после определения режима 3D

Создадим также заголовок формы, чтобы все формы приложения имели единообразный вид.

Рисунок 4.27 – Ввод заголовка формы

Зайдем на главную страницу Site.Master и добавим элемент меню для новой формы.

Рисунок 4.28 – Определение пункта меню для новой формы

Создадим обработчик события для кнопки "Обновить данные" (Button1) и занесем в метод Page_Load код, обеспечивающий присвоение значения скрытому полю DateField.

Запустим проект на отладку и убедимся, что форма работает нормально.

Рисунок 4.29 – Вид формы с диаграммой в процессе отладки

Теперь откроем форму About.aspx в режиме конструктора и занесем общие сведения о программе.

Рисунок 4.30 – Корректировка формы About.aspx

Такую же операция проделаем с формой Default.aspx.

Рисунок 4.31 – Корректировка формы Default.aspx

Чтобы улучшить читабельность информации, выделим параграф, который содержит текст "Отчет по базе данных в табличной форме" и изменим стиль – добавим отступ слева.

Рисунок 4.32 – Добавление отступа для параграфа

Аналогичную работу проделаем для двух следующих параграфов.

Рисунок 4.33 – Вид формы Default.aspx после корректировки

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

В контекст этой формы занесем контекст формы, созданной при выполнении лабораторной работы № 1. В этой форме мы скопируем информацию, начиная от начала основной таблицы HTML и до ее конца.

Рисунок 4.34 – Выделение разметки в форме для поиска данных (начало)

Рисунок 4.35 – Выделение разметки в форме для поиска данных (окончание)

Скопированную информацию занесем в контент MainContent.

Кроме этого добавим заголовок, чтобы все страницы имели единый вид.

Скопируем также все обработчики событий и занесем в программный код формы ViewForm.aspx.

Добавим к программному коду директивы Using, которые отсутствует в ViewForm.aspx, но есть в форме, разработанной при выполнении лабораторной работы № 1.

Сохраним всю введенную информацию.

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

Запустим приложение на отладку и убедимся, что эта форма работает.

Рисунок 4.36 –Форма для поиска в процессе отладки

Для того чтобы с приложением могли работать только зарегистрированные пользователи, откроем Web.config и создадим здесь раздел "<authorization>" (после раздела" </authentication>") и занесем сведения, запрещающие доступ для незарегистрированных пользователей.

Рисунок 4.37 – Добавление раздела авторизации

Запустим приложение на отладку и увидим, что теперь вначале мы можем зайти только на форму входа Login.aspx, которая находится в папке Account.

Рисунок 4.38 – Первоначальный вход в готовое приложение

Ввиду того, что мы не являемся зарегистрированным пользователем, надо по ссылке "Регистрация" попасть на форму Registration.aspx, которая находится также в папке Account. Здесь мы должны ввести сведения по новому пользователю.

Рисунок 4.39 – Создание учетной записи

После создания пользователя мы попадем на домашнюю страницу.

Рисунок 4.40 – Домашняя страница приложения

Нам будут доступны и другие формы приложения.

Рисунок 4.41 – Форма приложения для отображения диаграммы

При следующем входе мы можем войти с ранее созданными учетными данными.

Таким образом, мы получили законченное Web приложение.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: