Создание приложений ASP.NET Core в Visual Studio для Mac

ASP.NET Core является основанной на открытом исходном коде кроссплатформенной платформой для создания современных облачных приложений, подключенных к Интернету, таких как веб-приложения и службы, приложения Интернета вещей и мобильные внутренние серверы. Приложения ASP.NET Core могут работать в средах выполнения .NET Core или .NET Framework. Он был разработан для предоставления оптимизированной платформы разработки для приложений, развернутых в облаке или локальной среде. Он состоит из модульных компонентов с минимальными издержками, что позволяет сохранить гибкость при построении решений. Приложения ASP.NET Core можно разрабатывать и запускать на различных платформах, включая Windows, Mac и Linux. Код ASP.NET Core открыт для общего доступа в GitHub.

В этом задании вы создадите и изучите приложение ASP.NET Core с помощью Visual Studio для Mac.

Цели

  • Создание веб-приложения ASP.NET Core
  • Изучение модели размещения, конфигурации и ПО промежуточного слоя в ASP.NET Core
  • Отладка веб-приложения ASP.NET Core

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

Целевая аудитория

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

Задача 1. Создание нового приложения ASP.NET Core

  1. Запустите Visual Studio для Mac.

  2. Выберите Файл > Новое решение.

  3. Выберите категорию .NET Core > Приложение и шаблон Веб-приложение ASP.NET Core (C#) . Нажмите кнопку Далее.

    Снимок экрана: выбор шаблона веб-приложения для нового проекта.

  4. Введите имя CoreLab и нажмите кнопку Создать для создания проекта. Выполнение может занять некоторое время.

    Снимок экрана: конфигурация веб-приложения, добавление имени проекта.

Задача 2. Обзор решения

  1. Шаблон по умолчанию создаст решение с одним проектом ASP.NET Core с именем CoreLab. Разверните узел проекта, чтобы увидеть его содержимое.

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

  2. Этот проект создан по шаблону "модель — представление — контроллер" (MVC) и четко разделяет обязанности между данными (модели), отображением (представления) и функциональными возможностями (контроллеры). Откройте файл HomeController.cs в папке Controllers.

    Снимок экрана: проект решения с выбранным классом C# с именем HomeController.

  3. Класс HomeController по соглашению обрабатывает все входящие запросы, которые начинаются с /Home. Метод Index обрабатывает запросы к корневому каталогу (как http://site.com/Home) и другие методы обрабатывают запросы к их именованному пути по соглашению, например About(), обрабатывающему запросы к http://site.com/Home/About. Разумеется, здесь все можно настроить. Примечательно, что HomeController является контроллером по умолчанию в новом проекте, так что запросы к корню сайта (http://site.com) будут проходить через Index() контроллера HomeController, как запросы к http://site.com/Home или http://site.com/Home/Index.

    Снимок экрана: класс C# с именем HomeController.

  4. Кроме того, проект включает в себя папку Views, которая содержит другие папки, соответствующие каждому контроллеру (а также папку для общих представлений). Например, файл CSHTML (расширение HTML) представления для пути /Home/About будет находиться по пути Views/Home/About.cshtml. Откройте этот файл.

    Снимок экрана: проект решения с выбранным файлом CSHTML с именем About.

  5. Этот файл CSHTML использует синтаксис Razor для отрисовки HTML на основе сочетания стандартных тегов и встроенного кода C#. См. подробнее в электронной документации.

    Снимок экрана: часть файла CSHTML, демонстрирующая синтаксис Razor.

  6. Решение также содержит папку wwwroot, которая будет корнем веб-сайта. Вы можете поместить статическое содержимое сайта, такое как CSS, изображения и библиотеки JavaScript, непосредственно по путям, по которым оно должно находиться при развертывании сайта.

    Снимок экрана: решение с выбранной корневой папкой wwwroot.

  7. Имеются также различные файлы конфигурации, которые служат для управления проектом, его пакетами и приложением во время выполнения. Например, конфигурация приложения по умолчанию хранится в файле appsettings.json. Приведенный ниже файл appsettings.json является файлом appsettings.Development.json. Здесь можно переопределить некоторые или все параметры для той или иной среды. Visual Studio для Mac вкладывает файлы таким образом, используя ту же логику, что и Visual Studio для Windows, чтобы файлы, к которым часто требуется доступ, располагались первыми.

    Снимок экрана: подробное представление с выбранным JSON-файлом.

Задача 3. Основные сведения о размещении приложения

  1. В обозревателе решений откройте Program.cs. Это загрузчик, который запустит приложение.

    Снимок экрана: решение с выбранным исходным файлом C# с именем Program.

  2. Хотя здесь только две строки кода, они очень важны. Давайте рассмотрим их. Во-первых, создается новый WebHostBuilder. Приложениям ASP.NET Core требуется узел для выполнения. Узел должен реализовывать интерфейс IWebHost, который предоставляет доступ к коллекции функций и служб, и метод Start. Узел обычно создается с использованием экземпляра WebHostBuilder, который создает и возвращает экземпляр WebHost. WebHost ссылается на сервер, который будет обрабатывать запросы.

    Снимок экрана: метод C# Main с инструкцией, которая инициализирует переменную с именем host с типом WebHostBuilder.

  3. WebHostBuilder отвечает за создание узла, который будет выполнять начальную загрузку сервера для приложения, поэтому укажите сервер, который реализует IServer . По умолчанию это Kestrel, кроссплатформенный веб-сервер для ASP.NET Core на основе libuv, кроссплатформенной асинхронной библиотеки ввода-вывода.

    Снимок экрана: метод C# Main с переменной host — выделен метод UseKestrel, с помощью которого задается сервер.

  4. Затем устанавливается корень содержимого сервера. Он определяет, где искать файлы содержимого, например файлы представлений MVC. Корневой каталог содержимого по умолчанию — папка, из которой выполняется приложение.

    Снимок экрана: метод C# Main с переменной host — выделен метод ContentRoot, с помощью которого задается корневой каталог содержимого для сервера.

  5. Если приложение должно работать с веб-сервером IIS, метод UseIISIntegration должен вызываться в процессе создания узла. Он не настраивает сервер, как это делает метод UseKestrel. Чтобы использовать IIS с ASP.NET Core, необходимо указать UseKestrel и UseIISIntegration. Kestrel предназначен для запуска за прокси-сервером и не должен иметь прямой доступ в Интернет. UseIISIntegration задает IIS в качестве обратного прокси-сервера, но он применим только при запуске на компьютерах с IIS. Если вы развертываете приложение для Windows, оставьте его включенным. Это не помешает.

    Снимок экрана: метод C# Main с переменной host — выделен метод UseIISIntegration, с помощью которого задается обратный прокси-сервер.

  6. Рекомендуется отделять загрузку параметров от начальной загрузки приложения. Для этого вызывается UseStartup, чтобы указать, что класс Startup будет вызываться для загрузки параметров и других задач запуска, например вставка ПО промежуточного слоя, в конвейер HTTP. У вас может быть несколько вызовов UseStartup, и каждый из них должен перезаписывать предыдущие параметры по необходимости.

    Снимок экрана: метод C# Main с переменной host — выделен метод UseStartup, с помощью которого задается класс Startup.

  7. Последний шаг в создании IWebHost — вызов Build.

    Снимок экрана: метод C# Main с переменной host — выделен метод Build.

  8. Хотя классы IWebHost необходимы для реализации неблокирующего метода Start, в проектах ASP.NET Core есть метод расширения Run, который служит оболочкой для Start с блокировкой кода, поэтому не нужно вручную запрещать методу немедленный выход.

    Снимок экрана: метод C# Main — выделена инструкция host.Run.

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

  1. В обозревателе решений щелкните правой кнопкой мыши узел проекта CoreLab и выберите Параметры.

    Снимок экрана: контекстное меню для решения CoreLab с выделенным пунктом "Параметры".

  2. Диалоговое окно Параметры проекта содержит все необходимое для настройки способа сборки и выполнения приложения. Выберите узел Запуск > Конфигурации > По умолчанию на левой панели.

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

  4. Нажмите кнопку ОК.

    Снимок экрана: вкладка "Общие" конфигурации запуска — выделены установленный флажок Run on external console (Выполнить во внешней консоли) и снятый флажок Pause console output (Приостановить вывод на консоль).

  5. Нажмите клавишу F5 для сборки и запуска приложения. Или выберите Запуск > Начать отладку.

  6. Visual Studio для Mac запустит два окна. Первое — это окно консоли со сведениями о локальном приложении на сервере.

    Снимок экрана: окно консоли для локального серверного приложения.

  7. Второе — обычное окно браузера для тестирования сайта. Браузер не учитывает, где размещено приложение. Нажмите Сведения для перехода на эту страницу.

    Снимок экрана: окно браузера для тестирования сайта с выделенным пунктом About (Сведения).

  8. Помимо прочего, страница сведений отображает текст, заданный в контроллере.

    Снимок экрана: страница сведений, открывшаяся после выбора пункта About (Сведения).

  9. Не закрывайте окна и вернитесь в Visual Studio для Mac. Откройте файл Controllers/HomeController.cs, если он еще не открыт.

    Снимок экрана: решение с выбранным классом C# HomeController.

  10. Установите точку останова в первой строке метода About. Это можно сделать, щелкнув в поле или установив курсор в строку и нажав клавишу F9. В этой строке задаются данные в коллекции ViewData, которые отображаются на CSHTML-странице по пути Views/Home/About.cshtml.

    Снимок экрана: метод About — установка точки останова.

  11. Вернитесь в браузер и обновите страницу сведений. В Visual Studio для Mac будет достигнута точка останова.

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

    Снимок экрана: точка останова с развернутыми данными.

  13. Удалите точку останова в приложении, выполнив те же действия, что и для ее добавления.

  14. Откройте файл Views/Home/About.cshtml.

  15. Замените слово additional на changed и сохраните файл.

    Снимок экрана: файл CSHTML с именем About — внесение изменения в текст.

  16. Нажмите кнопку Продолжить, чтобы продолжить выполнение.

    Снимок экрана: окно Visual Studio с выделенной кнопкой "Продолжить".

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

    Снимок экрана: страница сведений — теперь с измененным текстом.

  18. Закройте окно браузера и консоль приложения. Отладка остановится.

Задача 5. Конфигурация запуска приложения

  1. В обозревателе решений откройте файл Startup.cs. Поначалу вы можете заметить красные волнистые линии, так как пакеты NuGet восстанавливаются в фоновом режиме, а компилятор Roslyn создает полную картину зависимостей проекта.

    Снимок экрана: решение с выделенным файлом класса C# с именем Startup.

  2. Найдите метод Startup. В этом разделе определяется начальная конфигурация приложения, и здесь много сведений. Давайте разберемся.

    Снимок экрана: метод Startup класса Startup.

  3. Метод запускается путем инициализации ConfigurationBuilder и задания базового пути.

    Снимок экрана: метод Startup с инструкцией, которая инициализирует переменную с именем builder с типом ConfigurationBuilder.

  4. Затем он загружает обязательный файл appsettings.json.

    Снимок экрана: метод Startup с переменной builder, в которой используется метод AddJsonFile для добавления JSON-файла с именем appsettings.

  5. После этого он пытается загрузить зависящий от среды appsettings.json, который будет переопределять существующие параметры. Например, это предоставленный файл appsettings.Development.json, используемый для этой среды. Дополнительные сведения о конфигурации в ASP.NET Core см. в документации.

    Снимок экрана: метод Startup с переменной builder, в которой используется метод AddJsonFile для добавления JSON-файла для конкретной среды.

  6. Наконец, в построитель конфигурации добавляются переменные среды, конфигурация собирается и готовится для использования.

    Снимок экрана: метод Startup, в котором в переменной builder добавляются переменные среды, а затем используется метод Build для построения конфигурации.

Задача 6. Вставка ПО промежуточного слоя приложения

  1. Найдите метод Configure в классе Startup. Здесь настраивается ПО промежуточного слоя, чтобы его можно было вставить в конвейер HTTP и использовать для обработки каждого запроса к серверу. Хотя этот метод вызывается только один раз, содержимое методов (например, UseStaticFiles) может выполняться при каждом запросе.

    Снимок экрана: метод Configure в классе Startup.

  2. Вы также можете добавить дополнительное ПО промежуточного слоя, которое выполняется как часть конвейера. Добавьте приведенный ниже код после app.UseStaticFiles для автоматического добавления заголовка X-Test в каждый исходящий ответ. Технология IntelliSense дает подсказки при вводе.

    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("X-Test", new[] { "Test value" });
        await next();
    });
    
  3. Нажмите клавишу F5 для сборки и запуска проекта.

  4. В браузере можно проверить, что заголовки добавились. Приведенные ниже инструкции предназначены для Safari, но то же самое можно сделать в Chrome или Firefox.

  5. Когда браузер загрузит сайт, выберите Safari > Настройки.

  6. На вкладке Дополнения поставьте флажок Показывать меню "Разработка" в строке меню и закройте диалоговое окно.

    Снимок экрана: панель Advanced (Дополнительно) в диалоговом окне параметров Safari с установленным флажком Show Develop menu in menu bar (Показывать меню разработки в строке меню).

  7. Выберите Разработка > Показать ресурсы страницы.

  8. Обновите окно браузера, чтобы открытые средства разработчика могли отследить и проанализировать трафик и содержимое.

  9. HTML-страница localhost, отображенная сервером, будет соответствовать элементу, выбранному по умолчанию.

    Снимок экрана с выделенной HTML_страницей localhost.

  10. Разверните боковую панель сведений.

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

  11. Прокрутите до нижней части боковой панели, чтобы увидеть заголовок ответа, добавленный в код ранее.

    Снимок экрана: выделен заголовок ответа с именем XTest и значением Test value.

  12. Закройте окно браузера и консоль, когда закончите проверку.

Сводка

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