Применение технологии ASP.NET в разрабатываемом Интернет-магазине

8.1.3. Редактирование Веб-документов

Веб-формы и HTML-документы можно редактировать в графическом режиме с использованием drag-and-drop, как обычные Windows-формы, либо в текстовом виде. Для переключения между режимами достаточно щелкнуть ярлычки Design, Source или Split, расположенные внизу окна документа.

Естественно, не все задачи можно решить в графическом режиме. Поэтому приходится редактировать Веб-документы в режиме исходного кода. Если хорошо знать HTML, то этот способ может оказаться даже удобнее использования графических инструментов. Поддерживаемая Visual Studio технология IntelliSense помогает завершать элементы HTML, создаваемые в режиме исходного кода.

8.1.4. Редактирование кода

При создании новой Веб-формы автоматически генерируется связанный с ней файл, содержащий объект кода этой страницы. Имя файла с кодом составляется из имени Веб-формы и расширения .vb или .cs (в зависимости от используемого языка программирования: cs соответствует языку C#, vb – Visual Basic).

В каждом файле кода Visual Studio генерирует определение класса, инициализирующие процедуры и обработчик события Page_Load.

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

Редактор кода также поддерживает функцию autocomplete, автоматически завершающую ключевые слова и члены классов, реализуемую при помощи технологии IntelliSense (рис. 8.7.). Окно подсказки появляется всякий раз, когда происходит ввод ключевого слова, представляющего собой команду, директиву, тип данных, либо зарезервированное слово. При этом пользователю достаточно выбрать из списка нужный вариант окончания данной команды и нажать клавишу Enter. В случае если окно подсказки закрылось, а команда так и не была выбрана, разработчик может вызвать его с помощью нажатия комбинации клавиш "ctrl+пробел".

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

8.1.5. Окно Solution Explorer

Visual Studio упорядочивает приложения при помощи проектов и решений.

Проект (project) – это набор файлов, из которых в итоге компонуется исполняемый файл. Решение (solution) – это группа проектов, образующих функциональную единицу. Файлы, составляющие решение, можно просматривать в окне Solution Explorer, показанном на рис. 8.8.

Стартовый проект (start-up project) запускается первым по щелчку кнопки Start в Visual Studio. Если решение состоит из нескольких проектов, то стартовый проект обычно вызывает другие проекты этого решения.

Рассмотрим структуру отдельных частей созданного проекта, отображенную в окне Solution Explorer.

После создания нового проекта, Visual Studio 2008 создает следующие файлы: Default.aspx и Default.aspx.cs. Кроме того, автоматически создается каталог App_Data, предназначенный для хранения файлов базы данных, используемой ASP.NET. Это может быть БД Access, SQL Server, XML или файл любого другого формата доступного в ASP.NET приложении. Помимо каталога App_Data в проекте Веб-приложения могут создаваться и другие каталоги. Часть из них играют предопределенное значение и занимают особое место в системе, их имена предопределены и за ними закреплены определенные функции. Такие каталоги часто называют виртуальными каталогами приложения. Другую часть составляют каталоги, создаваемые самими пользователями. За такими каталогами не закреплены определенные функции, а их назначение в системе определяет сам пользователь. Файл Default.aspx представляет собой файл, содержащий описание Веб-страницы в формате HTML.

Таким образом, согласно такой модели организации проекта, ASP.NET придерживается принцип разделения исходного кода и интерфейса системы. Интерфейс системы описывается в файлах с расширением .aspx, а исходный код размещается в файлах с расширением .cs в случае, если в качестве языка программирования используется C# и .vb – если Visual Basic.

Еще одним важным файлом проекта ASP.NET приложения является файл Web.Config. При начальном создании проекта, Visual Studio не создает этот файл. Однако, при первом запуске приложения (с помощью нажатия клавиши F5), пользователю предлагается создать этот файл и установить в нем опцию, разрешающую отладку данного приложения.

Файл Web.Config является конфигурационным файлом, созданном на базе формата XML. Фрагмент такого файла, изображен на рис. 8.9. Он содержит большое количество параметров настройки на уровне приложения, которые конфигурируют все аспекты, начиная с безопасности, и заканчивая отладкой, подключением к источникам данных и управлением состояния.

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

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

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

8.2.1. Добавление 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>

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

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

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

Для навигации по сайтам часто используется компонент 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 – за страницу, на которую будет перенаправлен пользователь, кликнувший по этому пункту меню.

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

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

Код главной страницы начинается с заголовка, в котором указано, что эта страница использует 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 Cyclesnbsp;mdash;
вымышленная компания, наnbsp;основе которой созданы образцы баз 
данных AdventureWorks,nbsp;mdash; является большой 
транснациональной производственной организацией. Компания изготавливает 
иnbsp;продает велосипеды изnbsp;металла иnbsp;композитных 
материалов вnbsp;Северной Америке, аnbsp;также 
наnbsp;европейском иnbsp;азиатском рынках. Хотя основное 
производство расположено вnbsp;городе Ботель, штат Вашингтон, 
иnbsp;имеет 290nbsp;служащих, существуют несколько региональных 
групп продаж, расположенных наnbsp;территории рынков 
сбыта.</p>
				<p>Вnbsp;2000nbsp;г. Adventure Works 
Cycles купила небольшой производственный завод Importadores Neptuno 
вnbsp;Мексике. Предприятие Importadores Neptuno производит несколько 
важных наименований комплектующих для компании Adventure Works Cycles. 
Эти вспомогательные компоненты поставляются вnbsp;Ботель для 
окончательной сборки продукции. Вnbsp;2001nbsp;г. 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 innbsp;style and comfort. 
Designed for maximum comfort and safety. Wide gear range takes 
onnbsp;all hills. High-tech aluminum alloy construction provides
 durability without added weight.</p>

</asp:Content>

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

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

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

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

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

На рис. 8.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" указано, что набор колонок этой таблицы будет определен вручную, и самому компоненту не надо пытаться его определить на основании переданных данных.

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

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

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

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

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 определяют внешний вид пейджера (компонента, позволяющего выводить данные постранично и выбирать текущую страницу), выбранной строки и заголовка таблицы.

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

8.2.4.1. Переопределение Page_load

Прежде всего, определим структуру данных, которая будет использоваться для отображения. Назовем новый класс CycleHelper, и пусть он содержит два публичных свойства: StockCount и Name:

public class CycleHelper
    {
        public int StockCount
        {
            get; set;
        }

        public string Name
        {
            get; set;
        }
    }

Определим на самой странице типизированный список CycleHelper, который будем отображать, а в методе Page_Load заполним этот список значениями (позднее мы будем брать данные и базы данных) и привяжем методом DataBind() наш список к таблице:

List<CycleHelper> chs = new List<CycleHelper>();

    protected void Page_Load(object sender, EventArgs e)
    {      
        chs.Add(new CycleHelper() {Name = "Mountain Tire Tube",StockCount = 191});
        chs.Add(new CycleHelper() {Name = "Patch Kit/8 Patches",StockCount = 184});
        chs.Add(new CycleHelper() {Name = "Water Bottlenbsp;mdash; 30nbsp;oz.",StockCount = 175});
        chs.Add(new CycleHelper() {Name = "Road Tire Tube",StockCount = 161});
        chs.Add(new CycleHelper() {Name = "Fender Setnbsp;mdash; Mountain",StockCount = 110});
        GridViewProducts.DataSource = chs;
        GridViewProducts.DataBind();
    }

Также добавим обработчик события OnSelectedIndexChanged компонента GridView:

protected void OnSelectedIndexChanged(object sender, EventArgs e)
    {
        var cycle = chs[GridViewProducts.SelectedIndex];
        ProductDetails.LoadContent(cycle.Name, cycle.StockCount);
    }

Чтобы этот код заработал, нам необходимо разработать собственный компонент ProductDetails.

8.2.5. Разработка пользовательских компонент

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

Добавим в папку products файл ProductDetails.ascx через пункт контекстного меню Add New Item (рис. 8.15).

Как и в случае со страницей будет создано два файла, один из которых содержит разметку компонента, а второй – серверный код.

Код с разметкой начинается с заголовка, указывающего, что в этом файле описывается серверный компонент на языке C#, бэк-код которого содержится в файле ProductControl.ascx.cs, а сам компонент будет иметь название products_ProductControl:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductControl.ascx.cs" Inherits="products_ProductControl" %>

Остальная часть файла представляет собой обычную таблицу на HTML, которая содержит несколько компонент Label и один компонент Image. Все серверные пользовательские компоненты наследуют от класса System.Web.UI.UserControl, хотя также есть возможность унаследовать свой компонент и от некоторых других классов.

В самом компоненте определим метод Page_Load, в котором для компонента Image укажем путь к картинке (таким образом, если бы у нас была бы картинка для каждого товара, мы могли бы указать путь к этой картинке), а также установим свойство Visible значение false. Это приведет к тому, что компонент не будет отрисовываться на странице.

Также определим метод LoadContent, который будет означивать надписи компонента переданными значениями и устанавливать свойство Visble в True ;

protected void Page_Load(object sender, EventArgs e)
{
    Visible = false;
    Image1.ImageUrl = "~/images/Black_racer02_F_large.gif";
}

public void LoadContent(string name, int count)
{
    Visible = true;
    LabelName.Text = name;
    LabelCount.Text = count.ToString();
}

На рис. 8.16 показано, как разработанный компонент выглядит в дизайнере Visual Studio 2008.

8.2.5.1. Использование пользовательских компонент на странице

Теперь, когда компонент разработан, добавим его на страницу products/default.aspx, в правый PlaceHolder. Для этого, добавим в начало файла следующую строчку, которая зарегистрирует компонент на странице и позволит его использовать под именем AWCDShop:ProductControl:

<%@ Register TagPrefix="AWCDShop" TagName="ProductControl" Src="~/products/ProductControl.ascx" %>

Добавим этот компонент в правый PlaceHolder:

<asp:Content ID="Content2" ContentPlaceHolderID="column_r_placeholder" Runat="Server">
<AWCDShop:ProductControl ID="ProductDetails"  runat ="server" />
</asp:Content>

Далее вернемся к коду обработчика события OnSelectedIndexChanged:

var cycle = chs[GridViewProducts.SelectedIndex];
ProductDetails.LoadContent(cycle.Name, cycle.StockCount);

По умолчанию компонент не отображается на странице, однако когда пользователь выберет какую-либо строку в таблице, произойдет postback страницы, она восстановится на сервере и будет выполнен код обработчика OnSelectedIndexChanged. По свойству GridView.SelectedIndex будет определен порядковый номер продукта, и он будет извлечен из коллекции продуктов, после чего будет выполнен метод ProductDetails.LoadContent, который отобразит пользовательский компонент на странице и означит Label 'ы этого компонента названием и количеством продукта на складе соответственно. На рис. 8.17 показано, как будет выглядеть страница продуктов при выборе в таблице первой строки.

8.3. Ключевые термины

.NET Framework, ASP.NET, Microsoft Visual Studio, Веб-формы, Проект, Решение, MasterPage, Пользовательские компоненты.

8.4. Краткие итоги

Данное практическое занятие рассматривает следующие темы: