Поделиться через

Основы ASP.NET MVC 4

  • Статья

Команда веб-лагерей

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

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

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

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

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

Примечание.

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

Приложение Music Store

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

Экраны магазина музыки

Экраны магазина музыки

ASP.NET MVC 4 Essentials

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

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

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

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

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

Задачи

В этой практической лаборатории вы узнаете, как:

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

Необходимые компоненты

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

Настройка

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

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

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

Упражнения

Эта практическая лаборатория состоит из следующих упражнений:

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

Примечание.

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

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

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

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

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

  1. В этой задаче вы создадите пустой проект приложения MVC ASP.NET с помощью шаблона Visual Studio MVC. Запустите VS Express для Интернета.

  2. В меню Файл выберите пункт Создать проект.

  3. В диалоговом окне "Новый проект" выберите тип проекта веб-приложения MVC 4 ASP.NET, расположенный в списке веб-шаблонов Visual C#.

  4. Измените имя на MvcMusicStore.

  5. Задайте расположение решения в новой папке Begin в исходной папке этого упражнения, например [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Щелкните OK.

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

    Диалоговое окно "Создание проекта"

  6. В диалоговом окне "Новый ASP.NET проект MVC 4" выберите шаблон "Базовый" и убедитесь, что выбран модуль представления Razor. Щелкните OK.

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

    Диалоговое окно "Новый проект ASP.NET MVC 4"

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

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

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

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

    структура папок MVC ASP.NET в Обозреватель решений

    структура папок MVC ASP.NET в Обозреватель решений

    1. Контроллеры. Эта папка будет содержать классы контроллера. В приложении на основе MVC контроллеры отвечают за обработку взаимодействия с конечным пользователем, управление моделью и в конечном итоге выбор представления для отображения пользовательского интерфейса.

      Примечание.

      Платформа MVC требует, чтобы имена всех контроллеров заканчивались контроллером, например HomeController, LoginController или ProductController.

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

    3. Просмотры. Эта папка является рекомендуемой папкой для представлений, компоненты, ответственные за отображение пользовательского интерфейса приложения. Представления используют .aspx, ASCX, CSHTML и MASTER-файлы, а также другие файлы, связанные с представлениями отрисовки. Папка Views содержит папку для каждого контроллера; Папка называется префиксом имени контроллера. Например, если у вас есть контроллер с именем HomeController, папка Views будет содержать папку с именем Home. По умолчанию, когда платформа MVC ASP.NET загружает представление, он ищет файл .aspx с запрошенным именем представления в папке Views\controllerName (Views[ControllerName][Action].aspx) или (Views[ControllerName][ActionName][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 представление служит только для отображения информации. Обработку введенных данных, формирование ответа и взаимодействие с пользователем обеспечивает контроллер.

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

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

    Добавление команды контроллера

    Добавление команды контроллера

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

    Снимок экрана: диалоговое окно

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — индекс Ex1 HomeController)

    public string Index()
{
    return "Hello from Home";
}

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

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

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

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

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

    Примечание.

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

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

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

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

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

В рамках этого упражнения эти действия просто возвращают строку.

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

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

  1. Если он еще не открыт, запустите VS Express для Web 2012.

  2. В меню "Файл" выберите "Открыть проект". В диалоговом окне "Открыть проект" перейдите к source\Ex02-CreatingAController\Begin, выберите Begin.sln и нажмите кнопку "Открыть". Кроме того, вы можете продолжить работу с решением, полученным после выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

  3. Добавьте новый контроллер. Для этого щелкните правой кнопкой мыши папку "Контроллеры" в Обозреватель решений, выберите "Добавить", а затем команду "Контроллер". Измените имя контроллера на StoreController и нажмите кнопку "Добавить".

    Добавьте снимок экрана диалогового окна контроллера с панелью для ввода имени контроллера и параметра выбора параметров формирования шаблонов.

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

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

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — индекс Ex2 StoreController)

    public string Index()
{
  return "Hello from Store.Index()";
}

  2. Добавление методов обзора и сведений . Для этого добавьте следующий код в StoreController:

    (Фрагмент кода — ASP.NET основы MVC 4 — 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. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес, чтобы проверить реализацию каждого действия.

    1. /Store. Вы увидите "Hello from Store.Index()".

    2. /Store/Browse. Вы увидите "Hello from Store.Browse()".

    3. /Store/Details. Вы увидите "Hello from Store.Details()".

      Просмотр StoreBrowse

      Просмотр /Магазин/Обзор

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

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

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

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

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

  1. Если он еще не открыт, запустите VS Express для Интернета.

  2. В меню "Файл" выберите "Открыть проект". В диалоговом окне "Открыть проект" перейдите к source\Ex03-PassingParametersToAController\Begin, выберите Begin.sln и нажмите кнопку "Открыть". Кроме того, вы можете продолжить работу с решением, полученным после выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

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

  4. Измените метод Browse , добавив строковый параметр для запроса определенного жанра. ASP.NET MVC автоматически передает все параметры запроса или записи формы с именем жанра этому методу действия при вызове. Для этого замените метод Browse следующим кодом:

    (Фрагмент кода — ASP.NET основы MVC 4 — 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. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

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

    Просмотр StoreBrowseGenre=Disco

    Просмотр /Магазин/Обзор? Жанр=Диско

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

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

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — Ex3 StoreController DetailsMethod)

    // GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}

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

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

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

    Просмотр StoreDetails5

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

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

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

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

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

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

  1. Если он еще не открыт, запустите VS Express для Интернета.

  2. В меню "Файл" выберите "Открыть проект". В диалоговом окне "Открыть проект" перейдите к source\Ex04-CreatingAView\Begin, выберите Begin.sln и нажмите кнопку "Открыть". Кроме того, вы можете продолжить работу с решением, полученным после выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

  3. Файл _layout.cshtml содержит макет контейнера HTML для всех страниц сайта. Он включает <html-элемент для ответа HTML>, а также< элементы головного> и <основного текста.> @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>

  4. Добавьте общий заголовок со ссылками на домашнюю страницу и область Магазина на всех страницах сайта. Чтобы сделать это, добавьте следующий код ниже <инструкции 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>

  5. Включите 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 для определения стилей сайта.

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

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

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

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

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

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — индекс Ex4 HomeController)

    public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return this.View();
    }
}

  2. Теперь необходимо добавить соответствующий шаблон представления. Для этого щелкните правой кнопкой мыши в методе действия Index и выберите "Добавить представление". Откроется диалоговое окно "Добавление представления ".

    Добавление представления из метода Index

    Добавление представления из метода Index

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

    Снимок экрана: диалоговое окно

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

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

    Представление домашнего индекса создано

    Представление домашнего индекса создано

    Примечание.

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

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

    Таким образом, ASP.NET MVC не требует явно указывать имя или расположение шаблона представления при использовании этого соглашения об именовании для возврата представления.

  5. Созданный шаблон представления основан на шаблоне _layout.cshtml ранее. Обновите свойство ViewBag.Title на Home и измените основное содержимое на "Это домашняя страница", как показано в приведенном ниже коде:

    @{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>

  6. Выберите проект MvcMusicStore в Обозреватель решений и нажмите клавишу F5, чтобы запустить приложение.

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

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

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

  1. Метод действия индекса HomeController нашел и отображал шаблон \Views\Home\Index.cshtml View, несмотря на то, что код называется return View(), так как шаблон представления следует стандартному соглашению об именовании.

  2. Домашняя страница отображает приветственное сообщение, определенное в шаблоне представления \Views\Home\Index.cshtml .

  3. Домашняя страница использует шаблон _layout.cshtml , поэтому приветственное сообщение содержится в стандартном макете HTML сайта.

    Представление домашнего индекса с помощью определенного макета и стиля

    Представление домашнего индекса с помощью определенного макета и стиля

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

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

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

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

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

  1. Если он еще не открыт, запустите VS Express для Интернета.

  2. В меню "Файл" выберите "Открыть проект". В диалоговом окне "Открыть проект" перейдите к source\Ex05-CreatingAViewModel\Begin, выберите Begin.sln и нажмите кнопку "Открыть". Кроме того, вы можете продолжить работу с решением, полученным после выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

  3. Создайте папку ViewModels для хранения ViewModel. Для этого щелкните правой кнопкой мыши проект MvcMusicStore верхнего уровня, выберите "Добавить" и "Создать папку".

    Добавление новой папки

    Добавление новой папки

  4. Назовите папку ViewModels.

    Папка ViewModels в Обозреватель решений

    Папка ViewModels в Обозреватель решений

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

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

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

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

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

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

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

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — свойства 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.

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

    Открытие класса StoreController

    Открытие класса StoreController

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

    (Фрагмент кода — ASP.NET основы MVC 4 — Ex5 StoreIndexViewModel с помощью ViewModels)

    using MvcMusicStore.ViewModels;

  3. Измените метод действия Индекса StoreController таким образом, чтобы он создал и заполнял объект StoreIndexViewModel, а затем передает его шаблону View, чтобы создать html-ответ с ним.

    Примечание.

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

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — метод индекса Ex5 StoreController)

    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

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

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

    Создание проекта

    Создание проекта

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

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

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

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

    Снимок экрана: диалоговое окно

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

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

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

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

Примечание.

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

  1. В файле Index.cshtml в папке Store замените код следующим образом:
@model MvcMusicStore.ViewModels.StoreIndexViewModel

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

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
  1. Цикл по списку жанров в 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>
  1. Нажмите клавишу F5 , чтобы запустить приложение и просмотреть /Store. Вы увидите список жанров, переданных в объект StoreIndexViewModel из StoreController в шаблон View.

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

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

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

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

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

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

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

  1. Если он еще не открыт, запустите VS Express для Интернета

  2. В меню "Файл" выберите "Открыть проект". В диалоговом окне "Открыть проект" перейдите к source\Ex06-UsingParametersInView\Begin, выберите Begin.sln и нажмите кнопку "Открыть". Кроме того, вы можете продолжить работу с решением, полученным после выполнения предыдущего упражнения.

    1. Если вы открыли предоставленное решение Begin , перед продолжением необходимо скачать некоторые отсутствующие пакеты NuGet. Для этого щелкните меню "Проект" и выберите "Управление пакетами NuGet".

    2. В диалоговом окне "Управление пакетами NuGet" нажмите кнопку "Восстановить", чтобы скачать отсутствующие пакеты.

    3. Наконец, создайте решение, нажав кнопку "Сборка решения сборки". |

      Примечание.

      Одним из преимуществ использования NuGet является то, что вам не нужно отправлять все библиотеки в проекте, уменьшая размер проекта. С помощью NuGet Power Tools, указав версии пакетов в файле Packages.config, вы сможете скачать все необходимые библиотеки при первом запуске проекта. Поэтому эти действия необходимо выполнить после открытия существующего решения из этой лаборатории.

  3. Добавьте класс "Модель жанра". Для этого щелкните правой кнопкой мыши папку "Модели" в Обозреватель решений, выберите "Добавить" и выберите пункт "Создать элемент". В разделе "Код" выберите элемент класса и назовите файл Genre.cs, а затем нажмите кнопку "Добавить".

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

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

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

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

  4. Добавьте свойство Name в класс "Жанр". Для этого добавьте следующий код:

    (Фрагмент кода — ASP.NET основы MVC 4 — жанр Ex6)

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

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

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

  6. Добавьте два свойства в класс "Альбом": "Жанр " и "Заголовок". Для этого добавьте следующий код:

    (Фрагмент кода — ASP.NET основы MVC 4 — альбом 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 будет использоваться в этой задаче для отображения альбомов, которые соответствуют выбранному жанру. В этой задаче вы создадите этот класс, а затем добавьте два свойства для обработки жанра и списка его альбомов.

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

  2. Добавьте ссылку на класс Models в StoreBrowseViewModel . Для этого добавьте следующее с помощью пространства имен:

    (Фрагмент кода — ASP.NET основы MVC 4 — ex6 UsingModel)

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

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

  3. Добавьте два свойства в класс StoreBrowseViewModel : "Жанр " и "Альбомы". Для этого добавьте следующий код:

    (Фрагмент кода — ASP.NET основы MVC 4 — 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# с именем Generics.

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

Задача 3. Использование new ViewModel в StoreController

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

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

    (Фрагмент кода — ASP.NET основы MVC 4 — ex6 UsingModelInController)

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

  2. Замените метод действия Browse для использования класса StoreViewBrowseController . Вы создадите жанр и два новых объекта Альбомов с фиктивными данными (в следующей практической лаборатории вы будете использовать реальные данные из базы данных). Для этого замените метод Browse следующим кодом:

    (Фрагмент кода — ASP.NET основы MVC 4 — 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);
}

  3. Замените метод действия Details для использования класса StoreViewBrowseController . Вы создадите объект "Альбом ", который будет возвращен в представление. Для этого замените метод Details следующим кодом:

    (Фрагмент кода — ASP.NET основы MVC 4 — Ex6 DetailsMethod)

    //
// GET: /Store/Details/5

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

  return this.View(album);
}

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

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

  1. Перед созданием нового шаблона представления необходимо создать проект, чтобы диалоговое окно добавления представления знало об используемом классе ViewModel . Создайте проект, выбрав пункт меню " Сборка", а затем создайте MvcMusicStore.

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

  3. В диалоговом окне "Добавление представления" убедитесь, что имя представления — обзор. Установите флажок "Создать строго типизированное представление" и выберите StoreBrowseViewModel в раскрывающемся списке класса Model. Оставьте другие поля со значением по умолчанию. Нажмите кнопку Добавить.

    Добавление представления обзора

    Добавление представления обзора

  4. Измените файл 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. Запуск приложения

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

  2. Проект начинается на домашней странице. Измените URL-адрес на /Store/Browse? Жанр=Диско , чтобы убедиться, что действие возвращает два альбома.

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

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

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

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

  1. Закройте браузер при необходимости, чтобы вернуться в окно Visual Studio. Добавьте новое представление сведений для метода действия "Сведения" в StoreController. Для этого щелкните правой кнопкой мыши метод Details в классе StoreController и нажмите кнопку "Добавить представление".

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

    Добавление представления сведений

    Добавление представления сведений

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

    @model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

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

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

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

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

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

    Сведения о просмотре альбома

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

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

  1. Закройте браузер при необходимости, чтобы вернуться в окно Visual Studio. Обновите страницу индекса, чтобы добавить ссылку на страницу обзора. Для этого в Обозреватель решений разверните папку Views, а затем папку Store и дважды щелкните страницу Index.cshtml.

  2. Добавьте ссылку на представление "Обзор", указывающее выбранный жанр. Для этого замените следующий выделенный код в <тегах 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&gt;

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

    Html.ActionLink имеет несколько перегрузок. В этом упражнении вы будете использовать один из трех параметров:

    1. Текст ссылки, отображающий имя жанра
    2. Имя действия контроллера (обзор)
    3. Значения параметров маршрута, указывающие имя (жанр) и значение (имя жанра)

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

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

  1. Нажмите клавишу F5 , чтобы запустить приложение.

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

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

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

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

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

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

  1. Закройте браузер при необходимости, чтобы вернуться в окно 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"] для доступа к свойствам.

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

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

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

  3. Откройте представление Store/Index.cshtml и измените содержимое. Вы прочитаете свойство "в главной" коллекции ViewBag и спросите, находится ли текущее имя жанра в списке. В этом случае вы увидите значок звезды прямо на ссылку жанра. 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. Запуск приложения

В этой задаче вы проверите, что звездные жанры отображают значок звезды.

  1. Нажмите клавишу F5 , чтобы запустить приложение.

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

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

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

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

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

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

  1. Если он еще не открыт, запустите VS Express для Интернета

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

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

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

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

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

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

    Примечание.

    Синтаксис Razor появился в ASP.NET MVC 3. Его целью является минимизация количества символов и нажатий клавиш, необходимых в файле, что позволяет быстро и гибко кодировать рабочий процесс. Razor использует существующие навыки языка C#/VB (или другие) и предоставляет синтаксис разметки шаблона, который обеспечивает удивительный рабочий процесс построения HTML.

  4. Нажмите клавишу F5 , чтобы запустить решение и просмотреть обновленный шаблон. Вы можете ознакомиться со следующими функциями:

    1. Шаблоны современного стиля

      Шаблоны были обновлены, предоставляя более современные стили.

      ASP.NET шаблоны MVC 4 restyled

      ASP.NET шаблоны MVC 4 restyled

    2. Адаптивная отрисовка

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

      ASP.NET шаблон проекта MVC 4 в разных размерах браузера

      ASP.NET шаблон проекта MVC 4 в разных размерах браузера

  5. Закройте браузер, чтобы остановить отладчик и вернуться в Visual Studio.

  6. Теперь вы можете изучить решение и ознакомиться с некоторыми новыми функциями, представленными ASP.NET MVC 4 в шаблоне проекта.

    ASP.NET MVC4-internet-application-project-template

    Шаблон проекта приложения MVC 4 ASP.NET MVC 4

    1. Разметка HTML5

      Просмотрите представления шаблонов, чтобы узнать о новой разметке темы, например открыть представление About.cshtml в папке Home .

      Новый шаблон с помощью разметки Razor и HTML5

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

      SimpleMembership, включенное в решение

      Примечание.

      Дополнительные сведения о OAuthWebSecurity см. в MSDN.

Примечание.

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

Итоги

Завершив эту практическую лабораторию, вы узнали основы ASP.NET MVC:

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

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

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

  1. Перейдите в раздел [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Кроме того, если вы уже установили установщик веб-платформы, его можно открыть и найти в продукте Visual Studio Express 2012 для Интернета с помощью пакета SDK для Windows Azure.

  2. Нажмите кнопку "Установить сейчас". Если у вас нет установщика веб-платформы, вы будете перенаправлены, чтобы скачать и установить его сначала.

  3. После открытия установщика веб-платформы нажмите кнопку "Установить ", чтобы запустить настройку.

    Установка Visual Studio Express

    Установка Visual Studio Express

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

    Принятие условий лицензии

    Принятие условий лицензии

  5. Дождитесь завершения процесса загрузки и установки.

    Ход выполнения установки

    Ход установки

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

    Завершена установка

    Завершена установка

  7. Нажмите кнопку " Выйти" , чтобы закрыть установщик веб-платформы.

  8. Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните писать "VS Express", а затем щелкните элемент VS Express для веб-страницы.

    Плитка VS Express для веб-сайта

    Плитка VS Express для веб-сайта

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

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

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

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

    Примечание.

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

    Вход в Windows портал Azure

    Вход на портал управления Windows Azure

  2. Нажмите кнопку "Создать" на панели команд.

    Создание нового веб-сайта

    Создание нового веб-сайта

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

    Примечание.

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

    Создание нового веб-сайта с помощью быстрого создания

    Создание нового веб-сайта с помощью быстрого создания

  4. Дождитесь создания нового веб-сайта .

  5. После создания веб-сайта щелкните ссылку в столбце URL-адреса . Убедитесь, что новый веб-сайт работает.

    Просмотр нового веб-сайта

    Просмотр нового веб-сайта

    Запущенный веб-сайт

    Запущенный веб-сайт

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

    Открытие страниц управления веб-сайтами

    Открытие страниц управления веб-сайтами

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

    Примечание.

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

    Скачивание профиля публикации веб-сайта

    Скачивание профиля публикации веб-сайта

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

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

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

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

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

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

    панель мониторинга сервера База данных SQL

    панель мониторинга сервера База данных SQL

  2. В следующей задаче вы протестируете подключение к базе данных из Visual Studio, по этой причине необходимо включить локальный IP-адрес в список разрешенных IP-адресов сервера. Для этого нажмите кнопку "Настроить", выберите IP-адрес из текущего IP-адреса клиента и вставьте его в текстовые поля Кнопка add-client-ip-address-ok-button "Начальный IP-адрес" и "Конечный IP-адрес".

    Добавление IP-адреса клиента

    Добавление IP-адреса клиента

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

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

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

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

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

    Публикация приложения

    Публикация веб-сайта

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

    Импорт профиля публикации

    Импорт профиля публикации

  3. Нажмите кнопку "Проверить подключение". После завершения проверки нажмите кнопку "Далее".

    Примечание.

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

    Проверка подключения

    Проверка подключения

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

    Конфигурация веб-развертывания

    Конфигурация веб-развертывания

  5. Настройте подключение к базе данных следующим образом:

    • В поле "Имя сервера" введите URL-адрес сервера База данных SQL с помощью префикса TCP.

    • В поле "Имя пользователя" введите имя входа администратора сервера.

    • Введите пароль для входа администратора сервера.

    • Введите новое имя базы данных, например MVC4SampleDB.

      Настройка конечного строка подключения

      Настройка конечного строка подключения

  6. Затем нажмите кнопку ОК. При появлении запроса на создание базы данных нажмите кнопку "Да".

    Создание базы данных

    Создание базы данных

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

    Строка подключения, указывающая на База данных SQL

    Строка подключения, указывающая на База данных SQL

  8. На странице предварительного просмотра нажмите кнопку "Опубликовать".

    Публикация веб-приложения

    Публикация веб-приложения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Щелкните правой кнопкой мыши место вставки фрагмента кода и выберите

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

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

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