Переработка сайта AdventureWorks с использованием технологии ASP.NET

После того, как в Visual Studio был создан новый сайт, перейдем к переносу и адаптации кода. Прежде всего, добавим в проект все папки и ресурсы, которые были созданы на первом занятии. Далее, добавим в проект файл MasterPage.master (это можно сделать, кликнув правой клавишей мыши по названию сайт в Solution Explorer и выбрав в контекстом меню пункт Add New Item) (Рис. 0.10).

Рис. 0.10. Добавление MasterPage в проект

Добавление MasterPage

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

<div id="page_content">

 

<div id="column_l">

<div id="column_l_content">

<asp:ContentPlaceHolder id="column_l_placeholder" runat="server">

<h2>Headline 2</h2>

<p>insert content here</p>

</asp:ContentPlaceHolder>

</div>

</div>

<div id="column_r">

<div id="column_r_content">

<asp:ContentPlaceHolder id="column_r_placeholder" runat="server">

<h3>Headline 3</h3>

<p>insert content here</p>

</asp:ContentPlaceHolder>

</div>

</div>

</div>

Примечание: в следующих семинарах нам придется изменять код MasterPage, для добавления новых пунктов меню, а также для добавления еще одного PlaceHolder’а

Примечание: для того, чтобы создавать страницы, основанные на том или ином MasterPage’е, необходимо при выборе пункт «Add New Item» выбирать шаблон «Web Form» и выделять условие «Select master page», так как это показано на Рис. 0.11.

Рис. 0.11. Добавление новых asp-страниц на сайт

Если при разработке мастера страниц выбрать выкладку Design или Split, то отобразится страница, изображенная на Рис. 0.12.

Рис. 0.12. Визуализация мастера страниц в Visual Studio 2008

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

Использование меню

Для навигации по сайтам часто используется компонент ASP – Menu. Это серверный компонент управления, который позволяет создавать вертикально или горизонтально ориентированные пункты меню. Пункты меню можно задать статически на странице aspx, либо добавлять их серверным кодом, например при выполнении метода Page_Load, либо указать объекту типа Menu источник данных определенной структуры. Компонент Menu позволяет создавать многоуровневые иерархические меню, принимая на себя обязанности, по подготовке кода, отвечающего за «всплытие» разделов меню. Ниже представлен код, используемый в мастере страниц:

<div id="navigation">

<asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal" >

<StaticHoverStyle CssClass="MenuItemStyle_hover"/>

<StaticMenuItemStyle CssClass="MenuItemStyle"/>

<DynamicHoverStyle CssClass="MenuItemStyle_hover"/>

<DynamicMenuItemStyle CssClass="MenuItemStyle"/>

<Items>

<asp:MenuItem NavigateUrl="~/default.aspx" Text="Главная" Value="Главная"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/products/default.aspx" Text="Продукты" Value="Продукты"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/about/default.aspx" Text="О&nbsp;компании" Value="О компании"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/contact/default.aspx" Text="Контактная информация" Value="Контактная информация"></asp:MenuItem>

</Items>

</asp:Menu>

</div>

В теге asp:Menu задается направление отрисовки пунктов меню, в данном случае – горизонтальное. Далее указываются стили, которые надо применять к статическим и динамическим (т. е. созданным серверным кодом) пунктам меню (StaticMenuItemStyle и DynamicMenuItemStyle), а также стили этих меню, когда на них наводят мышкой (StaticHoverStyle и DynamicHoverStyle). Далее идет описание самих пунктов меню, основными свойствами которых являются NavigateUrl и Text. Text отвечает за отображаемое название пункта меню, а NavigateUrl – за страницу, на которую будет перенаправлен пользователь, кликнувший по этому пункту меню.

Примечание: все ссылки в меню начинаются со знака «~», что обозначается корень сайта. При рендеренге страницы, адреса в NavigateUrl будут заменены на абсолютные адреса страниц.

После того, как мастер страниц разработан, можно переходить к разработке отдельных страниц.

Главная страница

Код главной страницы начинается с заголовка, в котором указано, что эта страница использует MasterPage файл Master.master

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Остальная часть файла состоит из двух частей: содержимого ContentPlaceHolder’а с ID равным column_l_placeholder и содержимого ContentPlaceHolder’а с ID равным column_r_placeholder. Содержимое asp:Content полностью совпадает с тем, что было разработано в первом семинаре. При этом в отличие от технологии dynamic web templates при использовании MasterPage не нужно дублировать один и тот же код в каждую страницу, и значит не нужно его каждый раз обновлять.

<asp:Content ID="Content1" ContentPlaceHolderID="column_l_placeholder" Runat="Server">

<h1>Добро пожаловать в&nbsp;магазин велосипедов Adventure Works</h1>

<p>Adventure Works Cycles&nbsp;&mdash; вымышленная компания, на&nbsp;основе которой созданы образцы баз данных AdventureWorks,&nbsp;&mdash; является большой транснациональной производственной организацией. Компания изготавливает и&nbsp;продает велосипеды из&nbsp;металла и&nbsp;композитных материалов в&nbsp;Северной Америке, а&nbsp;также на&nbsp;европейском и&nbsp;азиатском рынках. Хотя основное производство расположено в&nbsp;городе Ботель, штат Вашингтон, и&nbsp;имеет 290&nbsp;служащих, существуют несколько региональных групп продаж, расположенных на&nbsp;территории рынков сбыта.</p>

<p>В&nbsp;2000&nbsp;г. Adventure Works Cycles купила небольшой производственный завод Importadores Neptuno в&nbsp;Мексике. Предприятие Importadores Neptuno производит несколько важных наименований комплектующих для компании Adventure Works Cycles. Эти вспомогательные компоненты поставляются в&nbsp;Ботель для окончательной сборки продукции. В&nbsp;2001&nbsp;г. Importadores Neptuno стало единственным изготовителем и&nbsp;распространителем продуктов группы туристических велосипедов.</p>

<p>Открывая успешный финансовый год, компания Adventure Works Cycles предполагает расширить свою долю на&nbsp;рынке, ориентируя продажи на&nbsp;лучших клиентов, расширяя доступность продукта с&nbsp;помощью веб-узла и&nbsp;уменьшая себестоимость продаж за&nbsp;счет снижения издержек производства.</p>

</asp:Content>

 

<asp:Content ID="Content2" ContentPlaceHolderID="column_r_placeholder" Runat="Server">

<h3>Новинки!</h3>

<img alt="" height="149" src="images/Black_racer02_F_large.gif" width="240" />

<p>Travel in&nbsp;style and comfort. Designed for maximum comfort and safety. Wide gear range takes on&nbsp;all hills. High-tech aluminum alloy construction provides durability without added weight.</p>

 

</asp:Content>

Если запустить главную страницу, то она будет выглядеть почти также как и в первом семинаре (Рис. 0.13).

Рис. 0.13. Главная страница интернет магазина

Аналогичным образом разрабатываются и все остальные страницы.

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

Страница продуктов

На первом занятии, для того, чтобы отобразить список продуктов, мы использовали обычные HTML-таблицы. В общем случае, такой подход не удобен, так как данные, которые необходимо отобразить, постоянно меняются, что приводит к тому, что придется создавать разметку таблицы вручную в серверном коде (впрочем, такой подход в некоторых отдельных сложных случаях может оказаться удобен). Для того чтобы отображать и манипулировать данными, ASP предлагает несколько визуальных компонент, один из которых называется GridView. Он позволяет не только представить в удобной форме массив данных, но и предоставляет удобные механизмы для сортировки данных, выбора отдельных строк, добавления и редактирования данных.

Рис. 0.14. Страница продуктов интернет-магазина, использующая GridView

На Рис. 0.14 видно, что страница продуктов похожа на ту, что было создана в первом семинаре, но сама таблица содержит дополнительный столбец с кнопками «Выбор». Рассмотрим код, который создает данную страницу:

<asp:Content ID="Content1" ContentPlaceHolderID="column_l_placeholder" Runat="Server">

<asp:GridView ID="GridViewProducts" runat="server" CellPadding="4"

GridLines="None" CssClass="GridViewProduct"

AutoGenerateColumns="False"

OnSelectedIndexChanged="OnSelectedIndexChanged" >

<RowStyle CssClass="tr_nechet" />

<AlternatingRowStyle CssClass="tr_chet" />

<Columns>

<asp:CommandField SelectText="Выбор" ShowSelectButton="True" />

<asp:TemplateField HeaderText="Количество на&nbsp;складе" SortExpression="StockCount" >

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("StockCount") %>' ></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Название" SortExpression="Name" >

<ItemTemplate>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>' ></asp:Label>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<HeaderStyle CssClass="tr_main" />

</asp:GridView>

</asp:Content>

Левый ContentPlaceHolder содержит внутри себя только один компонент – GridView. Рассмотрим подробнее его определение. В корневом теге определен идентификатор документа, что позволяет работать с этим компонентом через серверный код. Там же определен CSS-класс, который будет применяться к таблице, атрибутом GridLines="None" указано, что при отрисовке таблице не надо рисовать линии между ячейками, атрибутом AutoGenerateColumns="False" указано, что набор колонок этой таблицы будет определен вручную, и самому компоненту не надо пытаться его определить на основании переданных данных.

Примечание: В общем случае, если атрибуту AutoGenerateColumns присвоено значение True, то для объекта DataTable компонент создаст столбец для каждого DataColumn, определенного в коллекции Columns переданного объекта. Если же в качестве источника данных будет указан массив или список каких-либо объектов, то GridView создаст набор столбцов, соответствующих каждому публичному (public) свойству этих объектов.

Также в корневом теге указан серверный обработчик события OnSelectedIndexChanged, которое срабатывает, когда пользователь нажимает на кнопку «Выбор» в первом столбце. В теге RowStyle определен CSS-класс, который будет применяться к каждой нечетной строке, а в теге AlternatingRowStyle – стиль, который будет применяться к каждой четной строке.

Далее определяется набор столбцов, которые будут отображаться в таблице. Компонент поддерживает несколько видов колонок, среди которых CommandField, TemplateField и BoundField (последний используется при автоматической генерации колонок, или если источник данных для таблицы заранее определен). В нашем случае, для отображения столбца, позволяющего выбирать строки, воспользуемся колонкой типа CommandField, в которой укажем, что необходимо отобразить кнопку выбора (ShowSelectButton="True") и текст этой кнопки (SelectText="Выбор"). Этот тип столбцов используется также для определения столбцов, содержащих кнопки удаления и редактирования записей.

Далее идет определение двух колонок, которые будут отображать данные. Рассмотрим столбец, который будет отображать название продукта. Для его создание используется компонент с типом TemplateField. В корневом теге компонента указывается заголовок столбца, а также выражение, которое используется для сортировки (в этом примере – не используется). Далее определяется шаблон, который будет использоваться для отображения данных в табличке. В нашем примере используется компонент Label, который представляет собой обычную надпись, текст которой определяется атрибут Text.

Так как название каждого продукта отличается, указать в качестве текста обычную строку не получится. Для того чтобы отобразить название, воспользуемся серверным методом Eval. Метод заключен в специальную разметку <%# %>, которая в общем случае содержит любой исполняемый на сервере код. Когда к GridView привязывается определенный источник данных, то на этапе PreRender страницы у компонента вызывается метод отрисовки каждой строки (для каждой записи, которую необходимо отобразить срабатывает событие DataBinding). Далее для каждой ячейки в строке также сработает событие DataBinding и вызывается код, написанный в <%# %>, причем в контексте текущей записи, которую необходимо отобразить. Код Eval("Name") возвратит свойство Name текущего объекта (или, если такого свойства нет, то попытается обратиться через итератор: DataItem[“Name”]), и именно это значение и будет отображено.

Примечание: на самом деле все эти действия можно, при необходимости, выполнить серверным кодом. Для этого необходимо будет в коллекцию Columns компонента GridView добавить объекты типа TemplateField, у которых свойство ItemTemplate означить объект собственного класса, наследующего от ITemplate. В этом классе необходимо будет определить метод InstantiateIn, как того требует сигнатура ITemplate, в котором создать объект типа Label и положить его в коллекцию контролов контейнера следующим кодом: container.Controls.Add(label);. Далее, в этом же коде необходимо привязать обработчик события label.DataBinding и в этом обработчике определить необходимый код, например:

private void label_DataBinding(object sender, EventArgs e)

{

var container = (GridDataItem) sender.NamingContainer;

((Label)sender).Value = ((CycleHelper) container.DataItem).Name;

}

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

Подробнее об использовании методов Eval и Bind для привязки данных к различным компонентам можно почитать на сайте MSDN: http://msdn.microsoft.com/en-us/library/ms178366.aspx

Три заключительных тега – PagerStyle, SelectedRowStyle и HeaderStyle определяют внешний вид пейджера (компонента, позволяющего выводить данные постранично и выбирать текущую страницу), выбранной строки и заголовка таблицы.

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