Основы ASP.NET MVC 4

Статья
07/13/2023

Скачивание комплекта обучения для веб-лагерей

Эта Hands-On Lab основана на музыкальном хранилище MVC (контроллер представления модели) — учебном приложении, которое представляет и объясняет пошаговые инструкции по использованию ASP.NET MVC и Visual Studio. В ходе лаборатории вы узнаете о простоте и силе совместного использования этих технологий. Вы начнете с простого приложения и будете его создавать, пока не получите полнофункциональный ASP.NET веб-приложение MVC 4.

Эта лаборатория работает с ASP.NET MVC 4.

Если вы хотите ознакомиться с версией учебного приложения ASP.NET MVC 3, ее можно найти в MVC-Music-Store.

В этом Hands-On Lab предполагается, что у разработчика есть опыт работы с технологиями веб-разработки, такими как HTML и JavaScript.

Примечание

Все примеры кода и фрагменты кода входят в комплект для обучения веб-лагерей, доступный в выпусках Microsoft-Web/WebCampTrainingKit. Проект, относяныйся к этой лаборатории, доступен на ASP.NET MVC 4 Fundamentals.

Приложение "Магазин музыки"

Веб-приложение Магазина музыки, которое будет создано в рамках этой лаборатории, состоит из трех main частей: покупки, оформления заказа и администрирования. Посетители смогут просматривать альбомы по жанрам, добавлять альбомы в корзину, просматривать их выбор и, наконец, переходить к оформлению заказа, чтобы войти в систему и завершить заказ. Кроме того, администраторы магазина смогут управлять доступными альбомами, а также свойствами main.

Экраны музыкального магазина

Экраны музыкального магазина

ASP.NET MVC 4 Essentials

Приложение Магазина музыки будет создано с помощью контроллера представления модели (MVC), архитектурного шаблона, который разделяет приложение на три main компонента:

Модели. Объекты модели — это части приложения, реализующие логику предметной области. Часто объекты модели также извлекают и сохраняют состояние модели в базе данных.
Представления: Представления — это компоненты, отображающие пользовательский интерфейс приложения. Пользовательский интерфейс обычно создается на основе данных модели. Примером может быть представление редактирования альбомов, в котором отображаются текстовые поля и раскрывающийся список на основе текущего состояния объекта Album.
Контроллеры: Контроллеры — это компоненты, которые обрабатывают взаимодействие с пользователем, управляют моделью и в конечном итоге выбирают представление для отрисовки пользовательского интерфейса. В приложении MVC представление служит только для отображения информации. Обработку введенных данных, формирование ответа и взаимодействие с пользователем обеспечивает контроллер.

Шаблон MVC помогает создавать приложения, которые разделяют различные аспекты приложения (логику ввода, бизнес-логику и логику пользовательского интерфейса), обеспечивая при этом слабую связь между этими элементами. Это разделение помогает управлять сложностью при создании приложения, так как позволяет сосредоточиться на одном аспекте реализации за раз. Кроме того, шаблон MVC упрощает тестирование приложений, а также поощряет использование разработки на основе тестов (TDD) для создания приложений.

Платформа MVC ASP.NET предоставляет альтернативу шаблону ASP.NET Web Forms для создания ASP.NET веб-приложений на основе MVC. Платформа ASP.NET MVC — это упрощенная и проверяемая платформа презентаций, которая (как и приложения на основе веб-форм) интегрирована с существующими функциями ASP.NET, такими как master страницы и проверка подлинности на основе членства, что позволяет получить все возможности основной платформы .NET Framework. Это полезно, если вы уже знакомы с ASP.NET Web Forms, так как все библиотеки, которые вы уже используете, также доступны в ASP.NET MVC 4.

Кроме того, слабая связь между тремя main компонентами приложения MVC также способствует параллельной разработке. Например, один разработчик может работать с представлением, второй — над логикой контроллера, а третий — на бизнес-логике в модели.

Задачи

В этом Hands-On Lab вы узнаете, как:

Создание приложения ASP.NET MVC с нуля на основе руководства по приложению магазина музыки
Добавление контроллеров для обработки URL-адресов на домашнюю страницу сайта и для просмотра его функций main
Добавление представления для настройки отображаемого содержимого и его стиля
Добавление классов модели для хранения данных и логики предметной области и управления ими
Использование шаблона модели представления для передачи информации из действий контроллера в шаблоны представлений
Ознакомьтесь с новым шаблоном ASP.NET MVC 4 для интернет-приложений

Предварительные требования

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

Visual Studio 2012 Express for Web (инструкции по установке см. в приложении A )

Настройка

Установка фрагментов кода

Для удобства большая часть кода, который вы будете управлять в рамках этой лаборатории, доступна в виде фрагментов кода Visual Studio. Чтобы установить фрагменты кода, запустите файл .\Source\Setup\CodeSnippets.vsi .

Если вы не знакомы с фрагментами Visual Studio Code и хотите узнать, как их использовать, см. приложение из этого документа "Приложение C. Использование фрагментов кода".

Упражнения

Эта Hands-On Lab состоит из следующих упражнений:

Упражнение 1. Создание проекта веб-приложения MVC в MusicStore ASP.NET
Упражнение 2. Создание контроллера
Упражнение 3. Передача параметров в контроллер
Упражнение 4. Создание представления
Упражнение 5. Создание модели представления
Упражнение 6. Использование параметров в представлении
Упражнение 7. Круг вокруг ASP.NET MVC 4 Новый шаблон

Примечание

Каждое упражнение сопровождается папкой End , содержащей полученное решение, которое необходимо получить после выполнения упражнений. Это решение можно использовать в качестве руководства, если вам нужна дополнительная помощь в работе с упражнениями.

Предполагаемое время выполнения этого задания: 60 минут.

Упражнение 1. Создание проекта веб-приложения MVC в MusicStore ASP.NET

В этом упражнении вы узнаете, как создать приложение ASP.NET MVC в Visual Studio 2012 Express for Web, а также его main организации папок. Кроме того, вы узнаете, как добавить новый контроллер и сделать его отображение простой строкой на домашней странице приложения.

Задача 1. Создание проекта веб-приложения MVC ASP.NET

В этой задаче вы создадите пустой проект приложения MVC ASP.NET с помощью шаблона MVC Visual Studio. Запустите VS Express для Web.
В меню Файл выберите пункт Создать проект.
В диалоговом окне Новый проект выберите тип проекта ASP.NET веб-приложение MVC 4, расположенный в разделе Visual C#, список веб-шаблонов.
Измените имя на MvcMusicStore.
Задайте расположение решения в новой папке Begin в исходной папке этого упражнения, например [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Нажмите кнопку ОК.

Диалоговое окно "Создание проекта"
В диалоговом окне New ASP.NET MVC 4 Project (Проект MVC 4 ) выберите базовый шаблон и убедитесь, что для параметра Обработчик представленийвыбрано значение Razor. Нажмите кнопку ОК.

Диалоговое окно "Создание проекта ASP.NET MVC 4"

Задача 2. Изучение структуры решения

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

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

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

ASP.NET структуры папок MVC в Обозреватель решений
1. Контроллеры. Эта папка будет содержать классы контроллера. В приложении на основе MVC контроллеры отвечают за обработку взаимодействия с пользователем, управление моделью и, в конечном счете, выбор представления для отрисовки пользовательского интерфейса.
  
  Примечание
  
  Для платформы MVC имена всех контроллеров должны заканчиваться на "Контроллер", например HomeController, LoginController или ProductController.
2. Модели. Эта папка предоставляется для классов, представляющих модель приложения для веб-приложения MVC. Обычно сюда входит код, определяющий объекты и логику взаимодействия с хранилищем данных. Сами объекты модели обычно располагаются в отдельных библиотеках классов. Однако при создании нового приложения можно включить классы, а затем переместить их в отдельные библиотеки классов позже в цикле разработки.
3. Представления. Эта папка является рекомендуемой папкой для представлений, компонентов, отвечающих за отображение пользовательского интерфейса приложения. Представления используют .aspx, .ascx, .cshtml и . master файлы в дополнение к любым другим файлам, связанным с представлениями отрисовки. Папка Views содержит папку для каждого контроллера; папка называется с префиксом имени контроллера. Например, если у вас есть контроллер с именем HomeController, папка Views будет содержать папку с именем Home. По умолчанию, когда платформа ASP.NET MVC загружает представление, она ищет ASPX-файл с запрошенным именем представления в папке Views\controllerName (Views[ControllerName][Action].aspx) или (Views[ControllerName][Action].cshtml) для представлений Razor.
  
  Примечание
  
  В дополнение к перечисленным выше папкам веб-приложение MVC использует файл Global.asax для установки глобальных значений маршрутизации URL-адресов по умолчанию, а для настройки приложения используется файлWeb.config .

Задача 3. Добавление HomeController

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

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

В этой задаче вы добавите класс Controller, который будет обрабатывать URL-адреса на домашнюю страницу сайта музыкального магазина.

Щелкните правой кнопкой мыши папку Controllers в Обозреватель решений, выберите Добавить и команду Контроллер:

Команда "Добавить контроллер"
Откроется диалоговое окно Добавление контроллера . Назовите контроллер HomeController и нажмите кнопку Добавить.

Диалоговое окно "Добавление контроллера"
Файл HomeController.cs создается в папке Controllers . Чтобы homeController вернул строку для своего действия Index, замените метод Index следующим кодом:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex1 HomeController Index)
```
public string Index()
{
    return "Hello from Home";
}
```

Задача 4. Запуск приложения

В этой задаче вы опробуете приложение в веб-браузере.

Нажмите клавишу F5 , чтобы запустить приложение. Проект компилируется и запускается локальный веб-сервер IIS. Локальный веб-сервер IIS автоматически откроет веб-браузер, указывающий на URL-адрес веб-сервера.

Приложение, работающее в веб-браузере

Примечание

Локальный веб-сервер IIS будет запускать веб-сайт по случайному номеру свободного порта. На рисунке выше сайт работает по адресу http://localhost:50103/, поэтому он использует порт 50103. Номер порта может отличаться.
Закройте браузер.

Упражнение 2. Создание контроллера

В этом упражнении вы узнаете, как обновить контроллер для реализации простых функциональных возможностей приложения Музыкального магазина. Этот контроллер определит методы действий для обработки каждого из следующих конкретных запросов:

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

В область этого упражнения эти действия будут просто возвращать строку.

Задача 1. Добавление нового класса StoreController

В этой задаче вы добавите новый контроллер.

Если он еще не открыт, запустите VS Express для Web 2012.
В меню Файл выберите Пункт Открыть проект. В диалоговом окне Открытие проекта перейдите к папке Source\Ex02-CreatingAController\Begin, выберите Begin.sln и нажмите кнопку Открыть. Кроме того, можно продолжить работу с решением, полученным после выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , вам потребуется скачать некоторые отсутствующие пакеты NuGet, прежде чем продолжить. Для этого откройте меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув Сборка | решения.
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этого лабораторного задания.
Добавьте новый контроллер. Для этого щелкните правой кнопкой мыши папку Контроллеры в Обозреватель решений, выберите Добавить, а затем — команду Контроллер. Измените имя контроллера на StoreController и нажмите кнопку Добавить.

Диалоговое окно "Добавление контроллера"

Задача 2. Изменение действий StoreController

В этой задаче вы измените методы контроллера, которые называются действиями. Действия отвечают за обработку запросов URL-адресов и определение содержимого, которое должно быть отправлено обратно браузеру или пользователю, которые вызвали URL-адрес.

Класс StoreController уже имеет метод Index . Вы будете использовать его позже в этом задании для реализации страницы со списком всех жанров музыкального магазина. Сейчас просто замените метод Index следующим кодом, который возвращает строку "Hello from Store.Index()":

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex2 StoreController Index)
```
public string Index()
{
  return "Hello from Store.Index()";
}
```
Добавьте методы Browse и Details . Для этого добавьте следующий код в StoreController:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex2 StoreController BrowseAndDetails)
```
// GET: /Store/Browse
public string Browse()
{
  return "Hello from Store.Browse()";
}

// GET: /Store/Details  
public string Details()
{
  return "Hello from Store.Details()";
}
```

Задача 3. Запуск приложения

В этой задаче вы опробуете приложение в веб-браузере.

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес, чтобы проверить реализацию каждого действия.
1. /Store. Вы увидите "Hello from Store.Index()".
2. /Store/Browse. Вы увидите "Hello from Store.Browse()" (Hello from Store.Browse()).
3. /Store/Details. Вы увидите "Hello from Store.Details()".
  
  Просмотр /Store/Browse
Закройте браузер.

Упражнение 3. Передача параметров в контроллер

До сих пор вы возвращали константные строки из контроллеров. В этом упражнении вы узнаете, как передавать параметры контроллеру с помощью URL-адреса и строки запроса, а затем выполнять действия метода с текстом в браузере.

Задача 1. Добавление параметра жанра в StoreController

В этой задаче вы будете использовать строка запроса для отправки параметров в метод действия Обзор в StoreController.

Если он еще не открыт, запустите VS Express для Интернета.
В меню Файл выберите Пункт Открыть проект. В диалоговом окне Открытие проекта перейдите в папку Source\Ex03-PassingParametersToAController\Begin, выберите Begin.sln и нажмите кнопку Открыть. Кроме того, можно продолжить работу с решением, полученным после выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , вам потребуется скачать некоторые отсутствующие пакеты NuGet, прежде чем продолжить. Для этого откройте меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув Сборка | решения.
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этого лабораторного задания.
Откройте класс StoreController . Для этого в Обозреватель решений разверните папку Контроллеры и дважды щелкните файл StoreController.cs.
Измените метод Browse , добавив строковый параметр для запроса определенного жанра. ASP.NET MVC автоматически передает любые параметры querystring или form post с именем genre в этот метод действия при вызове. Для этого замените метод Browse следующим кодом:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex3 StoreController BrowseMethod)
```
// GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}
```

Примечание

Вы используете служебную программу HttpUtility.HtmlEncode , чтобы запретить пользователям внедрять JavaScript в представление со ссылкой , например /Store/Browse? Genre=<script>window.location='http://hackersite.com'</script>.

Дополнительные сведения см. в этой статье msdn.

Задача 2. Запуск приложения

В этой задаче вы опробуете приложение в веб-браузере и используете параметр genre .

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес на /Store/Browse? Genre=Disco , чтобы убедиться, что действие получает параметр жанра.

Просмотр /Store/Browse? Genre=Disco
Закройте браузер.

Задача 3. Добавление параметра id, внедренного в URL-адрес

В этой задаче вы будете использовать URL-адрес для передачи параметра Id методу действия Detailsобъекта StoreController. ASP.NET стандартное соглашение о маршрутизации MVC заключается в том, чтобы рассматривать сегмент URL-адреса после имени метода действия как параметр с именем Id. Если метод действия имеет параметр с именем Id, то ASP.NET MVC автоматически передаст сегмент URL-адреса в качестве параметра. В хранилище URL-адресов/сведений/5идентификатор будет интерпретироваться как 5.

Измените метод Detailsобъекта StoreController, добавив параметр int с именем id. Для этого замените метод Details следующим кодом:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex3 StoreController DetailsMethod)
```
// GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}
```

Задача 4. Запуск приложения

В этой задаче вы опробуете приложение в веб-браузере и используете параметр Id .

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес на /Store/Details/5 , чтобы убедиться, что действие получает параметр id.

Просмотр /Store/Details/5

Упражнение 4. Создание представления

До сих пор вы возвращали строки из действий контроллера. Хотя это полезный способ понять, как работают контроллеры, это не способ создания реальных веб-приложений. Представления — это компоненты, которые обеспечивают лучший подход к созданию HTML-кода в браузере с использованием файлов шаблонов.

В этом упражнении вы узнаете, как добавить макет master страницу, чтобы настроить шаблон для общего html-содержимого, таблицу стилей для улучшения внешнего вида сайта и, наконец, шаблон Представления, чтобы homeController возвращал HTML.

Задача 1. Изменение файла _layout.cshtml

Файл ~/Views/Shared/_layout.cshtml позволяет настроить шаблон для общего HTML-кода, который будет использоваться на всем веб-сайте. В этой задаче вы добавите макет master страницу с общим заголовком со ссылками на домашнюю страницу и область Магазин.

Если он еще не открыт, запустите VS Express для Интернета.
В меню Файл выберите Пункт Открыть проект. В диалоговом окне Открытие проекта перейдите в папку Source\Ex04-CreatingAView\Begin, выберите Begin.sln и нажмите кнопку Открыть. Кроме того, можно продолжить работу с решением, полученным после выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , вам потребуется скачать некоторые отсутствующие пакеты NuGet, прежде чем продолжить. Для этого откройте меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув Сборка | решения.
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этого лабораторного задания.
Файл _layout.cshtml содержит макет контейнера HTML для всех страниц сайта. Он включает <элемент HTML> для HTML-ответа, а также <элементы head> и <body> . @RenderBody() в тексте HTML идентифицируют области, в которые шаблоны представления смогут заполняться динамическим содержимым. C#
```
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>
```

Добавьте общий заголовок со ссылками на домашнюю страницу и область Магазин на всех страницах сайта. Для этого добавьте следующий код под <оператором body> . C#

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

Включите div для отрисовки основного раздела каждой страницы. Замените @RenderBody() следующим выделенным кодом: (C#)

...
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     <div id="body">
          @RenderSection("featured", required: false)
          <section class="content-wrapper main-content clear-fix">
                @RenderBody()
          </section>
     </div>
     ...
</body>
</html>

Примечание

Знаете ли вы? Visual Studio 2012 содержит фрагменты кода, которые упрощают добавление часто используемого кода в HTML, файлы кода и многое другое. Попробуйте ввести <div> и дважды нажмите клавишу TAB , чтобы вставить полный тег div .

Задача 2. Добавление таблицы стилей CSS

Пустой шаблон проекта содержит очень упрощенный CSS-файл, который включает только стили, используемые для отображения основных форм и сообщений проверки. Вы будете использовать дополнительные CSS и изображения (потенциально предоставляемые конструктором), чтобы улучшить внешний вид сайта.

В этой задаче вы добавите таблицу стилей CSS для определения стилей сайта.

CSS-файл и изображения включены в папку Source\Assets\Content этого задания. Чтобы добавить их в приложение, перетащите их содержимое из окна windows Обозреватель в Обозреватель решений в Visual Studio Express для Интернета, как показано ниже.

Перетаскивание содержимого стиля
Появится диалоговое окно с предупреждением с запросом на подтверждение замены файла Site.css и некоторых существующих изображений. Установите флажок Применить ко всем элементам и нажмите кнопку Да.

Задача 3. Добавление шаблона представления

В этой задаче вы добавите шаблон Представление для создания HTML-ответа, который будет использовать макет master страницы и CSS, добавленные в этом упражнении.

Чтобы использовать шаблон Представления при просмотре домашней страницы сайта, сначала необходимо указать, что вместо возврата строки метод HomeController Index вернет представление. Откройте класс HomeController и измените его метод Index , чтобы он возвращал ActionResult и возвращал View().

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex4 HomeController Index)
```
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}
```
Теперь необходимо добавить соответствующий шаблон Представления. Для этого щелкните правой кнопкой мыши метод действия Индекс и выберите Добавить представление. Откроется диалоговое окно Добавление представления .

Добавление представления из метода Index
Откроется диалоговое окно Добавления представления для создания файла шаблона представления. По умолчанию это диалоговое окно предварительно заполняет имя шаблона Представление, чтобы оно соответствовало методу действия, который будет его использовать. Так как вы использовали контекстное меню Добавить представление в методе действия Индекс в HomeController, в диалоговом окне Добавление представления в качестве имени представления по умолчанию используется индекс. Нажмите кнопку Добавить.

Диалоговое окно добавления представления
Visual Studio создает шаблон представления Index.cshtml в папке Views\Home , а затем открывает его.

"

Создано представление "Индекс домашней страницы"

Примечание

Имя и расположение файла Index.cshtml являются релевантными и соответствуют ASP.NET соглашениям об именовании MVC по умолчанию.

Папка \Views*Home* соответствует имени контроллера (домашний контроллер). Имя шаблона представления (индекс) соответствует методу действия контроллера, который будет отображать представление.

Таким образом, ASP.NET MVC позволяет избежать необходимости явно указывать имя или расположение шаблона Представления при использовании этого соглашения об именовании для возврата представления.
Созданный шаблон Представления основан на ранее определенном шаблоне _layout.cshtml . Обновите свойство ViewBag.Title на Главная и измените содержимое main на Это домашняя страница, как показано в коде ниже:
```
@{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>
```
Выберите проект MvcMusicStore в Обозреватель решений и нажмите клавишу F5, чтобы запустить приложение.

Задача 4. Проверка

Чтобы убедиться, что вы правильно выполнили все действия, описанные в предыдущем упражнении, выполните следующие действия:

Открыв приложение в браузере, обратите внимание на следующее:

Метод действия Индекс HomeController обнаружил и отображал шаблон представления \Views\Home\Index.cshtml , несмотря на то, что код возвращает view(), так как шаблон View соответствует стандартному соглашению об именовании.
На домашней странице отображается приветственное сообщение, определенное в шаблоне представления \Views\Home\Index.cshtml .
Домашняя страница использует шаблон _layout.cshtml , поэтому приветственное сообщение содержится в стандартном html-макете сайта.

Представление домашнего индекса с использованием определенной макетной страницы и стиля

Упражнение 5. Создание модели представления

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

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

Задача 1. Создание класса ViewModel

В этой задаче вы создадите класс ViewModel, который реализует сценарий описания жанров Store.

Если он еще не открыт, запустите VS Express для Web.
В меню Файл выберите Открыть проект. В диалоговом окне Открыть проект перейдите в раздел Source\Ex05-CreatingAViewModel\Begin, выберите Begin.sln и нажмите кнопку Открыть. Кроме того, можно продолжить работу с решением, полученным после выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , вам потребуется скачать некоторые отсутствующие пакеты NuGet, прежде чем продолжить. Для этого щелкните меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув BuildSolution (Сборка | решения).
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.
Создайте папку ViewModels для хранения ViewModel. Для этого щелкните правой кнопкой мыши проект MvcMusicStore верхнего уровня, выберите Добавить , а затем — Создать папку.

Добавление новой папки
Назовите папку ViewModels.

Папка ViewModels в Обозреватель решений
Создайте класс ViewModel . Для этого щелкните правой кнопкой мыши недавно созданную папку ViewModels , выберите Добавить , а затем — Создать элемент. В разделе Код выберите элемент Класс и назовите файл StoreIndexViewModel.cs, а затем нажмите кнопку Добавить.

Добавление нового класса

Создание класса StoreIndexViewModel

Задача 2. Добавление свойств в класс ViewModel

Существует два параметра, передаваемых из StoreController в шаблон View для создания ожидаемого ответа HTML: количество жанров в магазине и список этих жанров.

В этой задаче вы добавите эти 2 свойства в класс StoreIndexViewModel : NumberOfGenres (целое число) и Genres (список строк).

Добавьте свойства NumberOfGenres и Genres в класс StoreIndexViewModel . Для этого добавьте следующие две строки в определение класса:

(Фрагмент кода — ASP.NET MVC 4 Fundamentals — Свойства Ex5 StoreIndexViewModel)
```
public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}
```

Примечание

Нотация { get; set; } использует функцию автоматически реализуемых свойств C#. Он обеспечивает преимущества свойства, не требуя от нас объявления резервного поля.

Задача 3. Обновление StoreController для использования StoreIndexViewModel

Класс StoreIndexViewModel инкапсулирует сведения, необходимые для передачи из метода Index StoreController в шаблон View для создания ответа.

В этой задаче вы обновите StoreController для использования StoreIndexViewModel.

Откройте класс StoreController .

Открытие класса StoreController
Чтобы использовать класс StoreIndexViewModel из StoreController, добавьте следующее пространство имен в начало кода StoreController :

(Фрагмент кода — ASP.NET MVC 4 Fundamentals — Ex5 StoreIndexViewModel с помощью ViewModels)
```
using MvcMusicStore.ViewModels;
```
Измените метод действия Index StoreController таким образом, чтобы он создавал и заполнял объект StoreIndexViewModel, а затем передает его в шаблон View для создания HTML-ответа с ним.

Примечание

В лаборатории "ASP.NET MVC Models and Data Access" вы напишете код, который извлекает список жанров магазина из базы данных. В следующем коде вы создадите список фиктивных жанров данных, которые будут заполнять StoreIndexViewModel.

После создания и настройки объекта StoreIndexViewModel он будет передан в качестве аргумента в метод View . Это означает, что шаблон View будет использовать этот объект для создания HTML-ответа с его помощью.

Замените метод Index следующим кодом:

(Фрагмент кода — ASP.NET MVC 4 Fundamentals — метод Ex5 StoreController Index)

public ActionResult Index()
{
    // Create a list of genres
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};

    // Create our view model
    var viewModel = new StoreIndexViewModel { 
        NumberOfGenres = genres.Count(),
        Genres = genres
    };

    return this.View(viewModel);
}

Примечание

Если вы не знакомы с C#, вы можете предположить, что использование var означает, что переменная viewModel связана с задержкой. Неправильно. Компилятор C# использует вывод типа на основе того, что вы назначаете переменной, чтобы определить, что viewModel имеет тип StoreIndexViewModel. Кроме того, компилируя локальную переменную viewModel как тип StoreIndexViewModel , вы получаете поддержку проверки во время компиляции и редактора кода Visual Studio.

Задача 4. Создание шаблона представления, использующего StoreIndexViewModel

В этой задаче вы создадите шаблон Представления, который будет использовать объект StoreIndexViewModel, переданный из контроллера, для отображения списка жанров.

Перед созданием нового шаблона Представления давайте создадим проект, чтобы диалоговое окно добавления представления знало о классе StoreIndexViewModel . Выполните сборку проекта, выбрав пункт меню Сборка , а затем — Сборка MvcMusicStore.

Построение проекта
Создайте шаблон Представления. Для этого щелкните правой кнопкой мыши в методе Index и выберите Добавить представление.

Добавление представления
Так как диалоговое окно добавления представления было вызвано из StoreController, шаблон Представления будет добавлен по умолчанию в файл \Views\Store\Index.cshtml . Установите флажок Создать строго типизированное представление и выберите StoreIndexViewModel в качестве класса Model. Кроме того, убедитесь, что для обработчика представлений выбрано значение Razor. Нажмите кнопку Добавить.

Диалоговое окно "Добавление представления"

Создается и открывается файл шаблона \Views\Store\Index.cshtml View. На основе сведений, предоставленных в диалоговом окне Добавление представления на последнем шаге, шаблон Представления ожидает экземпляр StoreIndexViewModel в качестве данных, используемых для создания ОТВЕТА HTML. Вы заметите, что шаблон наследует в ViewPage<musicstore.viewmodels.storeindexviewmodel> C#.

Задача 5. Обновление шаблона представления

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

Примечание

Для выполнения кода в шаблоне View используется синтаксис @ (часто называемый "самородками кода").

В файле Index.cshtml в папке Store замените его код следующим кодом:

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

Выполните цикл по списку жанров в StoreIndexViewModel и создайте html-список <ul> с помощью цикла foreach . C#

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>

Нажмите клавишу F5 , чтобы запустить приложение и перейти к /Store. Вы увидите список жанров, переданных в объекте StoreIndexViewModel из StoreController в шаблон Представление.

Представление со списком жанров Представление

Представление со списком жанров

Закройте браузер.

Упражнение 6. Использование параметров в представлении

В упражнении 3 вы узнали, как передавать параметры контроллеру. В этом упражнении вы узнаете, как использовать эти параметры в шаблоне Представление. Для этого сначала вы познакомитесь с классами модели, которые помогут вам управлять данными и логикой предметной области. Кроме того, вы узнаете, как создавать ссылки на страницы в приложении ASP.NET MVC, не беспокоясь о таких вещах, как кодирование URL-путей.

Задача 1. Добавление классов модели

В отличие от ViewModels, которые создаются только для передачи информации из контроллера в представление, классы модели создаются для хранения и управления данными и логикой предметной области. В этой задаче вы добавите два класса моделей для представления этих понятий: Жанр и Альбом.

Если еще не открыт, запустите VS Express для Web.
В меню Файл выберите Пункт Открыть проект. В диалоговом окне Открытие проекта перейдите в папку Source\Ex06-UsingParametersInView\Begin, выберите Begin.sln и нажмите кнопку Открыть. Кроме того, можно продолжить работу с решением, полученным после выполнения предыдущего упражнения.
1. Если вы открыли предоставленное решение Begin , вам потребуется скачать некоторые отсутствующие пакеты NuGet, прежде чем продолжить. Для этого откройте меню Проект и выберите Управление пакетами NuGet.
2. В диалоговом окне Управление пакетами NuGet нажмите кнопку Восстановить , чтобы скачать отсутствующие пакеты.
3. Наконец, выполните сборку решения, щелкнув Сборка | решения.
  
  Примечание
  
  Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакета в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Именно поэтому эти действия необходимо выполнить после открытия существующего решения из этого лабораторного задания.
Добавьте класс Модель жанра . Для этого щелкните правой кнопкой мыши папку Models в Обозреватель решений, выберите Добавить, а затем новый элемент. В разделе Код выберите элемент Класс и присвойте файлу имя Genre.cs, а затем нажмите кнопку Добавить.

Добавление нового элемента

Добавление класса модели жанра

Добавьте свойство Name в класс Genre. Для этого добавьте следующий код:

(Фрагмент кода — ASP.NET MVC 4 Fundamentals — Жанр Ex6)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

Выполнив ту же процедуру, что и раньше, добавьте класс Album . Для этого щелкните правой кнопкой мыши папку Models в Обозреватель решений, выберите Добавить, а затем новый элемент. В разделе Код выберите элемент Класс и присвойте файлу имя Album.cs, а затем нажмите кнопку Добавить.

Добавьте два свойства в класс Album: Genre и Title. Для этого добавьте следующий код:

(Фрагмент кода — ASP.NET MVC 4 Fundamentals — Альбом Ex6)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Album
    {
        public string Title { get; set; }

        public Genre Genre { get; set; }
    }
}

Задача 2. Добавление StoreBrowseViewModel

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

Добавьте класс StoreBrowseViewModel . Для этого щелкните правой кнопкой мыши папку ViewModels в Обозреватель решений, выберите Добавить, а затем новый элемент. В разделе Код выберите элемент Класс и присвойте файлу имя StoreBrowseViewModel.cs, а затем нажмите кнопку Добавить.
Добавьте ссылку на Models в класс StoreBrowseViewModel . Для этого добавьте следующее с помощью пространства имен:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex6 UsingModel)
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}
```

Добавьте два свойства в класс StoreBrowseViewModel : Genre и Albums. Для этого добавьте следующий код:

(Фрагмент кода — ASP.NET MVC 4 Fundamentals — Ex6 ModelProperties)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
        public Genre Genre { get; set; }

        public List<Album> Albums { get; set; }
    }
}

Примечание

Что такое List<Album> ?: в этом определении используется тип List<T> , где T ограничивает тип, к которому принадлежат элементы этого списка , в данном случае Альбом (или любой из его потомков).

Возможность разработки классов и методов, которые откладывают спецификацию одного или нескольких типов, пока класс или метод не будут объявлены и экземпляры не будут создаваться клиентским кодом, является функцией языка C#, называемого универсальными шаблонами.

Список<T> является универсальным эквивалентом типа ArrayList и доступен в пространстве имен System.Collections.Generic . Одно из преимуществ использования универсальных шаблонов заключается в том, что, так как указан тип, вам не нужно выполнять операции проверки типа, такие как приведение элементов в альбом , как при использовании ArrayList.

Задача 3. Использование новой модели представления в StoreController

В этой задаче вы измените методы действий Обзор и СведенияStoreController, чтобы использовать новый StoreBrowseViewModel.

Добавьте ссылку на папку Models в классе StoreController . Для этого разверните папку Контроллеры в Обозреватель решений и откройте класс StoreController. Затем добавьте приведенный ниже код.

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex6 UsingModelInController)
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;
```
Замените метод действия Обзор для использования класса StoreViewBrowseController . Вы создадите жанр и два новых объекта Альбомы с фиктивными данными (в следующем практическом задании вы будете использовать реальные данные из базы данных). Для этого замените метод Browse следующим кодом:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex6 BrowseMethod)
```
//
// GET: /Store/Browse?genre=Disco

public ActionResult Browse(string genre)
{
    var genreModel = new Genre()
    {
        Name = genre
    };

    var albums = new List<Album>()
    {
        new Album() { Title = genre + " Album 1" },
        new Album() { Title = genre + " Album 2" }
    };

    var viewModel = new StoreBrowseViewModel()
    {
        Genre = genreModel,
        Albums = albums
    };

    return this.View(viewModel);
}
```
Замените метод действия Details для использования класса StoreViewBrowseController . Вы создадите объект Album , который будет возвращен в представление. Для этого замените метод Details следующим кодом:

(Фрагмент кода— ASP.NET MVC 4 Fundamentals — Ex6 DetailsMethod)
```
//
// GET: /Store/Details/5

public ActionResult Details(int id)
{
  var album = new Album { Title = "Sample Album" };

  return this.View(album);
}
```

Задача 4. Добавление шаблона представления обзора

В этой задаче вы добавите представление обзора , чтобы отобразить альбомы, найденные для определенного жанра.

Перед созданием нового шаблона Представления необходимо выполнить сборку проекта, чтобы диалоговое окно добавления представления знало о классе ViewModel для использования. Выполните сборку проекта, выбрав пункт меню Сборка , а затем — Сборка MvcMusicStore.
Добавьте представление обзора . Для этого щелкните правой кнопкой мыши метод действия ОбзорstoreController и выберите команду Добавить представление.
В диалоговом окне Добавление представления убедитесь, что для имени представления задано значение Обзор. Установите флажок Создать строго типизированное представление и выберите StoreBrowseViewModel в раскрывающемся списке Класс модели . Оставьте в остальных полях значение по умолчанию. Нажмите кнопку Добавить.

Добавление представления обзора
Измените файл Browse.cshtml для отображения сведений о жанре, обращаюсь к объекту StoreBrowseViewModel , который передается в шаблон представления. Для этого замените содержимое следующим кодом: (C#)
```
@model MvcMusicStore.ViewModels.StoreBrowseViewModel

@{
    ViewBag.Title = "Browse Albums";
}

<h2>Browsing Genre: @Model.Genre.Name</h2>

<ul>
    @foreach (var album in Model.Albums)
    {
        <li>@album.Title</li>
    }
</ul>
```

Задача 5. Запуск приложения

В этой задаче вы проверите, извлекает ли метод Browse альбомы из действия Обзор метода .

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес на /Store/Browse? Genre=Disco , чтобы убедиться, что действие возвращает два альбома.

Просмотр диско-альбомов магазина

Задача 6. Отображение сведений об определенном альбоме

В этой задаче вы реализуете представление Store/Details для отображения сведений об определенном альбоме. В этом практическом задании все, что будет отображаться об альбоме, уже содержится в шаблоне Представление . Таким образом, вместо создания класса StoreDetailsViewModel вы будете использовать текущий шаблон StoreBrowseViewModel , передав ему альбом.

При необходимости закройте браузер, чтобы вернуться в окно Visual Studio. Добавьте новое представление Сведений для метода действия Подробности StoreController. Для этого щелкните правой кнопкой мыши метод Details в классе StoreController и выберите команду Добавить представление.
В диалоговом окне Добавление представления убедитесь, что в поле Имя представления указано сведения. Установите флажок Создать строго типизированное представление и выберите Альбом в раскрывающемся списке Класс модели . Оставьте в остальных полях значение по умолчанию. Нажмите кнопку Добавить. Будет создан и открыт файл \Views\Store\Details.cshtml .

Добавление представления сведений
Измените файл Details.cshtml для отображения сведений об альбоме, обращаюсь к объекту Album , который передается в шаблон представления. Для этого замените содержимое следующим кодом: (C#)
```
@model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>
```

Задача 7. Запуск приложения

В этой задаче вы проверите, извлекается ли представление сведений об альбоме из метода действия Сведения .

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес на /Store/Details/5 , чтобы проверить сведения об альбоме.

Просмотр сведений об альбоме

Задача 8. Добавление ссылок между страницами

В этой задаче вы добавите ссылку в представление Магазина, чтобы в каждом имени жанра была ссылка на соответствующий URL-адрес /Store/Browse . Таким образом, если щелкнуть жанр, например Disco, он перейдет по URL-адресу /Store/Browse?genre=Disco .

При необходимости закройте браузер, чтобы вернуться в окно Visual Studio. Обновите страницу Индекс , чтобы добавить ссылку на страницу Обзор . Для этого в Обозреватель решений разверните папку Представления, затем папку Store и дважды щелкните страницу Index.cshtml.
Добавьте ссылку на представление Обзор, указывающую выбранный жанр. Для этого замените следующий выделенный код в тегах <li> : (C#)
```
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p> Select from @Model.NumberOfGenres genres</p>

<ul>
    @foreach (string genreName in Model.Genres) {
        <li>
            @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
        </li>
        }
</ul>
```
Примечание

Другой подход — это ссылка непосредственно на страницу с кодом, как показано ниже:

<a href="/Store/Browse?genre=@genreName">@genreName</a>

Хотя этот подход работает, он зависит от жестко закодированных строк. Если позже вы переименуете контроллер, вам придется изменить эту инструкцию вручную. Лучшая альтернатива — использовать вспомогательный метод HTML . ASP.NET MVC включает вспомогательный метод HTML, доступный для таких задач. Вспомогательный метод Html.ActionLink() упрощает создание ссылок в ФОРМАТЕ HTML<>, чтобы убедиться, что URL-пути правильно закодированы.

Html.ActionLink имеет несколько перегрузок. В этом упражнении вы будете использовать один, который принимает три параметра:
1. Текст ссылки, в котором будет отображаться название жанра
2. Имя действия контроллера (обзор)
3. Значения параметров маршрута с указанием имени (жанра) и значения (имя жанра)

Задача 9. Запуск приложения

В этой задаче вы проверите, отображается ли каждый жанр со ссылкой на соответствующий URL-адрес /Store/Browse .

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес на /Store , чтобы убедиться, что каждый жанр ссылается на соответствующий URL-адрес /Store/Browse .

Просмотр жанров со ссылками на страницу "Обзор"

Задача 10. Использование динамической коллекции ViewModel для передачи значений

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

Теперь вы будете использовать динамическую коллекцию ViewBag для передачи списка жанров со звездой из контроллера в представление. Представление Индекса магазина будет обращаться к ViewModel и отображать сведения.

При необходимости закройте браузер, чтобы вернуться в окно Visual Studio. Откройте файл StoreController.cs и измените метод Index , чтобы создать список жанров со звездами в коллекции ViewModel :
```
public ActionResult Index()
{
    // Create list of genres
    var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };

    // Create your view model
    var viewModel = new StoreIndexViewModel
    {
        NumberOfGenres = genres.Count,
        Genres = genres
    };

    ViewBag.Starred = new List<string> { "Rock", "Jazz" };

    return this.View(viewModel);
}
```
Примечание

Для доступа к свойствам можно также использовать синтаксис ViewBag["Starred"] .
Значок star "starred.png" включен в папку Source\Assets\Images этого задания. Чтобы добавить его в приложение, перетащите содержимое из окна windows Обозреватель в Обозреватель решений Visual Web Developer Express, как показано ниже:

Добавление star образа в решение

Откройте представление Store/Index.cshtml и измените содержимое. Вы прочитаете свойство starred в коллекции ViewBag и спросите, есть ли в списке имя текущего жанра. В этом случае вы увидите значок star прямо на ссылку жанра. C#

@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
     ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
     @foreach (string genreName in Model.Genres)
     {
          <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)

                @if (ViewBag.Starred.Contains(genreName))
                { 
                     <img src="../../Content/Images/starred.png" alt="Starred element" />
                }
          </li>
     }
</ul>
<br />
<h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>

Задача 11. Запуск приложения

В этой задаче вы проверите, отображается ли в жанрах со звездами значок star.

Нажмите клавишу F5 , чтобы запустить приложение.
Проект запускается на домашней странице. Измените URL-адрес на /Store , чтобы убедиться, что каждый рекомендуемый жанр имеет метку с учетом:

Просмотр жанров с элементами со звездами

Упражнение 7. Круг вокруг ASP.NET MVC 4 новый шаблон

В этом упражнении вы изучите усовершенствования в шаблонах проектов ASP.NET MVC 4, а также изучите наиболее релевантные функции нового шаблона.

Задача 1. Изучение шаблона интернет-приложения ASP.NET MVC 4

Если еще не открыт, запустите VS Express для Web.
Выберите файл | Новое | Команда меню проекта . В диалоговом окне Новый проект выберите Visual C#|Веб-шаблон в дереве панели слева и выберите ASP.NET веб-приложение MVC 4. Присвойте проекту имяMusicStore и измените имя решения на Begin, выберите расположение (или оставьте значение по умолчанию) и нажмите кнопку ОК.

Создание проекта ASP.NET MVC 4
В диалоговом окне Создать проект ASP.NET MVC 4 выберите шаблон проекта Интернет-приложение и нажмите кнопку ОК. Обратите внимание, что в качестве обработчика представлений можно выбрать Razor или ASPX.

Создание нового интернет-приложения ASP.NET MVC 4

Примечание

Синтаксис Razor появился в ASP.NET MVC 3. Его цель — свести к минимуму количество символов и нажатий клавиш, необходимых в файле, что обеспечивает быстрый и гибкий рабочий процесс программирования. Razor использует существующие навыки языка C#/VB (или других языков) и предоставляет синтаксис разметки шаблона, который обеспечивает потрясающий рабочий процесс создания HTML.
Нажмите клавишу F5 , чтобы запустить решение и просмотреть обновленный шаблон. Вы можете проверка следующие функции:
1. Шаблоны в современном стиле
  
  Шаблоны были обновлены, предоставляя более современные стили.
  
  ASP.NET шаблонов MVC 4 с рестайлом
2. Адаптивная отрисовка
  
  Ознакомьтесь с изменением размера окна браузера и обратите внимание, как макет страницы динамически адаптируется к новому размеру окна. Эти шаблоны используют метод адаптивной отрисовки для правильной отрисовки как на настольных, так и на мобильных платформах без каких-либо настроек.
  
  ASP.NET шаблон проекта MVC 4 в разных размерах браузера
Закройте браузер, чтобы остановить отладчик и вернуться в Visual Studio.
Теперь вы можете изучить решение и проверка некоторые новые возможности, представленные ASP.NET MVC 4 в шаблоне проекта.

Шаблон проекта интернет-приложения ASP.NET MVC 4
1. Разметка HTML5
  
  Просмотрите представления шаблонов, чтобы узнать новую разметку темы, например откройте представление About.cshtml в домашней папке.
  
  Новый шаблон с использованием Razor и разметки HTML5
2. Включены библиотеки JavaScript
  1. jQuery: jQuery упрощает обход HTML-документов, обработку событий, анимацию и взаимодействие Ajax.
  2. Пользовательский интерфейс jQuery. Эта библиотека предоставляет абстракции для низкоуровневого взаимодействия и анимации, расширенные эффекты и тематические мини-приложения, созданные на основе библиотеки JavaScript jQuery.
    
    Примечание
    
    Сведения о jQuery и пользовательском интерфейсе jQuery см. в [http://docs.jquery.com/](http://docs.jquery.com/).
  3. KnockoutJS. Шаблон по умолчанию ASP.NET MVC 4 теперь включает KnockoutJS, платформу JavaScript MVVM, которая позволяет создавать многофункциональные и быстродействующие веб-приложения с помощью JavaScript и HTML. Как и в ASP.NET MVC 3, библиотеки пользовательского интерфейса jQuery и jQuery также включены в ASP.NET MVC 4.
    
    Примечание
    
    Дополнительные сведения о библиотеке KnockOutJS можно получить по следующей ссылке: http://learn.knockoutjs.com/.
  4. Модернизатор. Эта библиотека запускается автоматически, что делает сайт совместимым со старыми браузерами при использовании технологий HTML5 и CSS3.
    
    Примечание
    
    Дополнительные сведения о библиотеке Модернизатора см. по этой ссылке: http://www.modernizr.com/.
3. SimpleMembership, включенная в решение
  
  SimpleMembership был разработан в качестве замены предыдущей системы поставщиков ASP.NET ролей и членства. Он содержит множество новых функций, которые упрощают для разработчика более гибкую защиту веб-страниц.
  
  Шаблон Интернета уже настроил несколько вещей для интеграции SimpleMembership, например AccountController готов использовать OAuthWebSecurity (для регистрации учетной записи OAuth, входа, управления и т. д.) и Web Security.
  
  SimpleMembership включено в решение
  
  Примечание
  
  Дополнительные сведения об OAuthWebSecurity см. на сайте MSDN.

Примечание

Кроме того, это приложение можно развернуть на веб-сайтах Windows Azure в соответствии с приложением Б. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания.

Итоги

Завершив эту Hands-On Lab, вы узнали основы ASP.NET MVC:

Основные элементы приложения MVC и их взаимодействие
Создание приложения ASP.NET MVC
Добавление и настройка контроллеров для обработки параметров, передаваемых через URL-адрес и строки запроса
Добавление макета master страницы для настройки шаблона для общего html-содержимого, таблицы стилей для улучшения внешнего вида и шаблона Представления для отображения HTML-содержимого
Использование шаблона ViewModel для передачи свойств в шаблон Представления для отображения динамической информации
Использование параметров, передаваемых контроллерам в шаблоне представления
Добавление ссылок на страницы в приложении MVC ASP.NET
Добавление и использование динамических свойств в представлении
Улучшения в шаблонах проектов ASP.NET MVC 4

Приложение А. Установка Visual Studio Express 2012 для Web

Вы можете установить Microsoft Visual Studio Express 2012 для Web или другую версию Express с помощью установщик веб-платформы Майкрософт. Ниже приведены инструкции по установке Visual Studio Express 2012 for Web с помощью установщик веб-платформы Майкрософт.

Перейдите к [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Кроме того, если у вас уже установлен установщик веб-платформы, вы можете открыть его и найти продукт "Visual Studio Express 2012 for Web with Windows Azure SDK".
Щелкните Установить сейчас. Если у вас нет установщика веб-платформы , вы будете перенаправлены на его скачивание и установку.
После открытия установщика веб-платформы нажмите кнопку Установить , чтобы начать установку.

Установка Visual Studio Express
Ознакомьтесь со всеми лицензиями и условиями продуктов и нажмите кнопку Я принимаю , чтобы продолжить.

Принятие условий лицензии
Дождитесь завершения процесса скачивания и установки.

Ход установки
После завершения установки нажмите кнопку Готово.

Установка завершена
Щелкните Выйти , чтобы закрыть установщик веб-платформы.
Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните писать "VS Express", а затем щелкните плитку VS Express для Web.

Плитка VS Express для Web

Приложение Б. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

В этом приложении показано, как создать новый веб-сайт на портале управления Windows Azure и опубликовать приложение, полученное в ходе выполнения задания, используя функцию публикации веб-развертывания, предоставляемую Windows Azure.

Задача 1. Создание веб-сайта на портале Windows Azure

Перейдите на портал управления Windows Azure и выполните вход, используя учетные данные Майкрософт, связанные с вашей подпиской.

Примечание

С помощью Windows Azure вы можете разместить 10 ASP.NET веб-сайтов бесплатно, а затем масштабироваться по мере роста трафика. Вы можете зарегистрироваться здесь.

Войдите на портал управления Windows Azure.
Нажмите кнопку Создать на панели команд.

Создание нового веб-сайта
Щелкните Вычислительный | веб-сайт. Затем выберите параметр Быстрое создание . Укажите доступный URL-адрес для нового веб-сайта и нажмите кнопку Создать веб-сайт.

Примечание

Веб-сайт Windows Azure — это узел веб-приложения, работающего в облаке, которым можно управлять и управлять. Параметр Быстрое создание позволяет развернуть готовое веб-приложение на веб-сайте Windows Azure за пределами портала. Он не включает шаги по настройке базы данных.

Создание веб-сайта с помощью быстрого создания
Дождитесь создания нового веб-сайта .
После создания веб-сайта щелкните ссылку в столбце URL-адрес . Убедитесь, что новый веб-сайт работает.

Переход на новый веб-сайт

Запущенный веб-сайт
Назад на портале и щелкните имя веб-сайта в столбце Имя, чтобы отобразить страницы управления.

Открытие страниц управления веб-сайтом
На странице Панель мониторинга в разделе Краткий обзор щелкните ссылку Скачать профиль публикации .

Примечание

Профиль публикации содержит все сведения, необходимые для публикации веб-приложения на веб-сайте Windows Azure для каждого включенного метода публикации. Профиль публикации содержит URL-адреса, учетные данные пользователей и строки для открытия базы данных, которые необходимы для проверки подлинности и подключения к каждой из конечных точек, соответствующей разрешенному методу публикации. Microsoft WebMatrix 2, Microsoft Visual Studio Express для Web и Microsoft Visual Studio 2012 поддерживают чтение профилей публикации для автоматизации настройки этих программ для публикации веб-приложений на веб-сайтах Windows Azure.

Скачивание профиля публикации веб-сайта
Скачайте файл профиля публикации в известное расположение. Далее в этом упражнении вы узнаете, как использовать этот файл для публикации веб-приложения на веб-сайтах Windows Azure из Visual Studio.

Сохранение файла профиля публикации

Задача 2. Настройка сервера базы данных

Если приложение использует SQL Server базы данных, необходимо создать сервер База данных SQL. Если вы хотите развернуть простое приложение, которое не использует SQL Server можно пропустить эту задачу.

Для хранения базы данных приложения потребуется сервер База данных SQL. Вы можете просмотреть серверы База данных SQL из своей подписки на портале управления Windows Azure напанели мониторинга серверасерверов | баз данных | SQL. Если сервер не создан, его можно создать с помощью кнопки Добавить на панели команд. Запишите имя сервера и URL-адрес, имя входа администратора и пароль, так как они будут использоваться в следующих задачах. Пока не создавайте базу данных, так как она будет создана на более позднем этапе.

Панель мониторинга сервера База данных SQL
В следующей задаче вы проверите подключение к базе данных из Visual Studio. По этой причине необходимо включить локальный IP-адрес в список разрешенных IP-адресов сервера. Для этого нажмите кнопку Настроить, выберите IP-адрес в поле Текущий IP-адрес клиента , вставьте его в текстовые поля Начальный IP-адрес и Конечный IP-адрес и нажмите кнопку .

Добавление IP-адреса клиента
После добавления IP-адреса клиента в список разрешенных IP-адресов нажмите кнопку Сохранить , чтобы подтвердить изменения.

Подтверждение изменений

Задача 3. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

Назад к решению ASP.NET MVC 4. В Обозреватель решений щелкните правой кнопкой мыши проект веб-сайта и выберите Опубликовать.

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

Импорт профиля публикации
Щелкните Проверить подключение. После завершения проверки нажмите кнопку Далее.

Примечание

Проверка завершится, когда рядом с кнопкой Проверить подключение появится зеленая галочка.

Проверка подключения
На странице Параметры в разделе Базы данных нажмите кнопку рядом с текстовым полем подключения к базе данных (т. е. DefaultConnection).

Конфигурация веб-развертывания
Настройте подключение к базе данных следующим образом:
- В поле Имя сервера введите URL-адрес сервера База данных SQL, используя префикс tcp: .
- В поле Имя пользователя введите имя входа администратора сервера.
- В поле Пароль введите пароль для входа администратора сервера.
- Введите новое имя базы данных, например MVC4SampleDB.
  
  Настройка строки подключения назначения
Затем нажмите кнопку ОК. При появлении запроса на создание базы данных нажмите кнопку Да.

Создание базы данных
Строка подключения, используемая для подключения к База данных SQL в Windows Azure, отображается в текстовом поле Подключение по умолчанию. Нажмите кнопку Далее.

Строка подключения, указывающая на База данных SQL
На странице Предварительный просмотр нажмите кнопку Опубликовать.

Публикация веб-приложения
После завершения процесса публикации браузер по умолчанию откроет опубликованный веб-сайт.

Приложение, опубликованное в Windows Azure

Приложение В. Использование фрагментов кода

С помощью фрагментов кода у вас есть весь необходимый код. В лабораторном документе будет указано, когда их можно использовать, как показано на следующем рисунке.

Использование фрагментов кода Visual Studio для вставки кода в проект

Вставка кода в проект с помощью фрагментов кода Visual Studio

Добавление фрагмента кода с помощью клавиатуры (только C#)

Поместите курсор в то место, куда вы хотите вставить код.
Начните вводить имя фрагмента (без пробелов или дефисов).
Посмотрите, как IntelliSense отображает имена соответствующих фрагментов кода.
Выберите правильный фрагмент (или продолжайте вводить, пока не будет выбрано имя всего фрагмента).
Дважды нажмите клавишу TAB, чтобы вставить фрагмент в расположение курсора.

Начало ввода имени фрагмента

Начните вводить имя фрагмента кода

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент,

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент.

Нажмите клавишу TAB еще раз, и фрагмент кода снова развернется .

Нажмите клавишу TAB еще раз, и фрагмент кода развернется.

Добавление фрагмента кода с помощью мыши (C#, Visual Basic и XML) 1. Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода.

Выберите Вставить фрагмент кода , а затем — My Code Snippets (Фрагменты кода).
Выберите соответствующий фрагмент из списка, щелкнув его.

Щелкните правой кнопкой мыши место, где требуется вставить фрагмент кода, и выберите Вставить фрагмент кода.

Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода, и выберите команду Вставить фрагмент кода.

Выберите соответствующий фрагмент из списка, щелкнув его .

Выберите соответствующий фрагмент из списка, щелкнув его

Основы ASP.NET MVC 4

Приложение "Магазин музыки"

ASP.NET MVC 4 Essentials

Задачи

Предварительные требования

Настройка

Упражнения

Упражнение 1. Создание проекта веб-приложения MVC в MusicStore ASP.NET

Задача 1. Создание проекта веб-приложения MVC ASP.NET

Задача 2. Изучение структуры решения

Задача 3. Добавление HomeController

Задача 4. Запуск приложения

Упражнение 2. Создание контроллера

Задача 1. Добавление нового класса StoreController

Задача 2. Изменение действий StoreController

Задача 3. Запуск приложения

Упражнение 3. Передача параметров в контроллер

Задача 1. Добавление параметра жанра в StoreController

Задача 2. Запуск приложения

Задача 3. Добавление параметра id, внедренного в URL-адрес

Задача 4. Запуск приложения

Упражнение 4. Создание представления

Задача 1. Изменение файла _layout.cshtml

Задача 2. Добавление таблицы стилей CSS

Задача 3. Добавление шаблона представления

Задача 4. Проверка

Упражнение 5. Создание модели представления

Задача 1. Создание класса ViewModel

Задача 2. Добавление свойств в класс ViewModel

Задача 3. Обновление StoreController для использования StoreIndexViewModel

Задача 4. Создание шаблона представления, использующего StoreIndexViewModel

Задача 5. Обновление шаблона представления

Упражнение 6. Использование параметров в представлении

Задача 1. Добавление классов модели

Задача 2. Добавление StoreBrowseViewModel

Задача 3. Использование новой модели представления в StoreController

Задача 4. Добавление шаблона представления обзора

Задача 5. Запуск приложения

Задача 6. Отображение сведений об определенном альбоме

Задача 7. Запуск приложения

Задача 8. Добавление ссылок между страницами

Задача 9. Запуск приложения

Задача 10. Использование динамической коллекции ViewModel для передачи значений

Задача 11. Запуск приложения

Упражнение 7. Круг вокруг ASP.NET MVC 4 новый шаблон

Задача 1. Изучение шаблона интернет-приложения ASP.NET MVC 4

Итоги

Приложение А. Установка Visual Studio Express 2012 для Web

Приложение Б. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

Задача 1. Создание веб-сайта на портале Windows Azure

Задача 2. Настройка сервера базы данных

Задача 3. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

Приложение В. Использование фрагментов кода

Обратная связь

Обратная связь

Дополнительные ресурсы