Основы ASP.NET MVC 4

по веб-Camp командам

Скачать обучающий комплект Web Camp

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

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

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

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

Note

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

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

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

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

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

ASP.NET MVC 4 Essentials

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

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

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

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

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

Цели

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

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

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

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

Настройка

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

Для удобства большая часть кода, который вы будете управлять в этой лаборатории, доступна в виде фрагментов кода Visual Studio. Чтобы установить фрагменты кода, запустите файл .\саурце\сетуп\кодесниппетс.ВСИ .

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

Полнят

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

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

Note

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

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

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

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

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

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

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

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

  4. Измените имя на мвкмусиксторе.

  5. Задайте расположение решения в новой начальной папке в исходной папке этого упражнения, например [The-Холь-path] \Source\Ex01-CreatingMusicStoreProject\Begin. Нажмите кнопку ОК.

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

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

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

    ![Диалоговое окно "Создание проекта ASP.NET MVC 4"](aspnet-mvc-4-fundamentals/_static/image3.png "Диалоговое окно "Создание проекта ASP.NET MVC 4"")

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

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

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

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

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

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

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

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

      Note

      Платформа MVC требует, чтобы имена всех контроллеров завершались с "контроллером"— например, HomeController, Логинконтроллер или Продуктконтроллер.

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

    3. Представления. Эта папка является рекомендуемым расположением для представлений, компонентов, ответственных за отображение пользовательского интерфейса приложения. В представлениях используются файлы. aspx,. ascx,. cshtml и. master, а также любые другие файлы, связанные с представлениями подготовки отчетов. Папка Views содержит папку для каждого контроллера; папка называется префиксом имени контроллера. Например, если у вас есть контроллер с именем HomeController, в папке Views будет содержаться папка с именем Home. По умолчанию, когда платформа MVC ASP.NET загружает представление, она ищет ASPX-файл с запрошенным именем представления в папке Виевс\контроллернаме (views [controllerName] [Action]. aspx) или (views [ControllerName] [Action]. cshtml) для представлений Razor.

      Note

      В дополнение к папкам, перечисленным ранее, веб-приложение 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. Щелкните правой кнопкой мыши папку Controllers в Обозреватель решений, выберите Добавить , а затем — команду контроллера :

    ![Команда "добавить контроллер"](aspnet-mvc-4-fundamentals/_static/image5.png "Команда "добавить контроллер"")

    Команда добавления контроллера

  2. Откроется диалоговое окно Добавление контроллера . Присвойте контроллеру имя HomeController и нажмите кнопку Добавить.

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

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

  3. Файл HomeController.CS создается в папке Controllers . Чтобы HomeController возвращал строку в своем действии индекса, замените метод index следующим кодом:

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

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

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

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

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

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

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

    Note

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

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

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

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

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

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

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

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

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

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

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

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

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

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

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

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

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

Задача 2. изменение действий Стореконтроллер

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

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

    (Фрагмент кода — основы ASP.NET MVC 4 — EX2 Стореконтроллер index)

    public string Index()
    {
      return "Hello from Store.Index()";
    }
    
  2. Добавьте методы обзора и подробностей . Для этого добавьте в стореконтроллерследующий код:

    (Фрагмент кода — ASP.NET MVC 4 основы — EX2 Стореконтроллер бровсеанддетаилс)

    // 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 из Store. index ()" .

    2. /Сторе/бровсе. Вы увидите "Hello из Store. Browse ()" .

    3. /Сторе/детаилс. Вы увидите "Hello from Store. Details ()" .

      Просмотр Сторебровсе

      Просмотр/Сторе/бровсе

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

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

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

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

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

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

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

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

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

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

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

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

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

    (Фрагмент кода — ASP.NET MVC 4 основы — EX3 Стореконтроллер бровсемесод)

    // GET: /Store/Browse?genre=Disco   
    public string Browse(string genre)
    {
      string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
    
      return message;
    }
    

Note

Вы используете служебный метод HttpUtility. HtmlEncode , чтобы запретить пользователям внедрять JavaScript в представление со ссылкой, например /Сторе/бровсе? Жанр =<скрипт>Window. location = 'http://hackersite.com'</Script> .

Дополнительные объяснения см. в этой статье MSDN.

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

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

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

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

    Просмотр Сторебровсеженре = Disco

    Обзор/Сторе/бровсе? Жанр = Disco

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

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

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

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

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

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

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

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

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

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

    Просмотр StoreDetails5

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

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

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

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

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

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

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

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

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

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

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

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

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

    Note

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

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

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

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

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

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

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

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

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

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

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

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

    public class HomeController : Controller
    {
        //
        // GET: /Home/
    
        public ActionResult Index()
        {
            return this.View();
        }
    }
    
  2. Теперь необходимо добавить соответствующий шаблон представления. Для этого щелкните правой кнопкой мыши внутри метода действия индекса и выберите Добавить представление. Откроется диалоговое окно Добавление представления .

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

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

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

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

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

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

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

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

    Note

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

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

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

  5. Созданный шаблон представления основан на ранее определенном шаблоне _Layout. cshtml . Измените свойство ViewBag. Title на Home, а основное содержимое — на домашнюю страницу, как показано в следующем коде:

    @{
        ViewBag.Title = "Home";
    }
    
    <h2>This is the Home Page</h2>
    
  6. Выберите проект мвкмусиксторе в Обозреватель решений и нажмите клавишу F5 , чтобы запустить приложение.

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

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

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

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

  2. На домашней странице отображается приветственное сообщение, определенное в шаблоне представления \виевс\хоме\индекс.кштмл .

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

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

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

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

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

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

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

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

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

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

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

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

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

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

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

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

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

  4. Присвойте папке имя ViewModel.

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

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

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

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

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

    Создание класса Стореиндексвиевмодел

    Создание класса Стореиндексвиевмодел

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

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

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

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

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

    public class StoreIndexViewModel
    {
        public int NumberOfGenres { get; set; }
    
        public List<string> Genres { get; set; }
    }
    

Note

В нотации {Get; Set;} используется C#функция автоматического внедрения свойств. Он предоставляет преимущества свойства, не требуя объявления резервного поля.

Задача 3. обновление Стореконтроллер для использования Стореиндексвиевмодел

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

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

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

    Открытие класса Стореконтроллер

    Открытие класса Стореконтроллер

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

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

    using MvcMusicStore.ViewModels;
    
  3. Измените метод действия индекса стореконтроллертаким образом, чтобы он создавал и заполнил объект стореиндексвиевмодел , а затем передавал его в шаблон представления, чтобы создать HTML-ответ с ним.

    Note

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

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

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

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

Note

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

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

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

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

    Сборка проекта

    Сборка проекта

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

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

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

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

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

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

    Будет создан и открыт файл шаблона представления \виевс\сторе\индекс.кштмл . В зависимости от сведений, предоставленных в диалоговом окне Добавление представления на последнем шаге, шаблон представления будет предполагать, что экземпляр стореиндексвиевмодел используется в качестве данных для создания ответа HTML. Вы увидите, что шаблон наследует ViewPage<musicstore.viewmodels.storeindexviewmodel> в C#.

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

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

Note

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

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

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

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
> [!NOTE]
> As soon as you finish typing the period after the word **Model**, Visual Studio's Intellisense will show a list of possible properties and methods to choose from.
> 
> ![](aspnet-mvc-4-fundamentals/_static/image25.png)
> 
> *Getting Model properties and methods with Visual Studio's IntelliSense*
> 
> The **Model** property references the **StoreIndexViewModel** object that the Controller passed to the View template. This means that you can access all of the data passed from the Controller to the View template via the **Model** property, and format it into an appropriate HTML response within the View template.
> 
> You can just select the **NumberOfGenres** property from the Intellisense list rather than typing it in and then it will auto-complete it by pressing the **tab key**.
  1. Проведите перебор списка жанров в стореиндексвиевмодел и создайте список >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>
    
  2. Нажмите клавишу F5 , чтобы запустить приложение и просмотреть /Store. Вы увидите список жанров, переданных в объект стореиндексвиевмодел из Стореконтроллер в шаблон представления.

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

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

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

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

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

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

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

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

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

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

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

    3. Наконец, создайте решение, щелкнув build | Build Solution.

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта. С помощью средств управления питанием NuGet, указав версии пакетов в файле 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.CS, а затем нажмите кнопку Добавить.

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

    (Фрагмент кода — 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. Добавление Сторебровсевиевмодел

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

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

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

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

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
        }
    }
    
  3. Добавьте два свойства в класс сторебровсевиевмодел : Жанр и альбомы. Для этого добавьте следующий код:

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

    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; }
        }
    }
    

Note

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

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

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

Задача 3. Использование нового ViewModel в Стореконтроллер

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

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

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

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcMusicStore.ViewModels;
    using MvcMusicStore.Models;
    
  2. Замените метод действия Browse для использования класса сторевиевбровсеконтроллер . Вы создадите жанр и два новых объекта альбомов с фиктивными данными (в следующей практической лабораторной работе вы будете использовать реальные данные из базы данных). Для этого замените метод Browse следующим кодом:

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

    //
    // 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 , чтобы использовался класс сторевиевбровсеконтроллер . Вы создадите новый объект альбома , который будет возвращен в представление. Для этого замените метод Details следующим кодом:

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

    //
    // GET: /Store/Details/5
    
    public ActionResult Details(int id)
    {
      var album = new Album { Title = "Sample Album" };
    
      return this.View(album);
    }
    

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

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

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

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

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

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

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

  4. Измените значение свойства Browse. cshtml , чтобы отобразить сведения о жанре и получить доступ к объекту сторебровсевиевмодел , который передается в шаблон представления. Для этого замените содержимое следующим: (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 извлекает альбомы из действия метода Browse .

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

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

    Обзор хранилищ альбомов Disco

    Обзор хранилищ альбомов Disco

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

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

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

  2. В диалоговом окне Добавление представления убедитесь, что имя представления содержит сведения. Установите флажок создать строго типизированное представление и выберите альбом в раскрывающемся списке класс модели . Оставьте в других полях значения по умолчанию. Нажмите кнопку Добавить. Будет создан и открыт файл \виевс\сторе\детаилс.кштмл .

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

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

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

    @model MvcMusicStore.Models.Album
    
    @{
        ViewBag.Title = "Details";
    }
    
    <h2>Album: @Model.Title</h2>
    

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

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

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

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

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

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

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

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

    Note

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

    <a href ="/Сторе/бровсе? жанр =@genreName">@genreName&lt;/a&gt;

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

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

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

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

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

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

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

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

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

Задача 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);
    }
    

    Note

    Для доступа к свойствам можно также использовать синтаксис ViewBag ["звездочками"] .

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

    Добавление изображения Star в решение

    Добавление изображения Star в решение

  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. изучение шаблона Интернет приложения ASP.NET MVC 4

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

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

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

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

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

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

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

    Note

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

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

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

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

      Шаблоны с ASP.NET MVC 4

      Шаблоны с ASP.NET MVC 4

    2. Адаптивная визуализация

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

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

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

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

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

    ASP.NET MVC4-Internet-Application-Project-Template

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

    1. Разметка HTML5

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

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

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

    2. Включаемые библиотеки JavaScript

      1. jQuery: jQuery упрощает обход документов HTML, обработку событий, анимацию и взаимодействие AJAX.

      2. Пользовательский интерфейс jQuery. Эта библиотека предоставляет абстракции для низкоуровневого взаимодействия и анимации, расширенные эффекты и тематические мини-приложения, созданные на основе библиотеки jQuery JavaScript.

        Note

        Сведения о 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.

        Note

        Дополнительные сведения о библиотеке KnockOutJS можно получить по этой ссылке: http://learn.knockoutjs.com/.

      4. Modernizr: Эта библиотека запускается автоматически, делая сайт совместимым с более старыми браузерами при использовании технологий HTML5 и CSS3.

        Note

        Дополнительные сведения о библиотеке Modernizr можно получить по этой ссылке: http://www.modernizr.com/.

    3. Симплемембершип, включаемые в решение

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

      В шаблоне Интернета уже настроено несколько вещей для интеграции Симплемембершип, например, AccountController подготовлена к использованию Оаусвебсекурити (для регистрации учетной записи OAuth, входа, управления и т. д.) и веб-безопасности.

      Симплемембершип, включаемые в решение

      Симплемембершип, включаемые в решение

      Note

      Дополнительные сведения о оаусвебсекурити см. на сайте MSDN.

Note

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


Сводка

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

  • Основные элементы приложения MVC и их взаимодействие
  • Создание приложения ASP.NET MVC
  • Добавление и настройка контроллеров для управления параметрами, передаваемыми по URL-адресу и строке запроса
  • Добавление главной страницы макета для настройки шаблона для общего содержимого 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 для Web с помощью установщик веб-платформы Майкрософт.

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

  2. Щелкните Install Now (установить сейчас). Если у вас нет установщика веб-платформы , вы будете сначала перенаправлены на загрузку и установку.

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

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

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

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

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

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

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

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

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

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

    Установка завершена

    Установка завершена

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

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

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

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

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

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

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

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

    Note

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

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

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

  2. На панели команд щелкните создать .

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

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

  3. Щелкните Compute | веб-сайт. Затем выберите пункт Быстрое создание . Предоставьте доступный URL-адрес для нового веб-сайта и щелкните создать веб-сайт.

    Note

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

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

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

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

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

    Обзор нового веб-сайта

    Обзор нового веб-сайта

    Веб-сайт работает

    Веб-сайт работает

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

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

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

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

    Note

    Профиль публикации содержит все сведения, необходимые для публикации веб-приложения на веб-сайте 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 | серверы | панели мониторинга сервера. Если сервер не создан, можно создать его с помощью кнопки Добавить на панели команд. Запишите имя сервера и URL-адрес, имя для входа администратора и пароль, так как они будут использоваться в следующих задачах. Пока не создавайте базу данных, так как она будет создана на более позднем этапе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Note

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

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

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

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

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

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

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

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

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

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

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

      Настройка строки подключения к целевому объекту

      Настройка строки подключения к целевому объекту

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

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

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

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

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

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

  8. На странице Предварительный просмотр нажмите кнопку опубликовать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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