2.3 Создание клиентской части
Разрабатываемый программный комплекс выполнен в виде Web-сайта. Поэтому для доступа к системе, клиенту достаточно обычного браузера. В данном разделе будет описан процесс создания и дизайна страниц.
На стороне клиента формируются только управляющие команды, в то время как обработка данных ведется целиком на стороне сервера.
Программный комплекс содержит две шаблонную страницу так называемую Главную страницу или MasterPage.
Главные страницы ASP.NET позволяют создавать последовательную структуру страниц в приложении.
Главная страница определяет вид, наполнение и стандартное поведение для всех страниц (или группы страниц) приложения. Затем можно создавать отдельные страницы содержимого, включающие содержимое, которое необходимо отобразить.
Когда пользователи запрашивают страницу содержимого, выходная страница представляет собой сочетание структуры главной страницы и содержимого со страницы содержимого.
Главные страницы предоставляют функции, которые ранее были доступны разработчикам путем повторного копирования существующего кода, текста и элементов управления, использования наборов фреймов, включаемых файлов для общих элементов, пользовательских элементов управления ASP.NET и т. д.
Что-бы создать главную страницу для этого следует в меню выбрать пункт Проект далее нажать на пункт в меню Добавить новый элемент, в открывшемся диалоговом окне выбрать Master Page (рисунок 3).
Рисунок 3 – Форма добавления новых элементов.
Добавление страниц к созданной главной странице происходит практически, так же как и создание главной страницы, только в диалоговом окне Add new item выбирается пункт Web Form using Master Page (рисунок 3). После нажатия кнопки Ok появляется диалоговое окно выбора главной страницы (рисунок 4), после выбора создается новая страница, привязанная к главной странице, с уже подписанными CSS стилями.
Рисунок 4 – Выбор существующей главной страницы.
Поля с данными на такие страницы добавляются обычным перетягиванием элементов из ToolBox.
Листинг 3 – Исходный код "Master Page":
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
КАТАЛОГ ПРЕДПРИЯТИЙ И ТОВАРОВ
</h1>
</div>
<div class="loginDisplay">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/About.aspx">Помощь</asp:HyperLink>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Предприятия"/>
<asp:MenuItem NavigateUrl="~/Default2.aspx" Text="Товары"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Рисунок 5 – Форма Maser Page