В данном порядке выполнения лабораторной работы будет описано создание WEB-приложения, в функции которого входит отображение, добавление, удаление и редактирование групп, отображение, добавление, удаление и редактирование студентов в группе. В качестве источника данных, как и в предыдущей лабораторной работе, будет использоваться СУБД PostgreSQL и созданный в ппредыдущей лабораторной работе слой доступа к данным.
1. Создайте новый проект Веб-приложение ASP.NET (нажмите «Файл», «Создать», «Проект», в появившемся окне выберите «Web», «Веб-приложение ASP.NET», задайте каталог проекта и имя проекта, например lab5).
2. Добавьте в каталог с проектом библиотеки для работы с СУБД PostgreSQL, библиотеки NHibernate и библиотеки Fluent NHibernate. Данные библиотеки можно скачать по ссылкам:
Драйвер к postgreSQL
http://www.postgresql.org/
Библиотеки NHibernate
http://sourceforge.net/projects/nhibernate/
Библиотеки Fluent NHibernate
http://fluentnhibernate.org/
В данном проекте были использованы архивы:
- Npgsql2.0.10-bin-ms.net.zip
- NHibernate-2.1.2.GA-bin.zip
- fluentnhibernate-1.1.zip
Список всех необходимых библиотек приведен ниже:
Npgsql.dll
Mono.Security.dll
NHibernate.dll
Antlr3.Runtime.dll
Iesi.Collections.dll
log4net.dll
Castle.DynamicProxy2.dll
Castle.Core.dll
NHibernate.ByteCode.Castle.dll
FluentNHibernate.dll
Подключите библиотеки Npgsql.dll, NHibernate.dll, FluentNHibernate.dll и NHibernate.ByteCode.Castle к проекту (нажмите правой кнопкой на «Ссылки» в дереве объектов потом на «Добавить ссылку…», перейдите на закладку «Обзор», выберите необходимые файлы).
3. Добавьте в проекте каталоги dao, domain, img, mapping. Каталоги dao, domain, mapping будут использоваться для хранения классов слоя доступа к данным DAO, реализованного в предыдущей лабораторной работе, а каталог img будет использоваться для хранения изображений приложения.
Каталоги dao, domain, img, mapping в обозревателе решений изображены на рисунке 5.1.
4. Скопируйте классы слоя доступа к данным, созданные в предыдущей лабораторной работке в соответствующие каталоги WEB-приложения. Это можно сделать, например, с использованием файлового менеджера Total Commander.
Откройте каталог dao с предыдущей лабораторной работы и скопируйте все классы в каталог dao проекта WEB-приложения. Результаты копирования представлены на рисунке 5.2.
Рисунок 5.2 – Результаты копирования классов с каталога dao предыдущего проекта в каталог dao WEB-приложения
Классы каталогов domain и mapping таким же образом необходимо скопировать в соответствующие каталоги WEB-приложения.
После копирования классов в проекте они не появятся, поэтому их следует добавить в проект (нажмите правой кнопкой мыши на каталог dao и в контекстном меню выберете пункт «Добавить», «Существующий элемент», в открывшемся диалоге выберете все классы каталога dao WEB-приложения и нажмите «Добавить»). Те же действия произведите с классами каталогов domain и mapping. В проекте должны появиться все классы слоя доступа к данным. Результат представлен на рисунке 5.3.
Рисунок 5.3 – Результат добавления классов слоя доступа к данным
Таким образом, все классы слоя доступа к данным были перенесены в WEB-приложение, и их можно использовать для отображения, добавления, удаления, замены данных.
5. Приступим к реализации интерфейса нашего WEB-приложения. Он у нас будет состоять из двух страниц. На одной странице будет отображаться список групп, а по нажатию на группу на второй будет отображаться список студентов группы. Эти страницы будут однотипными, у каждой из них будет шапка с названием страницы, футер (нижняя часть страницы) и меню. В данном случае страниц всего две, но в реальных проектах их может быть намного больше и те части, которые являются для группы страниц однотипными лучше выносить в шаблон страницы.
6. Создадим шаблон страницы для WEB-приложения. Нажмите правой кнопкой мыши на проект, нажмите «Добавить», затем «Создать элемент», в появившемся диалоге выберете «Web», затем «Главная страница», введите имя шаблона страницы, например University и нажмите «Добавить».
7. Откройте шаблон страницы University с помощью редактора главных страниц (нажмите правой кнопкой на шаблон страницы University, выберете «Открыть с помощью», в открывшемся диалоге выберете «Редактор главных страниц (По умолчанию)»). Откроется код шаблона главной страницы, который обычно состоит из html тегов и из тегов ASP.NET. Шаблон главной страницы можно редактировать как в текстовом, так и графическом режиме, перетаскивая необходимые элементы с палитры компонентов, html-теги чаще всего используются для разметки страницы. Неотъемлемым тегом шаблона страницы является тег:
Вместо этого тега на страницах, которые наследуют шаблон страницы, подставляется необходимое содержимое.
Спроектируем шаблон страницы в графическом режиме.
8. Откройте шаблон страницы University с использованием графического редактора (нажмите два раза на шаблон страницы и из трех возможных вариантов «Конструктор», «Разделить», «Исходный код» выберите «Конструктор»). Для разметки страницы будем использовать таблицы.
9. Откройте палитру компонентов, разместите в верхней части шаблона страницы три компонент Table с раздела HTML. Один компонент будет использоваться для размещения header (верхней части страницы), второй компонент будет использоваться для размещения основной части страницы, а третий будет использоваться для размещения footer(нижней части страницы). Таблицы по умолчанию создаются с тремя рядками и тремя колонками и их необходимо настроить соответствующим образом.
10. Настроим header (верхнюю часть) шаблона. Для верхней таблицы из трех добавлены таблицы установите количество колонок равным 2, а количество строк равным 1. К сожалению, этого нельзя сделать с помощью диспетчера свойств, а только в текстовом режиме, поэтому шаблон страницы необходимо открыть в текстовом режиме и удалите лишние теги <tr> и <td>.
В результате получится код таблицы:
<table style="width:100%;">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
В левую колонку верхней таблицы вставьте компонент Image с раздела «Стандартный», а в правую колонку вставьте компонент Label с того же самого раздела. Выберите для компонента Image изображение, поместите его в каталоге img. Установите с помощью диспетчера свойств URL изображения (свойство ImageUrl). Установите свойство Text у компонента Label – это будет текст заголовка WEB-приложения. Окончательный вариант верхней таблицы в текстовом виде представлен ниже:
Text="Черниговский государственный технологический университет"
ForeColor="#EEC900">
</asp:Label>
</td>
</tr>
</table>
Как видно из текста таблицы, для первой колони, устанавливается ширина по размеру изображения, а для второй колонки устанавливается цвет заливки и выравнивание по центру.
11. Приступим к реализации центральной части страницы, представленной центральной таблицей. Центральная таблица также должна состоять из одной строчки и двух колонок. В левой колонке будет размещаться меню приложения, но оно в данном примере использоваться не будет, поскольку приложение состоит всего лишь с двух страниц, поэтому мы только расположим меню в левой колонке, заполним названия пунктов меню, а адреса страниц, на которые необходимо переходить при нажатии на пункты меню заполнять не будем. Как удалять лишние колонки и строки, показано в предыдущем пункте данного руководства. Разместите в левой колонке компонент Menu с раздела «Переходы». В правую колонку перетяните компонент ContentPlaceHolder, который на данный момент размещается под всеми таблицами. Текст центральной таблицы представлен ниже:
Как видно из текста таблицы, левая колонка для удобства разбита на две части еще одной таблицей, в верхней части располагается компонент Label со словом Menu, в нижній располагается самом меню.
12. Приступим к реализации нижней части страницы, представленной нижней таблицей. Она будет состоять с двух строк и одной колонки. В первой строке будет размещаться линия разделения футера от основной части страницы, а во второй строке будет размещаться футер страницы. Текст нижней таблицы приведен ниже:
<table style="width:100%;">
<tr>
<td>
<hr style="color: #800000" />
</td>
</tr>
<tr>
<td align="center">
<asp:Label ID="Label3" runat="server"
Text="OrIoN (c)" ForeColor="Maroon">
</asp:Label>
</td>
</tr>
</table>
Полный текст шаблона страницы приведен ниже, а внешний вид шаблона страницы приведен на рисунке 5.4.
13. Шаблон страницы удобно использовать для инициализации сессии NHibernate. Откройте C# код шаблона страница. Каждая страница в том числе и шаблоны в ASP.NET обязательно содержат С# код, открыть который можно раскрыв дерево, узлом которого является страницы. Если шаблон страницы называется University.Master, то его C# код будет называться University.Master.cs. Добавьте над методом Page_Load, который создается автоматически поля:
private ISessionFactory factory;
private ISession session;
За методом добавьте два вспомагательные метода:
//Метод открытия сессии
private ISession openSession(String host, int port, String database,
Обработчик события Page_Init вызывается при инициализации страницы, в этот момент и создается сессия NHibernate, которая помещается в объект Session – объект способный хранить необходимы данные, пока активна HTTP-сессия с приложением. Как видно из текста обработчика события Page_Init, настройки подключения к базе прописаны в коде программы, чего делать нежелательно. Все настройки приложения, в том числе и настройки подключения к базе должны храниться в специальном файле Web.config.
Наш шаблон готов и теперь мы можем использовать его для оформления наших страниц.
14. Приступим к реализации главной страницы, на которой будет располагаться список групп. Необходимо будет реализовать такие функции как добавление, удаление замена данных о группах, а также отображение списка студентов группы.
Страница Default.aspx – стартовая страница приложения – создалась в проекте автоматически, ее мы и будем использовать как страницу для отображения списка групп.
Откройте Default.aspx в режиме исходного кода. Удалите весь исходный код кроме первой строчки:
Никаких тегов <html>, <body>, <form> на странице быть не должно. Если страница использует шаблон страницы, во все эти теги уже присутствуют в шаблоне.
15. Переходим к визуальному проектированию страницы Default.aspx. Откройте станицу в режиме исходного кода. Если шаблон был подключен правильно, то страница будет состоять из компонентов расположенных в шаблоне и из компонента, в который можно помещать содержимое текущей страницы. Разметку страницы, как и в шаблоне, будем производить с использованием таблиц.
Вставьте в редактируемую часть страницы таблицу, состоящую из одной колонки и двух рядков. В первом рядке будет отображаться название таблицы, а во втором рядке поместите компонент GridView с раздела «Данные». Этот компонент имеет ряд достоинств и недостатков. Так, например, он удобен для редактирования и удаления записей, но очень неудобен для добавления данных. Компонент GridView способен реагировать на ряд событий, таких как:
RowEditing – возникает, когда строка таблицы переводится в режим редактирования;
RowUpdating – возникает при нажатии на кнопку Update редактируемой строки;
RowDeleting – возникает при нажатии на кнопку Delete;
RowCancelingEdit – возникает при отмене редактирования строки;
RowCommand – это событие возникает при нажатии кнопок, размещенных в строчке таблицы;
PageIndexChanging – возникает при изменении индекса страницы GridView, если настроено постраничное отображение;
Таблица состоит из колонок, размещенных в теге <Columns>. Для каждой колонки определен шаблон из трех частей. В первой части шаблона описывается, как будет выглядеть элемент строки в обычном состоянии. Во второй части шаблона описывается, как будет выглядеть элемент строки таблицы в режиме редактирования. В третьей части шаблона описывается, как будет выглядеть футер таблицы.
Поскольку компонент GridView при отсутствии данных в источнике данных не отображается на то его внешний вид при отсутствии данных необходимо описать с использование тега <EmptyDataTemplate>.
Для каждой кнопки таблицы необходимо выбрать изображение и поместить его в каталог img.
Далее необходимо реализовать обработчики событий по нажатия на кнопки компонента GridView.
16. Откройте C# код страницы Default.aspx. Поскольку все функции нашего приложения, которые нам необходимо запрограммировать будут использовать сессию NHibernate, то в первую получить сессию NHibernate c объекта Session.
Добавьте обработчик события Page_Prerender после пустого обработчика событий Page_Load:
DAOFactory factory = new NHibernateDAOFactory(session);
IGroupDAO groupDAO = factory.getGroupDAO();
List<Group> groups = groupDAO.GetAll();
GridView1.DataSource = groups;
GridView1.DataBind();
}
В этом обработчике из объекта Session происходит получение сессии NHibernate.
17. Далее необходимо реализовать функцию добавления группы. Поскольку компонент GridView не отображает данные при пустом источнике данных и кнопка добавления данных при непустом источнике данных и при пустом источнике данных – это две разные кнопки, то необходимо реализовывать два разных обработчика событий нажатия на кнопку добавить.
Ниже приведен код для обработчиков нажатия на кнопку «Добавить» для пустого и непустого источника данных:
19. Далее необходимо реализовать функцию редактирования записи. Строка компонента GridView может пребывать в обычном состоянии и в режиме редактирования. В обычном состоянии в командной колонке отображаются кнопки «Редактировать» и «Удалить», а в режиме редактирования отображаются кнопки «Обновить» и «Отменить». В процессе редактирования записи учувствует три кнопки «Редактировать», «Обновить» и «Отменить» и необходимо реализовать обработчики событий нажатия на эти кнопки. Ниже приведен код обработчиков:
DAOFactory factory = new NHibernateDAOFactory(hbmSession);
IGroupDAO groupDAO = factory.getGroupDAO();
//Получение группы по имени
Group group = groupDAO.getGroupByName(oldGroupName);
group.GroupName = newGroupName;
group.CuratorName = newCuratorName;
group.HeadmanName = newHeadmanName;
groupDAO.SaveOrUpdate(group);
GridView1.EditIndex = -1;
GridView1.ShowFooter = true;
GridView1.DataBind();
}
20. Последней функцией будет отображение списка студентов по нажатию на кнопку студенты в строке группы. По нажатию на эту кнопку должна загрузиться страница со списком студентов заданной группы. Обработчик нажатия на кнопку «Студенты» приведен ниже:
21. Наш компонент GridView поддерживает постраничное отображение данных, и событие переключения между страницами необходимо обработать, иначе данные не будут правильно отображаться. Ниже приведен код обработчика события переключения между страницами:
Внешний вид главной WEB-формы в запущенном виде приведен на рисунке 5.5.
Рисунок 5.5 – Внешний вид главной WEB-формы
Все функции касающиеся работы с группами успешно реализованы. Приступим к реализации функций связанных со студентами.
22. В первую очередь необходимо создать новую страницу – WEB-форму, как она называется в ASP.NET. Чтобы создать новую WEB-форму нажмите на проекте правой кнопкой мыши, выберите пункт меню «Добавить», затем «Создать элемент», в разделе «Web» появившегося диалога необходимо выбрать «Форма Web Form». Введите название новой WEB-формы, например StudentForm и нажмите на «Добавить».
23. Откройте новую WEB-форму StudentForm в режиме исходного кода. Удалите весь текст, кроме первой строки, и подключите к WEB-форме шаблон University. Исходный код WEB-формы StudentForm приведен ниже:
24. Приступим к визуальному проектированию новой WEB-формы. Откройте форму в режиме конструктора. Для разметки страницы можно использовать компонент Table. Поместите компонент Table с раздела «HTML» в редактируемой области страницы StudentForm. Оставьте у таблицы одну колонку и два рядка. В первом рядке разместите два компонента Label. Первуй компонент Label будет использоваться для отображения статического текста, а второй компонент будет использоваться для отображения названия группы. Во вторую строку таблицы поместите компонент GridView.
В отличие от таблицы групп, таблица студентов содержит не три колонки, а четыре, та также отсутствует кнопка для отображения списка студентов.
25. Далее необходимо запрограммировать функции добавления удаления, редактирования записей студентов. Откройте C# кода формы StudentForm. Как и в главной форме для начала необходимо реализовать функцию отображения студентов заданной группы в таблице. Это можно реализовать в обработчике события Page_Prerender. Текст обработчика этого события приведен ниже:
28. И последняя функция, которую необходимо реализовать, это замена студента, которая, как и в таблице группы представлена тремя обработчиками событий: