Учебник Tailspin Spyworks демонстрирует простоту создания производительных и масштабируемых приложений для платформы .NET. Он показывает, как использовать замечательные новые компоненты ASP.NET 4 для создания интернет-магазина (включая реализацию функций выбора товаров, покупки и администрирования).

В этой серии учебников описаны все шаги, необходимые для создания примера приложения Tailspin Spyworks. Часть1 содержит обзор и описание этапа создания проекта.

Обзор

В этом учебнике дается введение в веб-формы ASP.NET. Мы будем двигаться постепенно, поэтому опыт веб-разработки начального уровня будет достаточен для понимания.

Создаваемое приложение — простой интернет-магазин.

Посетители могут просматривать продукты по категориям:

Просматривать один продукт и добавлять его в корзину:

Просматривать корзину, удаляя любые не требуемые более продукты:

При переходе к покупке у посетителей будет запрошено:

После заказа посетители увидят простое окно подтверждения:

Начнем с создания нового проекта веб-форм ASP.NET в Visual Studio 2010 и постепенно будем добавлять компоненты для создания законченного рабочего приложения. В процессе разработки будет рассмотрено обращение к базе данных, режимы просмотра "Список" и "Таблица", страницы обновления данных, проверка данных, использование главных страниц для согласованной разметки страниц, AJAX, проверка, членство пользователей и т. д.

Можно последовательно переходить от шага к шагу или загрузить законченное приложение со страницы http://tailspinspyworks.codeplex.com/.

Можно использовать Visual Studio 2010 или бесплатное приложение Visual Web Developer 2010 со страницы https://www.microsoft.com/express/Web/. Для размещения базы данных в процессе создания приложения можно использовать SQL Server или экспресс-выпуск SQL Server.

Файл | Создать проект

Начнем с выбора команды "Создать проект" в меню "Файл" в Visual Studio. Откроется диалоговое окно "Создание проекта".

В левой части выберите группу шаблонов Visual C# | Web, затем — шаблон "ASP.NET Web Application" в центральном столбце. Назовите проект MvcMusicStore и нажмите кнопку "ОК".

Будет создан новый проект. Взгляните на папки, включенные в созданное приложение, в обозревателе решений справа.

"Пустое решение" не является полностью пустым — в него добавлена базовая структура папок.

Обратите внимание на соглашения, применяемые в шаблоне проекта ASP.NET 4 по умолчанию.

• В папке Account (учетная запись) реализуется базовый пользовательский интерфейс для подсистемы членства ASP.NET.
• Папка Scripts (скрипты) служит в качестве хранилища для файлов JavaScript клиентской стороны и основных JS-файлов jQuery, доступных по умолчанию.
• Папка Styles (стили) используется для упорядочивания визуальных элементов веб-сайта (таблиц стилей CSS).

При нажатии клавиши F5 для запуска приложения и обработки страницы default.aspx будет отображено следующее:

Итак, приступим. Сначала заменим файл Style.css из шаблона веб-форм по умолчанию классами CSS и связанными файлами изображений, которые будут формировать визуальные элементы приложения Tailspin Spyworks.

После выполнения этого действия страница default.aspx будет выглядеть следующим образом.

Обратите внимание на ссылки на изображения в верхней правой части страницы и на элементы меню, добавленные на главную страницу. В настоящий момент на существующие страницы (созданные шаблоном по умолчанию) указывают лишь ссылки Sign In (вход) и Account (учетная запись); оставшиеся страницы будут созданы в процессе написания приложения.

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

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