Основы ASP.NET MVC 4ASP.NET MVC 4 Fundamentals

по веб-Camp командамBy Web Camps Team

Скачать обучающий комплект Web CampDownload Web Camps Training Kit

Эта практическая лабораторная работа основана на музыкальном магазине MVC (контроллер представления модели), в котором представлено пошаговое руководство, в котором описывается, как использовать ASP.NET MVC и Visual Studio.This Hands-On Lab is based on MVC (Model View Controller) Music Store, a tutorial application that introduces and explains step-by-step how to use ASP.NET MVC and Visual Studio. В ходе лабораторной работы вы узнаете простоту, а также возможности использования этих технологий вместе.Throughout the lab you will learn the simplicity, yet power of using these technologies together. Вы начнете с простого приложения и начнете его сборку, пока не будет полностью функциональным веб-приложением ASP.NET MVC 4.You will start with a simple application and will build it until you have a fully functional ASP.NET MVC 4 Web Application.

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

Если вы хотите изучить версию учебного приложения ASP.NET MVC 3, ее можно найти в MVC-Music-Store.If you wish to explore the ASP.NET MVC 3 version of the tutorial application, you can find it in MVC-Music-Store.

В этой практической лабораторной работе предполагается, что у разработчика есть опыт работы с веб-разработками, например HTML и JavaScript.This Hands-On Lab assumes that the developer has experience in Web development technologies, such as HTML and JavaScript.

Note

Все примеры кода и фрагментов включены в набор средств для обучения Web Camp, доступный в выпусках Microsoft-Web/вебкамптраинингкит.All sample code and snippets are included in the Web Camps Training Kit, available at Microsoft-Web/WebCampTrainingKit Releases. Проект, относящийся к этой лабораторной работе, доступен по принципу ASP.NET MVC 4.The project specific to this lab is available at ASP.NET MVC 4 Fundamentals.

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

Веб-приложение музыкального магазина, которое будет построено в рамках этой лабораторной работы, состоит из трех основных частей: покупки, извлечения и администрирования.The Music Store web application that will be built throughout this Lab comprises three main parts: shopping, checkout, and administration. Посетители смогут просматривать альбомы по жанрам, добавлять в них альбомы, просматривать их выбор и, наконец, продолжить их извлечение для входа и выполнить заказ.Visitors will be able to browse albums by genre, add albums to their cart, review their selection and finally proceed to checkout to login and complete the order. Кроме того, Администраторы хранилища смогут управлять доступными альбомами, а также их основными свойствами.Additionally, store administrators will be able to manage the available albums as well as their main properties.

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

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

ASP.NET MVC 4 EssentialsASP.NET MVC 4 Essentials

Приложение музыкального магазина будет создано с использованием контроллера представления модели (MVC) , шаблон архитектуры, который разделяет приложение на три основных компонента:Music Store application will be built using Model View Controller (MVC), an architectural pattern that separates an application into three main components:

  • Модели: объекты модели — это части приложения, которые реализуют логику предметной области.Models: Model objects are the parts of the application that implement the domain logic. Часто объекты модели также извлекают и хранят состояние модели в базе данных.Often, model objects also retrieve and store model state in a database.
  • Представления: Представления — это компоненты, отображающие пользовательский интерфейс приложения.Views: Views are the components that display the application's user interface (UI). Пользовательский интерфейс обычно создается на основе данных модели.Typically, this UI is created from the model data. В качестве примера можно привести представление для редактирования альбомов, в котором отображаются текстовые поля и раскрывающийся список, основанный на текущем состоянии объекта альбома.An example would be the edit view of Albums that displays text boxes and a drop-down list based on the current state of an Album object.
  • Контроллеры: Контроллеры — это компоненты, которые управляют взаимодействием с пользователем, используют модель и в конечном итоге выбирают представление для отображения пользовательского интерфейса.Controllers: Controllers are the components that handle user interaction, manipulate the model, and ultimately select a view to render the UI. В приложении MVC представление служит только для отображения информации. Обработку введенных данных, формирование ответа и взаимодействие с пользователем обеспечивает контроллер.In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

Шаблон MVC помогает создавать приложения, которые отделяют различные аспекты приложения (логику ввода, бизнес-логику и логику пользовательского интерфейса), обеспечивая слабую связь между этими элементами.The MVC pattern helps you to create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. Это разделение помогает управлять сложностью при создании приложения, так как оно позволяет сосредоточиться на одном аспекте реализации за раз.This separation helps you manage complexity when you build an application, as it allows you to focus on one aspect of the implementation at a time. Кроме того, шаблон MVC упрощает тестирование приложений, а также позволяет использовать разработку на основе тестирования (TDD) для создания приложений.In addition, the MVC pattern makes it easy to test applications, also encouraging the use of test-driven development (TDD) for creating applications.

Платформа ASP.NET MVC предоставляет альтернативу шаблону веб-форм ASP.NET для создания веб-приложений на основе MVC ASP.NET.The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating ASP.NET MVC-based Web applications. ASP.NET MVC Framework — это упрощенная, хорошо тестируемая платформа для презентаций, которая (как и в приложениях на основе веб-форм) интегрирована с существующими функциями ASP.NET, такими как главные страницы и аутентификация на основе членства, чтобы вы могли получить всю мощь основной платформы .NET Framework.The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web-forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication so you get all the power of the core .NET framework. Это полезно, если вы уже знакомы с ASP.NET Web Forms, так как все уже используемые библиотеки доступны в ASP.NET MVC 4.This is useful if you are already familiar with ASP.NET Web Forms because all the libraries that you already use are available in ASP.NET MVC 4 as well.

Кроме того, слабая связь между тремя основными компонентами приложения MVC также способствует параллельной разработке.In addition, the loose coupling between the three main components of an MVC application also promotes parallel development. Например, один разработчик может работать с представлением, второй разработчик может работать с логикой контроллера, а третий разработчик может сосредоточиться на бизнес-логике в модели.For instance, one developer can work on the view, a second developer can work on the controller logic, and a third developer can focus on the business logic in the model.

ЦелиObjectives

В этой практической лабораторной работе вы узнаете, как выполнять следующие задачи:In this Hands-On Lab, you will learn how to:

  • Создание приложения ASP.NET MVC с нуля на основе учебника по приложениям музыкального магазинаCreate an ASP.NET MVC application from scratch based on the Music Store Application tutorial
  • Добавление контроллеров для обработки URL-адресов на домашней странице сайта и для обзора основных функцийAdd Controllers to handle URLs to the Home page of the site and for browsing its main functionality
  • Добавление представления для настройки отображаемого содержимого вместе с его стилемAdd a View to customize the content displayed along with its style
  • Добавление классов модели для хранения и управления данными и логикой предметной областиAdd Model classes to contain and manage data and domain logic
  • Использование шаблона представления модели для передачи сведений из действий контроллера в шаблоны представленийUse View Model pattern to pass information from controller actions to the view templates
  • Изучите новый шаблон ASP.NET MVC 4 для Интернет приложенийExplore the ASP.NET MVC 4 new template for internet applications

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

Для выполнения этой лабораторной работы необходимо иметь следующие элементы:You must have the following items to complete this lab:

НастройкаSetup

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

Для удобства большая часть кода, который вы будете управлять в этой лаборатории, доступна в виде фрагментов кода Visual Studio.For convenience, much of the code you will be managing along this lab is available as Visual Studio code snippets. Чтобы установить фрагменты кода, запустите файл .\саурце\сетуп\кодесниппетс.ВСИ .To install the code snippets run .\Source\Setup\CodeSnippets.vsi file.

Если вы не знакомы с фрагментами кода Visual Studio Code и хотите узнать, как их использовать, см. приложение в этом документе "приложении C: использование фрагментов кода".If you are not familiar with the Visual Studio Code Snippets, and want to learn how to use them, you can refer to the appendix from this document "Appendix C: Using Code Snippets".

ПолнятExercises

Эта практическая лабораторная работа состоит из следующих упражнений:This Hands-On Lab is comprised by the following exercises:

  1. Упражнение 1. Создание проекта веб-приложения Мусиксторе ASP.NET MVCExercise 1: Creating MusicStore ASP.NET MVC Web Application Project
  2. Упражнение 2. Создание контроллераExercise 2: Creating a Controller
  3. Упражнение 3. Передача параметров в контроллерExercise 3: Passing parameters to a Controller
  4. Упражнение 4. Создание представленияExercise 4: Creating a View
  5. Упражнение 5. Создание модели представленияExercise 5: Creating a View Model
  6. Упражнение 6. Использование параметров в представленииExercise 6: Using parameters in View
  7. Упражнение 7. Создание шаблона на основе ASP.NET MVC 4Exercise 7: A lap around ASP.NET MVC 4 New Template

Note

Каждое упражнение сопровождается конечной папкой, содержащей итоговое решение, которое следует получить после завершения упражнений.Each exercise is accompanied by an End folder containing the resulting solution you should obtain after completing the exercises. Это решение можно использовать в качестве инструкции, если вам нужна дополнительная помощь по работе с упражнениями.You can use this solution as a guide if you need additional help working through the exercises.

Предполагаемое время выполнения этой лабораторной работы: 60 минут.Estimated time to complete this lab: 60 minutes.

Упражнение 1. Создание проекта веб-приложения Мусиксторе ASP.NET MVCExercise 1: Creating MusicStore ASP.NET MVC Web Application Project

В этом упражнении вы узнаете, как создать приложение ASP.NET MVC в Visual Studio 2012 Express для Web, а также в основной организации папок.In this exercise, you will learn how to create an ASP.NET MVC application in Visual Studio 2012 Express for Web as well as its main folder organization. Кроме того, вы узнаете, как добавить новый контроллер и сделать так, чтобы на домашней странице приложения отображалась простая строка.Additionally, you will learn how to add a new Controller and make it display a simple string in the application's home page.

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

  1. В этой задаче будет создан пустой проект приложения ASP.NET MVC с помощью шаблона MVC Visual Studio.In this task, you will create an empty ASP.NET MVC application project using the MVC Visual Studio template. Запустите VS Express для Web.Start VS Express for Web.

  2. В меню Файл выберите пункт Создать проект.On the File menu, click New Project.

  3. В диалоговом окне Новый проект выберите тип проекта веб-приложение ASP.NET MVC 4 , расположенный в разделе C#Visual, список веб- шаблонов.In the New Project dialog box select the ASP.NET MVC 4 Web Application project type, located under Visual C#, Web template list.

  4. Измените имя на мвкмусиксторе.Change the Name to MvcMusicStore.

  5. Задайте расположение решения в новой начальной папке в исходной папке этого упражнения, например [The-Холь-path] \Source\Ex01-CreatingMusicStoreProject\Begin.Set the location of the solution inside a new Begin folder in this Exercise's Source folder, for example [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Нажмите кнопку ОК.Click OK.

    Диалоговое окно «Создание нового проекта»Create New Project Dialog Box

    Диалоговое окно «Создание нового проекта»Create New Project Dialog Box

  6. В диалоговом окне Новый проект ASP.NET MVC 4 выберите базовый шаблон и убедитесь, что для обработчика представлений выбрано значение Razor.In the New ASP.NET MVC 4 Project dialog box select the Basic template and make sure that the View engine selected is Razor. Нажмите кнопку ОК.Click OK.

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

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

Задача 2. изучение структуры решенияTask 2 - Exploring the Solution Structure

Платформа ASP.NET MVC включает шаблон проекта Visual Studio, который помогает создавать веб-приложения, поддерживающие шаблон MVC.The ASP.NET MVC framework includes a Visual Studio project template that helps you create Web applications supporting the MVC pattern. Этот шаблон создает новое веб-приложение ASP.NET MVC с необходимыми папками, шаблонами элементов и записями файла конфигурации.This template creates a new ASP.NET MVC Web application with the required folders, item templates, and configuration-file entries.

В этой задаче будет рассмотрена структура решения, чтобы понять, какие элементы участвуют в работе, и их связи.In this task, you will examine the solution structure to understand the elements that are involved and their relationships. Следующие папки включены во все приложение ASP.NET MVC, так как платформа ASP.NET MVC по умолчанию использует "ное соглашение по сравнению с конфигурацией" и делает некоторые предположения по умолчанию на основе соглашений об именовании папок.The following folders are included in all the ASP.NET MVC application because the ASP.NET MVC framework by default uses a "convention over configuration" approach, and makes some default assumptions based on folder naming conventions.

  1. После создания проекта проверьте структуру папок, созданную в обозреватель решений с правой стороны:Once the project is created, review the folder structure that has been created in the Solution Explorer on the right side:

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

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

    1. Контроллеры.Controllers. В этой папке будут содержаться классы контроллеров.This folder will contain the controller classes. В приложении на основе MVC контроллеры отвечают за обработку взаимодействия с конечным пользователем, управление моделью и в конечном итоге выбор представления для отрисовки пользовательского интерфейса.In an MVC based application, controllers are responsible for handling end user interaction, manipulating the model, and ultimately choosing a view to render the UI.

      Note

      Платформа MVC требует, чтобы имена всех контроллеров завершались с "контроллером"— например, HomeController, Логинконтроллер или Продуктконтроллер.The MVC framework requires the names of all controllers to end with "Controller"-for example, HomeController, LoginController, or ProductController.

    2. Модели.Models. Эта папка предоставляется для классов, представляющих модель приложения для веб-приложения MVC.This folder is provided for classes that represent the application model for the MVC Web application. Обычно это включает код, определяющий объекты и логику для взаимодействия с хранилищем данных.This usually includes code that defines objects and the logic for interacting with the data store. Сами объекты модели обычно располагаются в отдельных библиотеках классов.Typically, the actual model objects will be in separate class libraries. Однако при создании нового приложения можно включить классы, а затем переместить их в отдельные библиотеки классов на более поздней стадии цикла разработки.However, when you create a new application, you might include classes and then move them into separate class libraries at a later point in the development cycle.

    3. Представления.Views. Эта папка является рекомендуемым расположением для представлений, компонентов, ответственных за отображение пользовательского интерфейса приложения.This folder is the recommended location for views, the components responsible for displaying the application's user interface. В представлениях используются файлы. aspx,. ascx,. cshtml и. master, а также любые другие файлы, связанные с представлениями подготовки отчетов.Views use .aspx, .ascx, .cshtml and .master files, in addition to any other files that are related to rendering views. Папка Views содержит папку для каждого контроллера; папка называется префиксом имени контроллера.Views folder contains a folder for each controller; the folder is named with the controller-name prefix. Например, если у вас есть контроллер с именем HomeController, в папке Views будет содержаться папка с именем Home.For example, if you have a controller named HomeController, the Views folder will contain a folder named Home. По умолчанию, когда платформа MVC ASP.NET загружает представление, она ищет ASPX-файл с запрошенным именем представления в папке Виевс\контроллернаме (views [controllerName] [Action]. aspx) или (views [ControllerName] [Action]. cshtml) для представлений Razor.By default, when the ASP.NET MVC framework loads a view, it looks for an .aspx file with the requested view name in the Views\controllerName folder (Views[ControllerName][Action].aspx) or (Views[ControllerName][Action].cshtml) for Razor Views.

      Note

      В дополнение к папкам, перечисленным ранее, веб-приложение MVC использует файл Global. asax для установки глобальных URL-адресов по умолчанию и использует файл Web. config для настройки приложения.In addition to the folders listed previously, an MVC Web application uses the Global.asax file to set global URL routing defaults, and it uses the Web.config file to configure the application.

Задача 3. Добавление HomeControllerTask 3 - Adding a HomeController

В приложениях ASP.NET, не использующих платформу MVC, взаимодействие с пользователем организовано по страницам, а вокруг этих страниц создается и обрабатывается событие.In ASP.NET applications that do not use the MVC framework, user interaction is organized around pages, and around raising and handling events from those pages. В отличие от этого, взаимодействие пользователей с приложениями ASP.NET MVC организовано вокруг контроллеров и методов действий.In contrast, user interaction with ASP.NET MVC applications is organized around controllers and their action methods.

С другой стороны, ASP.NET платформа MVC сопоставляет URL-адреса классам, которые называются контроллерами.On the other hand, ASP.NET MVC framework maps URLs to classes that are referred to as controllers. Контроллеры обрабатывают входящие запросы, управляют вводом и взаимодействием пользователя, выполняют соответствующую логику приложения и определяют ответ для отправки клиенту (отображение HTML, скачивание файла, перенаправление на другой URL-адрес и т. д.).Controllers process incoming requests, handle user input and interactions, execute appropriate application logic and determine the response to send back to the client (display HTML, download a file, redirect to a different URL, etc.). В случае отображения HTML класс контроллера обычно вызывает отдельный компонент представления для создания разметки HTML для запроса.In the case of displaying HTML, a controller class typically calls a separate view component to generate the HTML markup for the request. В приложении MVC представление служит только для отображения информации. Обработку введенных данных, формирование ответа и взаимодействие с пользователем обеспечивает контроллер.In an MVC application, the view only displays information; the controller handles and responds to user input and interaction.

В этой задаче вы добавите класс контроллера, который будет выполнять обработку URL-адресов на домашней странице сайта музыкального магазина.In this task, you will add a Controller class that will handle URLs to the Home page of the Music Store site.

  1. Щелкните правой кнопкой мыши папку Controllers в Обозреватель решений, выберите Добавить , а затем — команду контроллера :Right-click Controllers folder within the Solution Explorer, select Add and then Controller command:

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

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

  2. Откроется диалоговое окно Добавление контроллера .The Add Controller dialog appears. Присвойте контроллеру имя HomeController и нажмите кнопку Добавить.Name the controller HomeController and press Add.

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

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

  3. Файл HomeController.CS создается в папке Controllers .The file HomeController.cs is created in the Controllers folder. Чтобы HomeController возвращал строку в своем действии индекса, замените метод index следующим кодом:In order to have the HomeController return a string on its Index action, replace the Index method with the following code:

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

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

Задача 4. Запуск приложенияTask 4 - Running the Application

В этой задаче вы попробуете выполнить приложение в веб-браузере.In this task, you will try out the Application in a web browser.

  1. Нажмите клавишу F5 , чтобы запустить приложение.Press F5 to run the Application. Проект компилируется, и запускается локальный веб-сервер IIS.The project is compiled and the local IIS Web Server starts. Локальный веб-сервер IIS автоматически откроет веб-браузер, указывающий на URL веб-сервера.The local IIS Web Server will automatically open a web browser pointing to the URL of the Web server.

    Приложение, работающее в веб-браузереApplication running in a web browser

    Приложение, работающее в веб-браузереApplication running in a web browser

    Note

    Локальный веб-сервер IIS запустит веб-сайт на случайный номер порта с произвольным номером.The local IIS Web Server will run the website on a random free port number. На рисунке выше сайт работает на http://localhost:50103/, поэтому он использует порт 50103.In the figure above, the site is running at http://localhost:50103/, so it's using port 50103. Номер порта может отличаться.Your port number may vary.

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

Упражнение 2. Создание контроллераExercise 2: Creating a Controller

В этом упражнении вы узнаете, как обновить контроллер, чтобы реализовать простую функциональность приложения музыкального магазина.In this exercise, you will learn how to update the controller to implement simple functionality of the Music Store application. Этот контроллер будет определять методы действий для обработки каждого из следующих запросов:That controller will define action methods to handle each of the following specific requests:

  • Страница со списком жанров музыки в музыкальном магазинеA listing page of the music genres in the Music Store
  • Страница обзора, на которой перечислены все альбомы музыки для определенного жанраA browse page that lists all of the music albums for a particular genre
  • Страница сведений, на которой отображаются сведения о конкретном музыкальном альбомеA details page that shows information about a specific music album

В рамках этого упражнения эти действия будут просто возвращать строку.For the scope of this exercise, those actions will simply return a string by now.

Задача 1. Добавление нового класса СтореконтроллерTask 1 - Adding a New StoreController Class

В этой задаче будет добавлен новый контроллер.In this task, you will add a new Controller.

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

  2. В меню файл выберите команду Открыть проект.In the File menu, choose Open Project. В диалоговом окне Открытие проекта перейдите к Source\Ex02-CreatingAController\Begin, выберите Begin. sln и нажмите кнопку Открыть.In the Open Project dialog, browse to Source\Ex02-CreatingAController\Begin, select Begin.sln and click Open. Кроме того, вы можете продолжить работу с решением, полученным после завершения предыдущего упражнения.Alternatively, you may continue with the solution that you obtained after completing the previous exercise.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Для этого в меню проект выберите пункт Управление пакетами NuGet.To do this, click the Project menu and select Manage NuGet Packages.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

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

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Добавьте новый контроллер.Add the new controller. Для этого щелкните правой кнопкой мыши папку Controllers в Обозреватель решений, выберите Добавить , а затем — команду контроллер .To do this, right-click the Controllers folder within the Solution Explorer, select Add and then the Controller command. Измените имя контроллера на стореконтроллери нажмите кнопку добавить.Change the Controller Name to StoreController, and click Add.

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

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

Задача 2. изменение действий СтореконтроллерTask 2 - Modifying the StoreController's Actions

В этой задаче будут изменены методы контроллера, которые называются действиями.In this task, you will modify the Controller methods that are called actions. Действия отвечают за обработку запросов URL-адресов и определение содержимого, которое должно быть отправлено обратно браузеру или пользователю, вызвавшему этот URL-адрес.Actions are responsible for handling URL requests and determining the content that should be sent back to the browser or user that invoked the URL.

  1. Класс стореконтроллер уже имеет метод индекса .The StoreController class already has an Index method. Он будет использоваться позже в этой лабораторной работе для реализации страницы со списком всех жанров музыкального магазина.You will use it later in this Lab to implement the page that lists all genres of the music store. Сейчас просто замените метод index следующим кодом, который возвращает строку "Hello из Store. index ()":For now, just replace the Index method with the following code that returns a string "Hello from Store.Index()":

    (Фрагмент кода — основы ASP.NET MVC 4 — EX2 Стореконтроллер index)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex2 StoreController Index)

    public string Index()
    {
      return "Hello from Store.Index()";
    }
    
  2. Добавьте методы обзора и подробностей .Add Browse and Details methods. Для этого добавьте в стореконтроллерследующий код:To do this, add the following code to the StoreController:

    (Фрагмент кода — ASP.NET MVC 4 основы — EX2 Стореконтроллер бровсеанддетаилс)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex2 StoreController BrowseAndDetails)

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

Задача 3. Запуск приложенияTask 3 - Running the Application

В этой задаче вы попробуете выполнить приложение в веб-браузере.In this task, you will try out the Application in a web browser.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Измените URL-адрес, чтобы проверить реализацию каждого действия.Change the URL to verify each action's implementation.

    1. /Store./Store. Вы увидите "Hello из Store. index ()" .You will see "Hello from Store.Index()".

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

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

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

      Просмотр/Сторе/бровсеBrowsing /Store/Browse

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

Упражнение 3. Передача параметров в контроллерExercise 3: Passing parameters to a Controller

До настоящего момента вы возвращали постоянные строки из контроллеров.Until now, you have been returning constant strings from the Controllers. В этом упражнении вы узнаете, как передавать параметры в контроллер с помощью URL-адреса и строки запроса, а затем сделать так, чтобы действия метода реагировали на текст в браузере.In this exercise you will learn how to pass parameters to a Controller using the URL and querystring, and then making the method actions respond with text to the browser.

Задача 1. Добавление параметра жанра в СтореконтроллерTask 1 - Adding Genre Parameter to StoreController

В этой задаче вы будете использовать строку запроса для отправки параметров в метод действия Browse в стореконтроллер.In this task, you will use the querystring to send parameters to the Browse action method in the StoreController.

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

  2. В меню файл выберите команду Открыть проект.In the File menu, choose Open Project. В диалоговом окне Открытие проекта перейдите к Source\Ex03-PassingParametersToAController\Begin, выберите Begin. sln и нажмите кнопку Открыть.In the Open Project dialog, browse to Source\Ex03-PassingParametersToAController\Begin, select Begin.sln and click Open. Кроме того, вы можете продолжить работу с решением, полученным после завершения предыдущего упражнения.Alternatively, you may continue with the solution that you obtained after completing the previous exercise.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Для этого в меню проект выберите пункт Управление пакетами NuGet.To do this, click the Project menu and select Manage NuGet Packages.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

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

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Откройте класс стореконтроллер .Open StoreController class. Для этого в Обозреватель решенийразверните папку Controllers и дважды щелкните StoreController.CS.To do this, in the Solution Explorer, expand the Controllers folder and double-click StoreController.cs.

  4. Измените метод Browse , добавив строковый параметр для запроса определенного жанра.Change the Browse method, adding a string parameter to request for a specific genre. ASP.NET MVC автоматически передает любые параметры QueryString или формы POST с именем жанра в этот метод действия при вызове.ASP.NET MVC will automatically pass any querystring or form post parameters named genre to this action method when invoked. Для этого замените метод Browse следующим кодом:To do this, replace the Browse method with the following code:

    (Фрагмент кода — ASP.NET MVC 4 основы — EX3 Стореконтроллер бровсемесод)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex3 StoreController BrowseMethod)

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

Note

Вы используете служебный метод HttpUtility. HtmlEncode , чтобы запретить пользователям внедрять JavaScript в представление со ссылкой, например /Сторе/бровсе? Жанр =<скрипт>Window. location = 'http://hackersite.com'</Script> .You are using the HttpUtility.HtmlEncode utility method to prevents users from injecting Javascript into the View with a link like /Store/Browse?Genre=<script>window.location='http://hackersite.com'</script>.

Дополнительные объяснения см. в этой статье MSDN.For further explanation, please visit this msdn article.

Задача 2. Запуск приложенияTask 2 - Running the Application

В этой задаче вы попробуете использовать приложение в веб-браузере и запустите параметр Жанр .In this task, you will try out the Application in a web browser and use the genre parameter.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Изменить URL-адрес на /Сторе/бровсе? Жанр = Disco , чтобы убедиться, что действие получает параметр жанра.Change the URL to /Store/Browse?Genre=Disco to verify that the action receives the genre parameter.

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

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

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

Задача 3. Добавление параметра идентификатора, внедренного в URL-адресTask 3 - Adding an Id Parameter Embedded in the URL

В этой задаче вы будете использовать URL-адрес для передачи параметра ID методу действия Details объекта стореконтроллер.In this task, you will use the URL to pass an Id parameter to the Details action method of the StoreController. Соглашение о маршрутизации по умолчанию для ASP.NET MVC состоит в том, чтобы обрабатывать сегмент URL-адреса после имени метода действия в качестве параметра с именем ID. Если у метода действия есть параметр с именем ID, ASP.NET MVC автоматически передаст сегмент URL-адреса в качестве параметра.ASP.NET MVC's default routing convention is to treat the segment of a URL after the action method name as a parameter named Id. If your action method has parameter named Id, then ASP.NET MVC will automatically pass the URL segment to you as a parameter. В хранилище URL-адресов/ Details/5 идентификатор будет интерпретирован как 5.In the URL Store/Details/5, Id will be interpreted as 5.

  1. Измените метод Details объекта стореконтроллер, добавив параметр int с именем ID. Для этого замените метод Details следующим кодом:Change the Details method of the StoreController, adding an int parameter called id. To do this, replace the Details method with the following code:

    (Фрагмент кода — ASP.NET MVC 4 основы — EX3 Стореконтроллер детаилсмесод)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex3 StoreController DetailsMethod)

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

Задача 4. Запуск приложенияTask 4 - Running the Application

В этой задаче вы попробуете выполнить приложение в веб-браузере и будете использовать параметр ID .In this task, you will try out the Application in a web browser and use the Id parameter.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Измените URL-адрес на /Store/Details/5 , чтобы убедиться, что действие получает параметр ID.Change the URL to /Store/Details/5 to verify that the action receives the id parameter.

    Просмотр StoreDetails5Browsing StoreDetails5

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

Упражнение 4. Создание представленияExercise 4: Creating a View

До сих пор вы вернули строки из действий контроллера.So far you have been returning strings from controller actions. Хотя это полезный способ понять, как работают контроллеры, это не то, как создаются реальные веб-приложения.Although that is a useful way of understanding how controllers work, it is not how your real Web applications are built. Представления — это компоненты, обеспечивающие лучший подход к созданию HTML обратно в браузере с использованием файлов шаблонов.Views are components that provide a better approach for generating HTML back to the browser with the use of template files.

В этом упражнении вы узнаете, как добавить главную страницу макета, чтобы настроить шаблон для общего содержимого HTML, таблицу стилей для улучшения внешнего вида веб-узла и, наконец, шаблон представления, позволяющий HomeController вернуть HTML.In this exercise you will learn how to add a layout master page to setup a template for common HTML content, a StyleSheet to enhance the look and feel of the site and finally a View template to enable HomeController to return HTML.

Задача 1. изменение файла _Layout. cshtmlTask 1 - Modifying the file _layout.cshtml

Файл ~/виевс/шаред/_Layout. cshtml позволяет настроить шаблон для общего HTML-кода, который будет использоваться во всем веб-сайте.The file ~/Views/Shared/_layout.cshtml allows you to setup a template for common HTML to use across the entire website. В этой задаче будет добавлена эталонная страница макета со стандартным заголовком со ссылками на домашнюю страницу и область хранения.In this task you will add a layout master page with a common header with links to the Home page and Store area.

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

  2. В меню файл выберите команду Открыть проект.In the File menu, choose Open Project. В диалоговом окне Открытие проекта перейдите к Source\Ex04-CreatingAView\Begin, выберите Begin. sln и нажмите кнопку Открыть.In the Open Project dialog, browse to Source\Ex04-CreatingAView\Begin, select Begin.sln and click Open. Кроме того, вы можете продолжить работу с решением, полученным после завершения предыдущего упражнения.Alternatively, you may continue with the solution that you obtained after completing the previous exercise.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Для этого в меню проект выберите пункт Управление пакетами NuGet.To do this, click the Project menu and select Manage NuGet Packages.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

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

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Файл _Layout. cshtml содержит макет контейнера HTML для всех страниц сайта.The file _layout.cshtml contains the HTML container layout for all pages on the site. Он включает элемент <html> для ответа HTML, а также элементы <head> и <Body> .It includes the <html> element for the HTML response, as well as the <head> and <body> elements. @RenderBody() в тексте HTML определяет регионы, в которых шаблоны просмотра могут заполняться динамическим содержимым.@RenderBody() within the HTML body identify regions that view templates will be able to fill in with dynamic content. C#(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. Добавьте общий заголовок со ссылками на домашнюю страницу и область хранения на всех страницах сайта.Add a common header with links to the Home page and Store area on all pages in the site. Для этого добавьте следующий код, приведенный ниже <текстовой инструкции>.In order to do that, add the following code below <body> statement. C#(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, чтобы отобразить раздел текста на каждой странице.Include a div to render the body section of each page. Замените @RenderBody() следующим выделенным кодом: (C#)Replace @RenderBody() with the following highlighted code: (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

    Знаете ли вы?Did you know? В Visual Studio 2012 есть фрагменты кода, которые упрощают добавление часто используемых кодов в HTML, файлы кода и многое другое.Visual Studio 2012 has snippets that make it easy to add commonly used code in HTML, code files and more! Попробуйте ввести <div> и дважды нажмите клавишу Tab , чтобы вставить полный тег div .Try it out by typing <div> and pressing TAB twice to insert a complete div tag.

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

Шаблон пустого проекта содержит очень упрощенный файл CSS, который содержит только стили, используемые для вывода базовых форм и сообщений о проверке.The empty project template includes a very streamlined CSS file which just includes styles used to display basic forms and validation messages. Для улучшения внешнего вида веб-узла будут использоваться дополнительные CSS и изображения (потенциально предоставляемые конструктором).You will use additional CSS and images (potentially provided by a designer) in order to enhance the look and feel of the site.

В этой задаче будет добавлена таблица стилей CSS для определения стилей сайта.In this task, you will add a CSS stylesheet to define the styles of the site.

  1. Файл CSS и изображения включаются в папку саурце\ассетс\контент этой лабораторной работы.The CSS file and images are included in the Source\Assets\Content folder of this Lab. Чтобы добавить их в приложение, перетащите его содержимое из окна проводника Windows в Обозреватель решений в Visual Studio Express для Web, как показано ниже:In order to add them to the application, drag their content from a Windows Explorer window into the Solution Explorer in Visual Studio Express for Web, as shown below:

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

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

  2. Появится диалоговое окно с предупреждением, в котором запрашивается подтверждение замены файла site. CSS и некоторых существующих образов.A warning dialog will appear, asking for confirmation to replace Site.css file and some existing images. Установите флажок Применить ко всем элементам и нажмите кнопку Да.Check Apply to all items and click Yes.

Задача 3. Добавление шаблона представленияTask 3 - Adding a View Template

В этой задаче будет добавлен шаблон представления для создания ответа HTML, который будет использовать главную страницу макета и CSS, добавленные в этом упражнении.In this task, you will add a View template to generate the HTML response that will use the layout master page and CSS added in this exercise.

  1. Чтобы использовать шаблон представления при просмотре домашней страницы сайта, необходимо сначала указать, что вместо возврата строки метод HomeController index вернет представление.To use a View template when browsing the site's home page, you will first need to indicate that instead of returning a string, the HomeController Index method will return a View. Откройте класс HomeController и измените его метод index , чтобы он возвращал объект ActionResultи возвращал представление () .Open HomeController class and change its Index method to return an ActionResult, and have it return View().

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

    public class HomeController : Controller
    {
        //
        // GET: /Home/
    
        public ActionResult Index()
        {
            return this.View();
        }
    }
    
  2. Теперь необходимо добавить соответствующий шаблон представления.Now, you need to add an appropriate View template. Для этого щелкните правой кнопкой мыши внутри метода действия индекса и выберите Добавить представление.To do this, right-click inside the Index action method and select Add View. Откроется диалоговое окно Добавление представления .This will bring up the Add View dialog.

    Добавление представления из метода indexAdding a View from within the Index method

    Добавление представления из метода indexAdding a View from within the Index method

  3. Появится диалоговое окно Добавление представления для создания файла шаблона представления.The Add View Dialog will appear to generate a View template file. По умолчанию это диалоговое окно предварительно заполняет имя шаблона представления, чтобы оно соответствовало методу действия, который будет его использовать.By default, this dialog pre-populates the name of the View template so that it matches the action method that will use it. Поскольку вы использовали контекстное меню Добавить представление в методе действия индекса в HomeController, в диалоговом окне Добавление представления в качестве имени представления по умолчанию используется индекс.Because you used the Add View context menu within the Index action method within the HomeController, the Add View dialog has Index as the default view name. Нажмите кнопку Добавить.Click Add.

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

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

  4. Visual Studio создаст шаблон представления index. cshtml в папке Views\Home , а затем откроет его.Visual Studio generates an Index.cshtml view template inside the Views\Home folder and then opens it.

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

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

    Note

    имя и расположение файла index. cshtml являются релевантными и следуют соглашениям об именовании ASP.NET MVC по умолчанию.name and location of the Index.cshtml file is relevant and follows the default ASP.NET MVC naming conventions.

    Папка \Виевс*Home* соответствует имени контроллера (домашний контроллер).The folder \Views*Home* matches the controller name (Home Controller). Имя шаблона представления (индекс) соответствует методу действия контроллера, который будет отображать представление.The View template name (Index), matches the controller action method which will be displaying the View.

    Таким образом, ASP.NET MVC позволяет избежать необходимости явно указывать имя или расположение шаблона представления при использовании этого соглашения об именовании для возвращения представления.This way, ASP.NET MVC avoids having to explicitly specify the name or location of a View template when using this naming convention to return a View.

  5. Созданный шаблон представления основан на ранее определенном шаблоне _Layout. cshtml .The generated View template is based on the _layout.cshtml template earlier defined. Измените свойство ViewBag. Title на Home, а основное содержимое — на домашнюю страницу, как показано в следующем коде:Update the ViewBag.Title property to Home, and change the main content to This is the Home Page, as shown in the code below:

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

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

Чтобы убедиться в правильности выполнения всех действий, описанных в предыдущем упражнении, выполните следующие действия.In order to verify that you have correctly performed all the steps in the previous exercise, proceed as follows:

Если приложение открыто в браузере, следует отметить следующее:With the application opened in a browser, you should note that:

  1. Метод действия индекса HomeController находит и отображает шаблон представления \виевс\хоме\индекс.кштмл , несмотря на то, что в коде, именуемом, возвращается View () , так как шаблон представления, за которым следует стандартное соглашение об именовании.The HomeController's Index action method found and displayed the \Views\Home\Index.cshtml View template, even though the code called return View(), because the View template followed the standard naming convention.

  2. На домашней странице отображается приветственное сообщение, определенное в шаблоне представления \виевс\хоме\индекс.кштмл .The Home Page displays the welcome message defined within the \Views\Home\Index.cshtml view template.

  3. Домашняя страница использует шаблон _Layout. cshtml , поэтому приветственное сообщение содержится в макете HTML для стандартного сайта.The Home Page is using the _layout.cshtml template, and so the welcome message is contained within the standard site HTML layout.

    Представление домашнего индекса с использованием определенного Лайаутпаже и стиляHome Index View using the defined LayoutPage and style

    Представление домашнего индекса с использованием определенного Лайаутпаже и стиляHome Index View using the defined LayoutPage and style

Упражнение 5. Создание модели представленияExercise 5: Creating a View Model

Пока вы сделали так, чтобы в представлениях отображался жестко закодированный HTML, но для создания динамических веб-приложений шаблон представления должен получить сведения от контроллера.So far, you made your Views display hardcoded HTML, but, in order to create dynamic web applications, the View template should receive information from the Controller. Одним из распространенных способов использования этой цели является шаблон ViewModel , который позволяет контроллеру упаковать всю информацию, необходимую для создания соответствующего HTML-ответа.One common technique to be used for that purpose is the ViewModel pattern, which allows a Controller to package up all the information needed to generate the appropriate HTML response.

В этом упражнении вы узнаете, как создать класс ViewModel и добавить необходимые свойства: количество жанров в магазине и список этих жанров.In this exercise, you will learn how to create a ViewModel class and add the required properties: the number of genres in the store and a list of those genres. Вы также обновите Стореконтроллер для использования созданного ViewModel и, наконец, создадите новый шаблон представления, который будет отображать указанные свойства на странице.You will also update the StoreController to use the created ViewModel, and finally, you will create a new View template that will display the mentioned properties in the page.

Задача 1. Создание класса ViewModelTask 1 - Creating a ViewModel Class

В этой задаче будет создан класс ViewModel, который будет реализовывать сценарий Store со списком жанров.In this task, you will create a ViewModel class that will implement the Store genre listing scenario.

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

  2. В меню файл выберите команду Открыть проект.In the File menu, choose Open Project. В диалоговом окне Открытие проекта перейдите к Source\Ex05-CreatingAViewModel\Begin, выберите Begin. sln и нажмите кнопку Открыть.In the Open Project dialog, browse to Source\Ex05-CreatingAViewModel\Begin, select Begin.sln and click Open. Кроме того, вы можете продолжить работу с решением, полученным после завершения предыдущего упражнения.Alternatively, you may continue with the solution that you obtained after completing the previous exercise.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Для этого в меню проект выберите пункт Управление пакетами NuGet.To do this, click the Project menu and select Manage NuGet Packages.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

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

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Создайте папку ViewModels для хранения ViewModel.Create a ViewModels folder to hold the ViewModel. Для этого щелкните правой кнопкой мыши проект мвкмусиксторе верхнего уровня, выберите Добавить , а затем — создать папку.To do this, right-click the top-level MvcMusicStore project, select Add and then New Folder.

    Добавление новой папкиAdding a new folder

    Добавление новой папкиAdding a new folder

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

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

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

  5. Создайте класс ViewModel .Create a ViewModel class. Для этого щелкните правой кнопкой мыши папку ViewModels , созданную недавно, и выберите Добавить , а затем новый элемент.To do this, right-click on the ViewModels folder recently created, select Add and then New Item. В разделе кодвыберите элемент класса и назовите файл StoreIndexViewModel.CS, а затем нажмите кнопку Добавить.Under Code, choose the Class item and name the file StoreIndexViewModel.cs, then click Add.

    Добавление нового классаAdding a new Class

    Добавление нового классаAdding a new Class

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

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

Задача 2. Добавление свойств в класс ViewModelTask 2 - Adding Properties to the ViewModel class

Существует два параметра, которые необходимо передать из Стореконтроллер в шаблон представления, чтобы создать ожидаемый ответ HTML: количество жанров в магазине и список этих жанров.There are two parameters to be passed from the StoreController to the View template in order to generate the expected HTML response: the number of genres in the store and a list of those genres.

В этой задаче вы добавите эти 2 свойства в класс стореиндексвиевмодел : нумберофженрес (целое число) и жанры (список строк).In this task, you will add those 2 properties to the StoreIndexViewModel class: NumberOfGenres (an integer) and Genres (a list of strings).

  1. Добавьте свойства нумберофженрес и жанры в класс стореиндексвиевмодел .Add NumberOfGenres and Genres properties to the StoreIndexViewModel class. Для этого добавьте следующие 2 строки в определение класса:To do this, add the following 2 lines to the class definition:

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

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

Note

В нотации {Get; Set;} используется C#функция автоматического внедрения свойств.The { get; set; } notation makes use of C#'s auto-implemented properties feature. Он предоставляет преимущества свойства, не требуя объявления резервного поля.It provides the benefits of a property without requiring us to declare a backing field.

Задача 3. обновление Стореконтроллер для использования СтореиндексвиевмоделTask 3 - Updating StoreController to use the StoreIndexViewModel

Класс стореиндексвиевмодел инкапсулирует сведения, необходимые для передачи из метода индекса Стореконтроллерв шаблон представления, чтобы создать ответ.The StoreIndexViewModel class encapsulates the information needed to pass from StoreController's Index method to a View template in order to generate a response.

В этой задаче будет обновлен стореконтроллер для использования стореиндексвиевмодел.In this task, you will update the StoreController to use the StoreIndexViewModel.

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

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

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

  2. Чтобы использовать класс стореиндексвиевмодел из стореконтроллер, добавьте следующее пространство имен в начало кода стореконтроллер :In order to use the StoreIndexViewModel class from the StoreController, add the following namespace at the top of the StoreController code:

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

    using MvcMusicStore.ViewModels;
    
  3. Измените метод действия индекса стореконтроллертаким образом, чтобы он создавал и заполнил объект стореиндексвиевмодел , а затем передавал его в шаблон представления, чтобы создать HTML-ответ с ним.Change the StoreController's Index action method so that it creates and populates a StoreIndexViewModel object and then passes it off to a View template to generate an HTML response with it.

    Note

    В лабораториях "ASP.NET модели MVC и доступ к данным" будет написан код, который извлекает список жанров магазина из базы данных.In Lab "ASP.NET MVC Models and Data Access" you will write code that retrieves the list of store genres from a database. В следующем коде будет создан список фиктивных жанров данных, которые будут заполнять стореиндексвиевмодел.In the following code, you will create a List of dummy data genres that will populate the StoreIndexViewModel.

    После создания и настройки объекта стореиндексвиевмодел он будет передан в качестве аргумента в метод View .After creating and setting up the StoreIndexViewModel object, it will be passed as an argument to the View method. Это означает, что шаблон представления будет использовать этот объект для создания в нем ответа HTML.This indicates that the View template will use that object to generate an HTML response with it.

  4. Замените метод index следующим кодом:Replace the Index method with the following code:

    (Фрагмент кода — основы ASP.NET MVC 4 — Ex5 Стореконтроллер index)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex5 StoreController Index method)

    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 имеет позднюю привязку.If you're unfamiliar with C#, you may assume that using var means that the viewModel variable is late-bound. Это неверно. C# компилятор использует определение типа, основанное на назначении переменной, чтобы определить, что ViewModel имеет тип стореиндексвиевмодел.That's not correct - the C# compiler is using type-inference based on what you assign to the variable to determine that viewModel is of type StoreIndexViewModel. Кроме того, путем компиляции локальной переменной viewModel в качестве типа стореиндексвиевмодел вы получаете проверку во время компиляции и поддержку редактора кода Visual Studio.Also, by compiling the local viewModel variable as a StoreIndexViewModel type you get compile-time checking and Visual Studio code-editor support.

Задача 4. Создание шаблона представления, использующего СтореиндексвиевмоделTask 4 - Creating a View Template that Uses StoreIndexViewModel

В этой задаче будет создан шаблон представления, который будет использовать объект Стореиндексвиевмодел, переданный контроллером, для отображения списка жанров.In this task, you will create a View template that will use a StoreIndexViewModel object passed from the Controller to display a list of genres.

  1. Перед созданием нового шаблона представления выполним сборку проекта, чтобы диалоговое окно добавления представления знало о классе стореиндексвиевмодел .Before creating the new View template, let's build the project so that the Add View Dialog knows about the StoreIndexViewModel class. Выполните сборку проекта, выбрав пункт меню Сборка , а затем — сборку мвкмусиксторе.Build the project by selecting the Build menu item and then Build MvcMusicStore.

    Сборка проектаBuilding the project

    Сборка проектаBuilding the project

  2. Создайте новый шаблон представления.Create a new View template. Для этого щелкните правой кнопкой мыши внутри метода index и выберите Добавить представление.To do that, right-click inside the Index method and select Add View.

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

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

  3. Так как диалоговое окно добавления представления было вызвано из Стореконтроллер, шаблон представления по умолчанию будет добавлен в файл \виевс\сторе\индекс.кштмл .Because the Add View Dialog was invoked from the StoreController, it will add the View template by default in a \Views\Store\Index.cshtml file. Установите флажок создать строго типизированное представление и выберите стореиндексвиевмодел в качестве класса модели.Check the Create a strongly-typed-view checkbox and then select StoreIndexViewModel as the Model class. Кроме того, убедитесь, что для обработчика представлений выбрано значение Razor.Also, make sure that the View engine selected is Razor. Нажмите кнопку Добавить.Click Add.

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

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

    Будет создан и открыт файл шаблона представления \виевс\сторе\индекс.кштмл .The \Views\Store\Index.cshtml View template file is created and opened. В зависимости от сведений, предоставленных в диалоговом окне Добавление представления на последнем шаге, шаблон представления будет предполагать, что экземпляр стореиндексвиевмодел используется в качестве данных для создания ответа HTML.Based on the information provided to the Add View dialog in the last step, the View template will expect a StoreIndexViewModel instance as the data to use to generate an HTML response. Вы увидите, что шаблон наследует ViewPage<musicstore.viewmodels.storeindexviewmodel> в C#.You will notice that the template inherits a ViewPage<musicstore.viewmodels.storeindexviewmodel> in C#.

Задача 5. обновление шаблона представленияTask 5 - Updating the View Template

В этой задаче будет обновлен шаблон представления, созданный в последней задаче, чтобы получить количество жанров и их имен на странице.In this task, you will update the View template created in the last task to retrieve the number of genres and their names within the page.

Note

Для выполнения кода в шаблоне представления будет использоваться @ Syntax (часто это называется "Code кусочки").You will use @ syntax (often referred to as "code nuggets") to execute code within the View template.

  1. В файле index. cshtml в папке Store замените его код следующим кодом:In the Index.cshtml file, within the Store folder, replace its code with the following:
@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 .Loop over the genre list in StoreIndexViewModel and create an HTML <ul> list using a foreach loop. C#(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.Press F5 to run the Application and browse /Store. Вы увидите список жанров, переданных в объект стореиндексвиевмодел из Стореконтроллер в шаблон представления.You will see the list of genres passed in the StoreIndexViewModel object from the StoreController to the View template.

    Просмотр списка жанровView displaying a list of genres

    Просмотр списка жанровView displaying a list of genres

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

Упражнение 6. Использование параметров в представленииExercise 6: Using Parameters in View

В упражнении 3 вы узнали, как передавать параметры в контроллер.In Exercise 3 you learned how to pass parameters to the Controller. В этом упражнении вы узнаете, как использовать эти параметры в шаблоне представления.In this exercise, you will learn how to use those parameters in the View template. Для этой цели вы сначала предоставили классы модели, которые помогут вам управлять данными и логикой предметной области.For that purpose, you will be introduced first to Model classes that will help you to manage your data and domain logic. Кроме того, вы узнаете, как создавать ссылки на страницы в приложении MVC ASP.NET, не беспокоясь о том, как кодировать URL-пути.Additionally, you will learn how to create links to pages inside the ASP.NET MVC application without worrying of things like URL paths encoding.

Задача 1. Добавление классов моделиTask 1 - Adding Model Classes

В отличие от ViewModel, которые создаются для передачи информации из контроллера в представление, классы модели создаются для хранения и управления данными и логикой предметной области.Unlike ViewModels, which are created just to pass information from the Controller to the View, Model classes are built to contain and manage data and domain logic. В этой задаче предстоит добавить два класса модели для представления этих концепций: Жанр и альбом.In this task you will add two model classes to represent these concepts: Genre and Album.

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

  2. В меню файл выберите команду Открыть проект.In the File menu, choose Open Project. В диалоговом окне Открытие проекта перейдите к Source\Ex06-UsingParametersInView\Begin, выберите Begin. sln и нажмите кнопку Открыть.In the Open Project dialog, browse to Source\Ex06-UsingParametersInView\Begin, select Begin.sln and click Open. Кроме того, вы можете продолжить работу с решением, полученным после завершения предыдущего упражнения.Alternatively, you may continue with the solution that you obtained after completing the previous exercise.

    1. Если вы открыли предоставленное Начальное решение, перед продолжением потребуется загрузить некоторые недостающие пакеты NuGet.If you opened the provided Begin solution, you will need to download some missing NuGet packages before continue. Для этого в меню проект выберите пункт Управление пакетами NuGet.To do this, click the Project menu and select Manage NuGet Packages.

    2. В диалоговом окне Управление пакетами NuGet нажмите кнопку восстановить , чтобы скачать недостающие пакеты.In the Manage NuGet Packages dialog, click Restore in order to download missing packages.

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

      Note

      Одним из преимуществ использования NuGet является то, что вам не нужно поставлять все библиотеки в проекте, уменьшая размер проекта.One of the advantages of using NuGet is that you don't have to ship all the libraries in your project, reducing the project size. С помощью средств управления питанием NuGet, указав версии пакетов в файле Packages. config, вы сможете скачать все необходимые библиотеки при первом запуске проекта.With NuGet Power Tools, by specifying the package versions in the Packages.config file, you will be able to download all the required libraries the first time you run the project. Именно поэтому после открытия существующего решения из этой лабораторной работы потребуется выполнить следующие действия.This is why you will have to run these steps after you open an existing solution from this lab.

  3. Добавьте класс модели жанра .Add a Genre Model class. Для этого щелкните правой кнопкой мыши папку модели в Обозреватель решений, выберите Добавить , а затем — новый элемент .To do this, right-click the Models folder in the Solution Explorer, select Add and then the New Item option. В разделе кодвыберите элемент класса и назовите файл genre.CS, а затем нажмите кнопку Добавить.Under Code, choose the Class item and name the file Genre.cs, then click Add.

    Добавление классаAdding a class

    Добавление нового элементаAdding a new item

    Добавление класса модели жанраAdd Genre Model Class

    Добавление класса модели жанраAdd Genre Model Class

  4. Добавьте свойство Name в класс жанра.Add a Name property to the Genre class. Для этого добавьте следующий код:To do this, add the following code:

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

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Genre
        {
            public string Name { get; set; }
        }
    }
    
  5. Следуя той же процедуре, что и ранее, добавьте класс альбома .Following the same procedure as before, add an Album class. Для этого щелкните правой кнопкой мыши папку модели в Обозреватель решений, выберите Добавить , а затем — новый элемент .To do this, right-click the Models folder in the Solution Explorer, select Add and then the New Item option. В разделе кодвыберите элемент класса и назовите файл Album.CS, а затем нажмите кнопку Добавить.Under Code, choose the Class item and name the file Album.cs, then click Add.

  6. Добавьте два свойства в класс альбома: Жанр и Title.Add two properties to the Album class: Genre and Title. Для этого добавьте следующий код:To do this, add the following code:

    (Фрагмент кода — ASP.NET MVC 4 основы — альбом Ex6)(Code Snippet - ASP.NET MVC 4 Fundamentals - Ex6 Album)

    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. Добавление СторебровсевиевмоделTask 2 - Adding a StoreBrowseViewModel

В этой задаче будет использоваться сторебровсевиевмодел для отображения альбомов, соответствующих выбранному жанру.A StoreBrowseViewModel will be used in this task to show the Albums that match a selected Genre. В этой задаче вы создадите этот класс, а затем добавите два свойства для обработка жанра и его списка альбома.In this task, you will create this class and then add two properties to handle the Genre and its Album's List.

  1. Добавьте класс сторебровсевиевмодел .Add a StoreBrowseViewModel class. Для этого щелкните правой кнопкой мыши папку ViewModels в Обозреватель решений, выберите Добавить , а затем — новый элемент .To do this, right-click the ViewModels folder in the Solution Explorer, select Add and then the New Item option. В разделе кодвыберите элемент класса и назовите файл StoreBrowseViewModel.CS, а затем нажмите кнопку Добавить.Under Code, choose the Class item and name the file StoreBrowseViewModel.cs, then click Add.

  2. Добавьте ссылку на модели в классе сторебровсевиевмодел .Add a reference to the Models in StoreBrowseViewModel class. Для этого добавьте следующее с помощью пространства имен:To do this, add the following using namespace:

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

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
        }
    }
    
  3. Добавьте два свойства в класс сторебровсевиевмодел : Жанр и альбомы.Add two properties to StoreBrowseViewModel class: Genre and Albums. Для этого добавьте следующий код:To do this, add the following code:

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

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
            public Genre Genre { get; set; }
    
            public List<Album> Albums { get; set; }
        }
    }
    

Note

Что такое список<альбом> ?. это определение использует тип списка<t> , где t ограничивает тип, к которому принадлежат элементы этого списка , в данном случае это альбом (или любой из его потомков).What is List<Album> ?: This definition is using the List<T> type, where T constrains the type to which elements of this List belong to, in this case Album (or any of its descendants).

Эта возможность разрабатывать классы и методы, которые откладывают спецификацию одного или нескольких типов до тех пор, пока класс или метод не будет объявлен и не будет создан с помощью C# клиентского кода, — является функцией языка, именуемого универсальнымиклассами.This ability to design classes and methods that defer the specification of one or more types until the class or method is declared and instantiated by client code is a feature of the C# language called Generics.

List<t> является универсальным эквивалентом типа ArrayList и доступен в пространстве имен System. Collections. Generic .List<T> is the generic equivalent of the ArrayList type and is available in the System.Collections.Generic namespace. Одним из преимуществ использования универсальных шаблонов является то, что, поскольку тип задан, вам не нужно предпринимать такие операции проверки типов, как приведение элементов к альбому , как и в случае с ArrayList.One of the benefits of using generics is that since the type is specified, you do not need to take care of type checking operations such as casting the elements into Album as you would do with an ArrayList.

Задача 3. Использование нового ViewModel в СтореконтроллерTask 3 - Using the New ViewModel in the StoreController

В этой задаче вы измените методы действия " Обзор " и "подробности " Стореконтроллер, чтобы использовать новый сторебровсевиевмодел.In this task, you will modify the StoreController's Browse and Details action methods to use the new StoreBrowseViewModel.

  1. Добавьте ссылку на папку Models в классе стореконтроллер .Add a reference to the Models folder in StoreController class. Для этого разверните папку Controllers в Обозреватель решений и откройте класс стореконтроллер .To do this, expand the Controllers folder in the Solution Explorer and open the StoreController class. Затем добавьте следующий код:Then add the following code:

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

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcMusicStore.ViewModels;
    using MvcMusicStore.Models;
    
  2. Замените метод действия Browse для использования класса сторевиевбровсеконтроллер .Replace the Browse action method to use the StoreViewBrowseController class. Вы создадите жанр и два новых объекта альбомов с фиктивными данными (в следующей практической лабораторной работе вы будете использовать реальные данные из базы данных).You will create a Genre and two new Albums objects with dummy data (in the next Hands-on Lab you will consume real data from a database). Для этого замените метод Browse следующим кодом:To do this, replace the Browse method with the following code:

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

    //
    // GET: /Store/Browse?genre=Disco
    
    public ActionResult Browse(string genre)
    {
        var genreModel = new Genre()
        {
            Name = genre
        };
    
        var albums = new List<Album>()
        {
            new Album() { Title = genre + " Album 1" },
            new Album() { Title = genre + " Album 2" }
        };
    
        var viewModel = new StoreBrowseViewModel()
        {
            Genre = genreModel,
            Albums = albums
        };
    
        return this.View(viewModel);
    }
    
  3. Замените метод действия Details , чтобы использовался класс сторевиевбровсеконтроллер .Replace the Details action method to use the StoreViewBrowseController class. Вы создадите новый объект альбома , который будет возвращен в представление.You will create a new Album object to be returned to the View. Для этого замените метод Details следующим кодом:To do this, replace the Details method with the following code:

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

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

Задача 4. Добавление шаблона представления обзораTask 4 - Adding a Browse View Template

В этой задаче будет добавлено представление обзора для отображения альбомов, найденных для определенного жанра.In this task, you will add a Browse View to show the Albums found for a specific Genre.

  1. Перед созданием нового шаблона представления необходимо выполнить сборку проекта, чтобы диалоговое окно добавления представления знало о том, какой класс ViewModel будет использовать.Before creating the new View template, you should build the project so that the Add View Dialog knows about the ViewModel class to use. Выполните сборку проекта, выбрав пункт меню Сборка , а затем — сборку мвкмусиксторе.Build the project by selecting the Build menu item and then Build MvcMusicStore.

  2. Добавьте представление обзора .Add a Browse View. Для этого щелкните правой кнопкой мыши метод действия обзора стореконтроллер и выберите команду Добавить представление.To do this, right-click in the Browse action method of the StoreController and click Add View.

  3. В диалоговом окне Добавление представления убедитесь, что имя представления является обзором.In the Add View dialog box, verify that the View Name is Browse. Установите флажок создать строго типизированное представление и выберите сторебровсевиевмодел в раскрывающемся списке класс модели .Check the Create a strongly-typed view checkbox and select StoreBrowseViewModel from the Model class dropdown. Оставьте в других полях значения по умолчанию.Leave the other fields with their default value. Нажмите кнопку Добавить.Then click Add.

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

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

  4. Измените значение свойства Browse. cshtml , чтобы отобразить сведения о жанре и получить доступ к объекту сторебровсевиевмодел , который передается в шаблон представления.Modify the Browse.cshtml to display the Genre's information, accessing the StoreBrowseViewModel object that is passed to the view template. Для этого замените содержимое следующим: (C#).To do this, replace the content with the following: (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. Запуск приложенияTask 5 - Running the Application

В этой задаче вы проверите, что метод Browse извлекает альбомы из действия метода Browse .In this task, you will test that the Browse method retrieves Albums from the Browse method action.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Изменить URL-адрес на /Сторе/бровсе? Жанр = Disco , чтобы убедиться, что действие возвращает два альбома.Change the URL to /Store/Browse?Genre=Disco to verify that the action returns two Albums.

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

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

Задача 6. Отображение сведений о конкретном альбомеTask 6 - Displaying information About a Specific Album

В этой задаче будет реализовано представление Store/Details для отображения сведений о конкретном альбоме.In this task, you will implement the Store/Details view to display information about a specific album. В этой практической лабораторной работе все отображаемые сведения о альбоме уже содержатся в шаблоне представления .In this Hands-on Lab, everything you will display about the album is already contained in the View template. Таким образом, вместо создания класса сторедетаилсвиевмодел будет использоваться текущий шаблон сторебровсевиевмодел , передающий в него альбом.So, instead of creating a StoreDetailsViewModel class, you will use the current StoreBrowseViewModel template passing the Album to it.

  1. При необходимости закройте браузер, чтобы вернуться в окно Visual Studio.Close the browser if needed, to return to the Visual Studio window. Добавьте новое представление сведений для метода действия Details стореконтроллер.Add a new Details view for the StoreController's Details action method. Для этого щелкните правой кнопкой мыши метод Details в классе Стореконтроллер и выберите Добавить представление.To do this, right-click the Details method in the StoreController class and click Add View.

  2. В диалоговом окне Добавление представления убедитесь, что имя представления содержит сведения.In the Add View dialog, verify that the View Name is Details. Установите флажок создать строго типизированное представление и выберите альбом в раскрывающемся списке класс модели .Check the Create a strongly-typed view checkbox and select Album from the Model class drop-down. Оставьте в других полях значения по умолчанию.Leave the other fields with their default value. Нажмите кнопку Добавить.Then click Add. Будет создан и открыт файл \виевс\сторе\детаилс.кштмл .This will create and open a \Views\Store\Details.cshtml file.

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

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

  3. Измените файл Details. cshtml , чтобы отобразить сведения об альбоме, доступ к объекту альбома , который передается в шаблон представления.Modify the Details.cshtml file to display the Album's information, accessing the Album object that is passed to the view template. Для этого замените содержимое следующим: (C#).To do this, replace the content with the following: (C#)

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

Задача 7. Запуск приложенияTask 7 - Running the Application

В этой задаче вы проверите, что представление Details извлекает сведения о альбоме из метода действия Details .In this task, you will test that the Details View retrieves Album's information from the Details action method.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Измените URL-адрес на /Store/Details/5 , чтобы проверить сведения об альбоме.Change the URL to /Store/Details/5 to verify the album's information.

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

    Просмотр сведений о альбомеBrowsing Album's Detail

В этой задаче вы добавите ссылку в представление хранилища, чтобы ссылка в каждом имени жанра соответствовала соответствующему URL-адресу /Сторе/бровсе .In this task, you will add a link in the Store View to have a link in every Genre name to the appropriate /Store/Browse URL. Таким образом, если щелкнуть жанр, например Disco, он будет переходить к URL-адресу /Сторе/бровсе? жанр = Disco .This way, when you click on a Genre, for instance Disco, it will navigate to /Store/Browse?genre=Disco URL.

  1. При необходимости закройте браузер, чтобы вернуться в окно Visual Studio.Close the browser if needed, to return to the Visual Studio window. Обновите страницу индекса , чтобы добавить ссылку на страницу обзора .Update the Index page to add a link to the Browse page. Для этого в Обозреватель решений разверните папку представления , а затем папку Store и дважды щелкните страницу index. cshtml .To do this, in the Solution Explorer expand the Views folder, then the Store folder and double-click the Index.cshtml page.

  2. Добавьте ссылку на представление "Обзор", указывающее на выбранный жанр.Add a link to the Browse view indicating the genre selected. Для этого замените следующий выделенный код в <li> тегов: (C#)To do this, replace the following highlighted code within the <li> tags: (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

    другой подход будет напрямую связываться со страницей с кодом, подобным следующему:another approach would be linking directly to the page, with a code like the following:

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

    Хотя этот подход работает, он зависит от жестко закодированной строки.Although this approach works, it depends on a hardcoded string. Если впоследствии вы переименуете контроллер, вам придется изменить эту инструкцию вручную.If you later rename the Controller, you will have to change this instruction manually. Лучшим вариантом является использование вспомогательного метода HTML .A better alternative is to use an HTML Helper method. ASP.NET MVC включает вспомогательный метод HTML, доступный для таких задач.ASP.NET MVC includes an HTML Helper method which is available for such tasks. Вспомогательный метод HTML. ActionLink () упрощает создание Html- <> ссылок, обеспечивая правильность кодирования URL-адресов.The Html.ActionLink() helper method makes it easy to build HTML <a> links, making sure URL paths are properly URL encoded.

    В HTML. ActionLink имеется несколько перегрузок.Html.ActionLink has several overloads. В этом упражнении вы будете использовать его, который принимает три параметра:In this exercise you will use one that takes three parameters:

    1. Текст ссылки, в котором отображается название жанраLink text, which will display the Genre name
    2. Имя действия контроллера (Обзор)Controller action name (Browse)
    3. Значения параметров маршрута, в которых указывается как имя (Жанр), так и значение (Название жанра).Route parameter values, specifying both the name (Genre) and the value (Genre name)

Задача 9. Запуск приложенияTask 9 - Running the Application

В этой задаче вы проверите, что каждый жанр отображается со ссылкой на соответствующий URL-адрес /Сторе/бровсе .In this task, you will test that each Genre is displayed with a link to the appropriate /Store/Browse URL.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Измените URL-адрес на /Store , чтобы убедиться, что каждый жанр ссылается на соответствующий URL-адрес /Сторе/бровсе .Change the URL to /Store to verify that each Genre links to the appropriate /Store/Browse URL.

    Просмотр жанров со ссылками на страницу обзораBrowsing Genres with links to Browse page

    Просмотр жанров со ссылками на страницу обзораBrowsing Genres with links to Browse page

Задача 10. Использование динамической коллекции ViewModel для передачи значенийTask 10 - Using Dynamic ViewModel Collection to Pass Values

В этой задаче вы узнаете простой и мощный метод передачи значений между контроллером и представлением без внесения каких-либо изменений в модель.In this task, you will learn a simple and powerful method to pass values between the Controller and the View without making any changes in the Model. ASP.NET MVC 4 предоставляет коллекцию "ViewModel", которая может быть назначена любому динамическому значению и доступна также в контроллерах и представлениях.ASP.NET MVC 4 provides the collection "ViewModel", which can be assigned to any dynamic value and accessed inside controllers and views as well.

Теперь вы будете использовать динамическую коллекцию ViewBag для передачи списка"ных жанров "звездочками из контроллера в представление.You will now use the ViewBag dynamic collection to pass a list of "Starred genres" from the controller to the view. Представление индекса магазина будет иметь доступ к ViewModel и отображать сведения.The Store Index view will access to ViewModel and display the information.

  1. При необходимости закройте браузер, чтобы вернуться в окно Visual Studio.Close the browser if needed, to return to the Visual Studio window. Откройте StoreController.CS и измените метод index , чтобы создать список жанров звездочками в коллекции ViewModel:Open StoreController.cs and modify Index method to create a list of starred genres into ViewModel collection :

    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 ["звездочками"] .You could also use the syntax ViewBag["Starred"] to access the properties.

  2. Значок звездочки "звездочками. png" включен в папку саурце\ассетс\имажес этой лабораторной работы.The star icon "starred.png" is included in the Source\Assets\Images folder of this lab. Чтобы добавить его в приложение, перетащите его содержимое из окна проводника Windows в Обозреватель решений в Visual Web Developer Express, как показано ниже:In order to add it to the application, drag their content from a Windows Explorer window into the Solution Explorer in Visual Web Developer Express, as shown below:

    Добавление изображения Star в решениеAdding star image to the solution

    Добавление изображения Star в решениеAdding star image to the solution

  3. Откройте представление store/index. cshtml и измените содержимое.Open the view Store/Index.cshtml and modify the content. Вы прочитаете свойство "звездочками" в коллекции ViewBag и спросите, есть ли имя текущего жанра в списке.You will read the "starred" property in the ViewBag collection, and ask if the current genre name is in the list. В этом случае вы увидите значок звездочки справа по ссылке на жанр.In that case you will show a star icon right to the genre link. C#(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. Запуск приложенияTask 11 - Running the Application

В этой задаче вы проверите, что жанры звездочками отображают значок звездочки.In this task, you will test that the starred genres display a star icon.

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

  2. Проект начинается на домашней странице.The project starts in the Home page. Измените URL-адрес на /Store , чтобы убедиться, что каждый рекомендуемый жанр имеет метку соответствия:Change the URL to /Store to verify that each featured genre has the respecting label:

    Просмотр жанров с помощью элементов звездочкамиBrowsing Genres with starred elements

    Просмотр жанров с помощью элементов звездочкамиBrowsing Genres with starred elements

Упражнение 7. Создание шаблона на основе ASP.NET MVC 4Exercise 7: A lap around ASP.NET MVC 4 new template

В этом упражнении вы изучите усовершенствования в шаблонах проектов ASP.NET MVC 4, используя наиболее важные возможности нового шаблона.In this exercise, you will explore the enhancements in the ASP.NET MVC 4 project templates, taking a look at the most relevant features of the new template.

Задача 1. изучение шаблона Интернет приложения ASP.NET MVC 4Task 1: Exploring the ASP.NET MVC 4 Internet Application Template

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

  2. Выберите файл | Создать | Команда меню "проект".Select the File | New | Project menu command. В диалоговом окне Новый проект выберите визуальный C#элемент | В дереве слева щелкните веб-шаблон и выберите веб-приложение ASP.NET MVC 4.In the New Project dialog, select the Visual C#|Web template on the left pane tree, and choose the ASP.NET MVC 4 Web Application. Назовите проект мусиксторе и обновите имя решения , чтобы начать, затем выберите расположение (или оставьте значение по умолчанию) и нажмите кнопку ОК.Name the project MusicStore and update the solution name to Begin, then select a location (or leave the default) and click OK.

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

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

  3. В диалоговом окне Новый проект ASP.NET MVC 4 выберите шаблон проекта Интернет приложение и нажмите кнопку ОК.In the New ASP.NET MVC 4 Project dialog, select the Internet Application project template and click OK. Обратите внимание, что в качестве обработчика представлений можно выбрать Razor или ASPX.Notice you can select either Razor or ASPX as the view engine.

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

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

    Note

    Синтаксис Razor представлен в ASP.NET MVC 3.Razor syntax has been introduced in ASP.NET MVC 3. Его целью является сокращение количества символов и нажатий клавиш, необходимых в файле, что позволяет быстро и гибко создавать рабочие процессы кодирования.Its goal is to minimize the number of characters and keystrokes required in a file, enabling a fast and fluid coding workflow. Razor использует существующие C#навыки языка/VB (или другие) и предоставляет синтаксис разметки шаблона, который позволяет создавать восходящий рабочий процесс создания HTML-кода.Razor leverages existing C#/VB (or other) language skills and delivers a template markup syntax that enables an awesome HTML construction workflow.

  4. Нажмите клавишу F5 , чтобы запустить решение и просмотреть обновленный шаблон.Press F5 to run the solution and see the renewed template. Вы можете узнать о следующих функциях:You can check out the following features:

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

      Шаблоны были обновлены, предоставляя более современные стили.The templates have been renewed, providing more modern-looking styles.

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

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

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

      Изучите изменение размера окна браузера и обратите внимание, что макет страницы динамически адаптируется к новому размеру окна.Check out resizing the browser window and notice how the page layout dynamically adapts to the new window size. Эти шаблоны используют метод адаптивной отрисовки для правильной отрисовки на настольных и мобильных платформах без каких бы то ни было настроек.These templates use the adaptive rendering technique to render properly in both desktop and mobile platforms without any customization.

      Шаблон проекта ASP.NET MVC 4 в разных размерах браузераASP.NET MVC 4 project template in different browser sizes

      Шаблон проекта ASP.NET MVC 4 в разных размерах браузераASP.NET MVC 4 project template in different browser sizes

  5. Закройте браузер, чтобы завершить работу отладчика и вернуться в Visual Studio.Close the browser to stop the debugger and return to Visual Studio.

  6. Теперь вы можете исследовать решение и ознакомиться с новыми функциями, появившимися в ASP.NET MVC 4 в шаблоне проекта.Now you are able to explore the solution and check out some of the new features introduced by ASP.NET MVC 4 in the project template.

    ASP.NET MVC4-Internet-Application-Project-TemplateASP.NET MVC4-internet-application-project-template

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

    1. Разметка HTML5HTML5 markup

      Просмотрите представления шаблонов, чтобы узнать новую разметку темы, например открыть представление About. cshtml в домашней папке.Browse template views to find out the new theme markup, for example open About.cshtml view within Home folder.

      Новый шаблон с использованием разметки Razor и HTML5New template, using Razor and HTML5 markup

      Новый шаблон с использованием разметки Razor и HTML5New template, using Razor and HTML5 markup

    2. Включаемые библиотеки JavaScriptJavaScript libraries included

      1. jQuery: jQuery упрощает обход документов HTML, обработку событий, анимацию и взаимодействие AJAX.jQuery: jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions.

      2. Пользовательский интерфейс jQuery. Эта библиотека предоставляет абстракции для низкоуровневого взаимодействия и анимации, расширенные эффекты и тематические мини-приложения, созданные на основе библиотеки jQuery JavaScript.jQuery UI: This library provides abstractions for low-level interaction and animation, advanced effects and themeable widgets, built on top of the jQuery JavaScript Library.

        Note

        Сведения о jQuery и пользовательском интерфейсе jQuery можно узнать в [http://docs.jquery.com/](http://docs.jquery.com/).You can learn about jQuery and jQuery UI in [http://docs.jquery.com/](http://docs.jquery.com/).

      3. KnockoutJS. шаблон ASP.NET MVC 4 по умолчанию теперь включает KnockoutJS, платформу JavaScript MVVM, которая позволяет создавать многофункциональные и высокоэффективные веб-приложения с помощью JavaScript и HTML.KnockoutJS: The ASP.NET MVC 4 default template now includes KnockoutJS, a JavaScript MVVM framework that lets you create rich and highly responsive web applications using JavaScript and HTML. Как и в ASP.NET MVC 3, библиотеки пользовательского интерфейса jQuery и jQuery также включены в ASP.NET MVC 4.Like in ASP.NET MVC 3, jQuery and jQuery UI libraries are also included in ASP.NET MVC 4.

        Note

        Дополнительные сведения о библиотеке KnockOutJS можно получить по этой ссылке: http://learn.knockoutjs.com/.You can get more information about KnockOutJS library in this link: http://learn.knockoutjs.com/.

      4. Modernizr: Эта библиотека запускается автоматически, делая сайт совместимым с более старыми браузерами при использовании технологий HTML5 и CSS3.Modernizr: This library runs automatically, making your site compatible with older browsers when using HTML5 and CSS3 technologies.

        Note

        Дополнительные сведения о библиотеке Modernizr можно получить по этой ссылке: http://www.modernizr.com/.You can get more information about Modernizr library in this link: http://www.modernizr.com/.

    3. Симплемембершип, включаемые в решениеSimpleMembership included in the solution

      Симплемембершип был разработан в качестве замены для предыдущей ASP.NET роли и системы поставщика членства.SimpleMembership has been designed as a replacement for the previous ASP.NET Role and Membership provider system. В нем реализовано множество новых функций, упрощающих защиту веб-страниц разработчиками более гибким способом.It has many new features that make it easier for the developer to secure web pages in a more flexible way.

      В шаблоне Интернета уже настроено несколько вещей для интеграции Симплемембершип, например, AccountController подготовлена к использованию Оаусвебсекурити (для регистрации учетной записи OAuth, входа, управления и т. д.) и веб-безопасности.The Internet template already has set up a few things to integrate SimpleMembership, for example, the AccountController is prepared to use OAuthWebSecurity (for OAuth account registration, login, management, etc.) and Web Security.

      Симплемембершип, включаемые в решениеSimpleMembership Included in the solution

      Симплемембершип, включаемые в решениеSimpleMembership Included in the solution

      Note

      Дополнительные сведения о оаусвебсекурити см. на сайте MSDN.Find more information about OAuthWebSecurity in MSDN.

Note

Кроме того, это приложение можно развернуть на веб-сайтах Windows Azure в приложении б: Публикация приложения ASP.NET MVC 4 с помощью веб-развертывание.Additionally, you can deploy this application to Windows Azure Web Sites following Appendix B: Publishing an ASP.NET MVC 4 Application using Web Deploy.


СводкаSummary

Выполняя эту практическую лабораторию, вы узнали об основах ASP.NET MVC:By completing this Hands-On Lab you have learned the fundamentals of ASP.NET MVC:

  • Основные элементы приложения MVC и их взаимодействиеThe core elements of an MVC application and how they interact
  • Создание приложения ASP.NET MVCHow to create an ASP.NET MVC Application
  • Добавление и настройка контроллеров для управления параметрами, передаваемыми по URL-адресу и строке запросаHow to add and configure Controllers to handle parameters passed through the URL and querystring
  • Добавление главной страницы макета для настройки шаблона для общего содержимого HTML, таблицы стилей для улучшения внешнего вида и шаблона представления для отображения HTML-содержимогоHow to add a layout master page to setup a template for common HTML content, a StyleSheet to enhance the look and feel and a View template to display HTML content
  • Как использовать шаблон ViewModel для передачи свойств в шаблон представления для отображения динамической информацииHow to use the ViewModel pattern for passing properties to the View template to display dynamic information
  • Использование параметров, передаваемых контроллерам в шаблоне представленияHow to use parameters passed to Controllers in the View template
  • Добавление ссылок на страницы в приложении MVC ASP.NETHow to add links to pages inside the ASP.NET MVC application
  • Добавление и использование динамических свойств в представленииHow to add and use dynamic properties in a View
  • Улучшения в шаблонах проектов ASP.NET MVC 4The enhancements in the ASP.NET MVC 4 project templates

Приложение а. Установка Visual Studio Express 2012 для WebAppendix A: Installing Visual Studio Express 2012 for Web

Вы можете установить Microsoft Visual Studio Express 2012 для Web или другой "Express" версии с помощью установщик веб-платформы Майкрософт .You can install Microsoft Visual Studio Express 2012 for Web or another "Express" version using the Microsoft Web Platform Installer. Следующие инструкции помогут вам выполнить действия, необходимые для установки Visual Studio Express 2012 для Web с помощью установщик веб-платформы Майкрософт.The following instructions guide you through the steps required to install Visual studio Express 2012 for Web using Microsoft Web Platform Installer.

  1. Перейдите в [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169).Go to [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Кроме того, если у вас уже установлен установщик веб-платформы, вы можете открыть его и найти продукт "Visual Studio Express 2012 для Web с Windows Azure SDK".Alternatively, if you already have installed Web Platform Installer, you can open it and search for the product "Visual Studio Express 2012 for Web with Windows Azure SDK".

  2. Щелкните Install Now (установить сейчас).Click on Install Now. Если у вас нет установщика веб-платформы , вы будете сначала перенаправлены на загрузку и установку.If you do not have Web Platform Installer you will be redirected to download and install it first.

  3. После открытия установщика веб-платформы нажмите кнопку установить , чтобы начать установку.Once Web Platform Installer is open, click Install to start the setup.

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

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

  4. Прочитайте все лицензии и условия продуктов и нажмите кнопку " принять ", чтобы продолжить.Read all the products' licenses and terms and click I Accept to continue.

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

    Принятие условий лицензииAccepting the license terms

  5. Дождитесь завершения процесса загрузки и установки.Wait until the downloading and installation process completes.

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

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

  6. После завершения установки нажмите кнопку Готово.When the installation completes, click Finish.

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

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

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

  8. Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните запись "VS Express", а затем щелкните плитку VS Express для Web .To open Visual Studio Express for Web, go to the Start screen and start writing "VS Express", then click on the VS Express for Web tile.

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

    Плитка VS Express для WebVS Express for Web tile

Приложение б. Публикация приложения ASP.NET MVC 4 с помощью веб-развертываниеAppendix B: Publishing an ASP.NET MVC 4 Application using Web Deploy

В этом приложении показано, как создать новый веб-сайт из портал управления Windows Azure и опубликовать полученное приложение, выполнив следующие лабораторные занятия, используя возможности публикации веб-развертывание, предоставляемые Windows Azure.This appendix will show you how to create a new web site from the Windows Azure Management Portal and publish the application you obtained by following the lab, taking advantage of the Web Deploy publishing feature provided by Windows Azure.

Задача 1. Создание нового веб-сайта на портале Windows AzureTask 1 - Creating a New Web Site from the Windows Azure Portal

  1. Перейдите в портал управления Windows Azure и выполните вход с использованием учетных данных Майкрософт, связанных с подпиской.Go to the Windows Azure Management Portal and sign in using the Microsoft credentials associated with your subscription.

    Note

    С помощью Windows Azure можно бесплатно разместить 10 веб-сайтов ASP.NET, а затем масштабировать их по мере роста объема трафика.With Windows Azure you can host 10 ASP.NET Web Sites for free and then scale as your traffic grows. Вы можете зарегистрироваться здесь.You can sign up here.

    Вход в Windows портал AzureLog on to Windows Azure portal

    Вход в Windows Azure портал управленияLog on to Windows Azure Management Portal

  2. На панели команд щелкните создать .Click New on the command bar.

    Создание нового веб-сайтаCreating a new Web Site

    Создание нового веб-сайтаCreating a new Web Site

  3. Щелкните Compute | веб-сайт.Click Compute | Web Site. Затем выберите пункт Быстрое создание .Then select Quick Create option. Предоставьте доступный URL-адрес для нового веб-сайта и щелкните создать веб-сайт.Provide an available URL for the new web site and click Create Web Site.

    Note

    Веб-сайт Windows Azure — это узел для веб-приложения, работающего в облаке, которыми можно управлять и которыми вы управляете.A Windows Azure Web Site is the host for a web application running in the cloud that you can control and manage. Параметр Быстрое создание позволяет развернуть завершенное веб-приложение на веб-сайте Windows Azure извне портала.The Quick Create option allows you to deploy a completed web application to the Windows Azure Web Site from outside the portal. Он не включает шаги по настройке базы данных.It does not include steps for setting up a database.

    Создание нового веб-сайта с помощью быстрого созданияCreating a new Web Site using Quick Create

    Создание нового веб-сайта с помощью быстрого созданияCreating a new Web Site using Quick Create

  4. Дождитесь создания нового веб-сайта .Wait until the new Web Site is created.

  5. После создания веб-сайта щелкните ссылку в столбце URL-адрес .Once the Web Site is created click the link under the URL column. Убедитесь, что новый веб-сайт работает.Check that the new Web Site is working.

    Обзор нового веб-сайтаBrowsing to the new web site

    Обзор нового веб-сайтаBrowsing to the new web site

    Веб-сайт работаетWeb site running

    Веб-сайт работаетWeb site running

  6. Вернитесь на портал и щелкните имя веб-сайта в столбце имя , чтобы отобразить страницы управления.Go back to the portal and click the name of the web site under the Name column to display the management pages.

    Открытие страниц управления веб-сайтомOpening the web site management pages

    Открытие страниц управления веб-сайтомOpening the Web Site management pages

  7. На странице панель мониторинга в разделе краткий обзор щелкните ссылку скачать профиль публикации .In the Dashboard page, under the quick glance section, click the Download publish profile link.

    Note

    Профиль публикации содержит все сведения, необходимые для публикации веб-приложения на веб-сайте Windows Azure для каждого включенного метода публикации.The publish profile contains all of the information required to publish a web application to a Windows Azure website for each enabled publication method. Профиль публикации содержит URL-адреса, учетные данные пользователей и строки для открытия базы данных, которые необходимы для проверки подлинности и подключения к каждой из конечных точек, соответствующей разрешенному методу публикации.The publish profile contains the URLs, user credentials and database strings required to connect to and authenticate against each of the endpoints for which a publication method is enabled. Microsoft WebMatrix 2, Microsoft Visual Studio Express для Web и Microsoft Visual Studio 2012 поддерживают чтение профилей публикации для автоматизации настройки этих программ для публикации веб-приложений на веб-сайтах Windows Azure.Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web and Microsoft Visual Studio 2012 support reading publish profiles to automate configuration of these programs for publishing web applications to Windows Azure websites.

    Скачивание профиля публикации веб-сайтаDownloading the web site publish profile

    Скачивание профиля публикации веб-сайтаDownloading the Web Site publish profile

  8. Скачайте файл профиля публикации в известное расположение.Download the publish profile file to a known location. Далее в этом упражнении вы узнаете, как использовать этот файл для публикации веб-приложения на веб-сайтах Windows Azure из Visual Studio.Further in this exercise you will see how to use this file to publish a web application to a Windows Azure Web Sites from Visual Studio.

    Сохранение файла профиля публикацииSaving the publish profile file

    Сохранение файла профиля публикацииSaving the publish profile file

Задача 2. Настройка сервера базы данныхTask 2 - Configuring the Database Server

Если приложение использует SQL Server базы данных, потребуется создать сервер базы данных SQL.If your application makes use of SQL Server databases you will need to create a SQL Database server. Если вы хотите развернуть простое приложение, которое не использует SQL Server вы можете пропустить эту задачу.If you want to deploy a simple application that does not use SQL Server you might skip this task.

  1. Для хранения базы данных приложения необходим сервер базы данных SQL.You will need a SQL Database server for storing the application database. Серверы базы данных SQL можно просмотреть в подписке на портале управления Windows Azure в базах данных sql | серверы | панели мониторинга сервера.You can view the SQL Database servers from your subscription in the Windows Azure Management portal at Sql Databases | Servers | Server's Dashboard. Если сервер не создан, можно создать его с помощью кнопки Добавить на панели команд.If you do not have a server created, you can create one using the Add button on the command bar. Запишите имя сервера и URL-адрес, имя для входа администратора и пароль, так как они будут использоваться в следующих задачах.Take note of the server name and URL, administrator login name and password, as you will use them in the next tasks. Пока не создавайте базу данных, так как она будет создана на более позднем этапе.Do not create the database yet, as it will be created in a later stage.

    Панель мониторинга сервера базы данных SQLSQL Database Server Dashboard

    Панель мониторинга сервера базы данных SQLSQL Database Server Dashboard

  2. В следующей задаче вы проверите подключение к базе данных из Visual Studio. по этой причине необходимо включить локальный IP-адрес в список разрешенных IP-адресовсервера.In the next task you will test the database connection from Visual Studio, for that reason you need to include your local IP address in the server's list of Allowed IP Addresses. Для этого нажмите кнопку настроить, выберите IP-адрес из текущего IP-адреса клиента и вставьте его в текстовые поля начальный IP-адрес и конечный IP -адрес и нажмите кнопку добавить-клиент-IP – адрес-OK-кнопка.To do that, click Configure, select the IP address from Current Client IP Address and paste it on the Start IP Address and End IP Address text boxes and click the add-client-ip-address-ok-button button.

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

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

  3. После добавления IP-адреса клиента в список Разрешенные IP-адреса нажмите кнопку сохранить , чтобы подтвердить изменения.Once the Client IP Address is added to the allowed IP addresses list, click on Save to confirm the changes.

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

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

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

  1. Вернитесь к решению ASP.NET MVC 4.Go back to the ASP.NET MVC 4 solution. В Обозреватель решенийщелкните правой кнопкой мыши проект веб-сайта и выберите опубликовать.In the Solution Explorer, right-click the web site project and select Publish.

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

    Публикация веб-сайтаPublishing the web site

  2. Импортируйте профиль публикации, сохраненный в первой задаче.Import the publish profile you saved in the first task.

    Импорт профиля публикацииImporting the publish profile

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

  3. Щелкните проверить подключение.Click Validate Connection. После завершения проверки нажмите кнопку Далее.Once Validation is complete click Next.

    Note

    Проверка завершится, когда появится зеленая галочка рядом с кнопкой проверить подключение.Validation is complete once you see a green checkmark appear next to the Validate Connection button.

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

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

  4. На странице Параметры в разделе базы данных нажмите кнопку рядом с текстовым полем подключения к базе данных (т. е. DefaultConnection).In the Settings page, under the Databases section, click the button next to your database connection's textbox (i.e. DefaultConnection).

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

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

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

    • В поле имя сервера введите URL-адрес сервера базы данных SQL с помощью префикса TCP: .In the Server name type your SQL Database server URL using the tcp: prefix.

    • В окне имя пользователя введите имя для входа администратора сервера.In User name type your server administrator login name.

    • В окне пароль введите пароль для входа администратора сервера.In Password type your server administrator login password.

    • Введите имя новой базы данных, например: MVC4SampleDB.Type a new database name, for example: MVC4SampleDB.

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

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

  6. Нажмите кнопку ОК.Then click OK. При появлении запроса на создание базы данных нажмите кнопку Да.When prompted to create the database click Yes.

    Создание базы данныхCreating the database

    Создание базы данныхCreating the database

  7. Строка подключения, которая будет использоваться для подключения к базе данных SQL в Windows Azure, отображается в текстовом поле подключения по умолчанию.The connection string you will use to connect to SQL Database in Windows Azure is shown within Default Connection textbox. Затем нажмите кнопку Далее.Then click Next.

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

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

  8. На странице Предварительный просмотр нажмите кнопку опубликовать.In the Preview page, click Publish.

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

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

  9. По завершении процесса публикации браузер по умолчанию будет открывать опубликованный веб-сайт.Once the publishing process finishes, your default browser will open the published web site.

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

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

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

С помощью фрагментов кода вы можете получить все необходимые вам коды.With code snippets, you have all the code you need at your fingertips. В лабораторном документе вы узнаете, когда можно использовать их, как показано на следующем рисунке.The lab document will tell you exactly when you can use them, as shown in the following figure.

Использование фрагментов кода Visual Studio для вставки кода в проектUsing Visual Studio code snippets to insert code into your project

Использование фрагментов кода Visual Studio для вставки кода в проектUsing Visual Studio code snippets to insert code into your project

Добавление фрагмента кода с помощью клавиатуры (C# только)To add a code snippet using the keyboard (C# only)

  1. Поместите курсор в то место, куда вы хотите вставить код.Place the cursor where you would like to insert the code.
  2. Начните вводить имя фрагмента (без пробелов или дефисов).Start typing the snippet name (without spaces or hyphens).
  3. Посмотрите, как IntelliSense отображает соответствующие имена фрагментов кода.Watch as IntelliSense displays matching snippets' names.
  4. Выберите правильный фрагмент кода (или вводите его, пока не будет выбрано имя всего фрагмента).Select the correct snippet (or keep typing until the entire snippet's name is selected).
  5. Дважды нажмите клавишу TAB, чтобы вставить фрагмент в позицию курсора.Press the Tab key twice to insert the snippet at the cursor location.

Начните вводить имя фрагментаStart typing the snippet name

Начните вводить имя фрагментаStart typing the snippet name

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент.Press Tab to select the highlighted snippet

Нажмите клавишу TAB, чтобы выбрать выделенный фрагмент.Press Tab to select the highlighted snippet

Снова нажмите клавишу TAB, и фрагмент развернетсяPress Tab again and the snippet will expand

Снова нажмите клавишу TAB, и фрагмент развернетсяPress Tab again and the snippet will expand

Добавление фрагмента кода с помощью мыши (C#, Visual Basic и XML) одного.To add a code snippet using the mouse (C#, Visual Basic and XML) 1. Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода.Right-click where you want to insert the code snippet.

  1. Выберите Вставить фрагмент , за которым следуют фрагменты кода.Select Insert Snippet followed by My Code Snippets.
  2. Выберите соответствующий фрагмент из списка, щелкнув его.Pick the relevant snippet from the list, by clicking on it.

Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода, и выберите пункт Вставить фрагмент.Right-click where you want to insert the code snippet and select Insert Snippet

Щелкните правой кнопкой мыши место, куда нужно вставить фрагмент кода, и выберите пункт Вставить фрагмент.Right-click where you want to insert the code snippet and select Insert Snippet

Выберите соответствующий фрагмент из списка, щелкнув его.Pick the relevant snippet from the list, by clicking on it

Выберите соответствующий фрагмент из списка, щелкнув его.Pick the relevant snippet from the list, by clicking on it