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

  • Статья

Внимание

Visual Studio для Mac планируется выйти на пенсию 31 августа 2024 г. в соответствии с корпорацией Майкрософт Современная политика жизненного цикла. Хотя вы можете продолжать работать с Visual Studio для Mac, есть несколько других вариантов для разработчиков на Mac, таких как предварительная версия нового расширения комплекта разработки C# для VS Code.

Дополнительные сведения о поддержке временная шкала и альтернативах.

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 Web App Model-View-Controller (C#). Нажмите кнопку Далее.

    Screenshot showing how to select a Web Application template for your new project.

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

    Screenshot of Web Application configuration, adding a Project Name.

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

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

    Screenshot of the solution project node selected to see its contents, including folders and files.

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

    Screenshot of solution project with a C# class named HomeController selected.

  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.

    Screenshot of a C# class named HomeController.

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

    Screenshot of solution project with the C S H T M L file named About selected.

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

    Screenshot of part of a C S H T M L file showing Razor syntax.

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

    Screenshot of solution with the w w w root folder selected.

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

    Screenshot showing a detail view with a json file selected.

Задача 3. Понимание размещения приложения

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

    Screenshot of solution with the C# source file named Program selected.

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

    Screenshot of the C# Main method with a statement that initializes a variable named host with type WebHostBuilder.

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

    Screenshot of the C# Main method highlighting the host variable setting the server with the UseKestrel method.

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

    Screenshot of the C# Main method highlighting the host variable setting the content root for the server with the UseContentRoot method.

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

    Screenshot of the C# Main method highlighting the host variable setting the reverse proxy server with the UseIISIntegration method.

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

    Screenshot of the C# Main method highlighting the host variable setting the startup class with the UseStartup option.

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

    Screenshot of the C# Main method highlighting the host variable with the Build method.

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

    Screenshot of the C# Main method highlighting the statement host dot Run.

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

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

    Screenshot showing the context menu for the CoreLab solution, highlighting Options.

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

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

  4. Щелкните OK.

    Screenshot showing the Run Configuration General tab, with Run on external console selected and Pause console output not selected.

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

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

    Screenshot showing the console window for the self-hosted server application.

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

    Screenshot showing a browser window to test the site, highlighting the About option.

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

    Screenshot showing the result of selecting the About option, which is an About page.

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

    Screenshot showing the solution with the HomeController C# class again selected.

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

    Screenshot showing the About method with a breakpoint set.

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

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

    Screenshot showing a breakpoint with its data expanded.

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

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

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

    Screenshot of the C S H T M L file named About with a change to its text.

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

    Screenshot of the Visual Studio window highlighting the Continue button.

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

    Screenshot of the About page, this time with the changed text.

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

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

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

    Screenshot of the solution with the C# class file named Startup selected.

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

    Screenshot showing the Startup method of the Startup class.

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

    Screenshot of the Startup method, showing a statement initializing a variable named builder with type ConfigurationBuilder.

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

    Screenshot of the Startup method, showing the builder variable using the AddJsonFile method to add the json file named appsettings.

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

    Screenshot of the Startup method, showing the builder variable using the AddJsonFile method to add an environment-specific appsettings json file.

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

    Screenshot of the Startup method, showing the builder variable adding environment variables and then using the Build method to build the configuration.

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

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

    Screenshot showing the Configure method in the Startup class.

  2. Вы также можете добавить дополнительное ПО промежуточного слоя, которое выполняется как часть конвейера. Добавьте следующий код после приложения. ИспользуйтеStaticFiles для автоматического добавления заголовка 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. На вкладке Дополнения поставьте флажок Показывать меню "Разработка" в строке меню и закройте диалоговое окно.

    Screenshot showing the Advanced pane in the Safari Preferences dialog box with the Show Develop menu in menu bar option selected.

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

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

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

    Screenshot highlighting the localhost H T M L page.

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

    Screenshot highlighting the control to use to expand the Details sidebar.

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

    Screenshot highlighting the response header named XTest with a value of Test value.

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

Итоги

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