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

Инструменты для Blazor ASP.NET Core

  • Статья

Примечание.

Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в статье о политике поддержки .NET и .NET Core. В текущем выпуске см . версию .NET 8 этой статьи.

Внимание

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

В текущем выпуске см . версию .NET 8 этой статьи.

В этой статье описаны средства для создания Blazor приложений с помощью нескольких средств:

  • Visual Studio (VS): самая полная интегрированная среда разработки (IDE) для разработчиков .NET в Windows. Включает в себя массив инструментов и функций для повышения и улучшения каждого этапа разработки программного обеспечения.
  • Visual Studio Code (VS Code) — это открытый код кроссплатформенный редактор кода, который можно использовать для разработки Blazor приложений.
  • .NET CLI. Интерфейс командной строки .NET — это кроссплатформенный набор инструментов для разработки, создания, запуска и публикации приложений .NET. Интерфейс командной строки .NET включается в пакет SDK для .NET и выполняется на любой платформе, поддерживаемой пакетом SDK.

Выберите сводную часть этой статьи, которая соответствует выбору инструментов.

Чтобы создать Blazor приложение с помощью Visual Studio, используйте следующее руководство.

  • Установите последнюю версию Visual Studio с рабочей нагрузкой ASP.NET и веб-разработки .

  • Создайте проект с помощью одного из доступных Blazor шаблонов:

    • Blazor Веб-приложение: создает веб-приложение, которое поддерживает интерактивную Blazor отрисовку на стороне сервера (интерактивная служба SSR) и отрисовку на стороне клиента (CSR). Blazor Шаблон веб-приложения рекомендуется приступить к работе с Blazor сведениями о серверных и клиентских функцияхBlazor.
    • Blazor WebAssembly Автономное приложение: создает автономное клиентское веб-приложение, которое можно развернуть как статический сайт.

Выберите Далее.

  • Установите последнюю версию Visual Studio с рабочей нагрузкой ASP.NET и веб-разработки .

  • Создайте новый проект:

    • Для работы с Blazor Server выберите шаблон Приложение Blazor Server, включающий демонстрационный код и Bootstrap, или шаблон Пустое приложение Blazor Server без демонстрационного кода и Bootstrap. Выберите Далее.
    • Для автономного Blazor WebAssembly интерфейса выберитеBlazor WebAssemblyшаблон приложения, включающий демонстрационный код и начальную загрузку, или Blazor WebAssembly шаблон "Пустое приложение" без демонстрационного кода и начальной загрузки. Выберите Далее.

  • Установите последнюю версию Visual Studio с рабочей нагрузкой ASP.NET и веб-разработки .

  • Создайте новый проект:

    • Для работы с Blazor Server выберите шаблон приложения Blazor Server. Выберите Далее.
    • Для работы с Blazor WebAssembly выберите шаблон приложения Blazor WebAssembly. Выберите Далее.

  • Укажите значение Имя проекта и подтвердите правильность значения Расположение.

  • Дополнительные сведения о параметрах в диалоговом окне "Дополнительные сведения" смBlazor. в разделе "Шаблоны проектов" и "Параметры шаблона".

  • Для размещенного Blazor WebAssembly приложения установите флажок ASP.NET Core Hosted в диалоговом окне "Дополнительные сведения".
  • Нажмите кнопку создания.

Visual Studio Code — это кроссплатформенная интегрированная среда разработки (IDE) с открытым кодом, которую можно использовать для разработки приложений Blazor.

Установите последнюю версию Visual Studio Code для платформы.

Установите пакет средств разработки C# для Visual Studio Code. Дополнительные сведения см. в разделе Отладка приложений ASP.NET CoreBlazor.

Если вы не знакомы с VS Code, ознакомьтесь с документацией по VS Code. Если вы не знакомы с пакетом SDK для .NET, см . статью "Что такое пакет SDK для .NET?" и связанные статьи в документации по пакету SDK для .NET.

Создайте новый проект:

  • Откройте VS Code.

  • Перейдите в представление обозревателя и нажмите кнопку "Создать проект .NET". Кроме того, можно создать палитру команд с помощью клавиш CTRL+SHIFT+P, а затем ввести ".NET" и найти и выбрать команду .NET: Создать проект.

  • Blazor Выберите шаблон проекта из списка.

  • В диалоговом окне "Расположение проекта" создайте или выберите папку для проекта.

  • В палитре команд укажите имя проекта или примите имя по умолчанию.

  • Выберите "Создать проект", чтобы создать проект или настроить параметры проекта, выбрав "Показать все параметры шаблона". Дополнительные сведения о шаблонах и параметрах см. в Blazor разделе "Шаблоны проектов" и "Параметры шаблона".

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

    Палитра команд запрашивает выбор отладчика. Выберите C# из списка.

    Затем выберите конфигурацию запуска https .

  • Чтобы остановить приложение, нажмите клавиши SHIFT+F5 на клавиатуре.

Инструкции по разработке Visual Studio Code (VS Code) для ASP.NET Core в некоторых частях Blazor документации используют интерфейс командной строки .NET, который входит в пакет SDK для .NET. Команды CLI .NET выдаются в интегрированном терминале VS Code, который по умолчанию используется в командной оболочке PowerShell. Терминал открывается путем выбора нового терминала в меню терминала в строке меню меню.

Дополнительные сведения о конфигурации и использовании Visual Studio Code см. в документации по Visual Studio Code.

Запуск размещенного Blazor WebAssembly и конфигурация задачи

Для размещенных решенийBlazor WebAssembly добавьте (или переместите) папку .vscode с файлами launch.json и tasks.json в родительскую папку, содержащую типичные папки проекта: Client, Server и Shared. Обновите или подтвердите, что конфигурация в файлах launch.json и tasks.json выполняет размещенное приложение Blazor WebAssembly из проекта Server.

Проверьте файл и определите Properties/launchSettings.json URL-адрес приложения из applicationUrl свойства. В зависимости от версии платформы протокол URL-адреса является безопасным (HTTPS) https://localhost:{PORT} или небезопасным (HTTP), http://localhost:{PORT}где {PORT} заполнитель является назначенным портом. Запишите URL-адрес для использования в launch.json файле.

В конфигурации запуска файла .vscode/launch.json:

  • В качестве текущего рабочего каталога (cwd) задайте папку проекта Server.
  • Укажите URL-адрес приложения с помощью свойства url. Используйте значение, взятое ранее из файла Properties/launchSettings.json.
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

В предыдущей конфигурации используются следующие элементы:

  • Заполнитель {SERVER APP FOLDER}. Это папка проекта Server, обычно Server.
  • Заполнитель {URL}. Это URL-адрес приложения, который указан в файле Properties/launchSettings.json приложения в свойстве applicationUrl.

Если предпочтительнее использовать Google Chrome вместо Microsoft Edge, обновите или добавьте свойство "browser": "chrome" в конфигурацию.

В следующем примере файла .vscode/launch.json:

  • Задает папку Server в качестве текущего рабочего каталога.
  • Задает http://localhost:7268 в качестве URL-адреса приложения.
  • Указывается Google Chrome в качестве браузера по умолчанию вместо Microsoft Edge.
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

Полный файл .vscode/launch.json выглядит так:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

В .vscode/tasks.json добавьте аргумент build, который определяет путь к файлу проекта приложения Server:

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

В предыдущем аргументе:

  • Заполнитель {SERVER APP FOLDER}. Это папка проекта Server, обычно Server.
  • Заполнитель {PROJECT NAME}. Это имя приложения, обычно основанное на имени решения, за которым следует .Server в приложении, созданном на базе шаблона проекта Blazor WebAssembly.

Пример файла .vscode/tasks.json с проектом Server, который имеет имя BlazorHosted и расположен в папке решения Server:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

Примечание.

Сейчас поддерживается только отладка в браузере.

Вы не можете автоматически перестроить серверное приложение Server размещенного решения Blazor WebAssembly во время отладки, например путем запуска приложения с помощью команды dotnet watch run.

.vscode/launch.json (конфигурация launch):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

В предыдущей конфигурации для текущего рабочего каталога (cwd) заполнителем {SERVER APP FOLDER} является папка проекта Server, обычно "Server".

Если используется Microsoft Edge и в системе не установлен браузер Google Chrome, добавьте в конфигурацию дополнительное свойство "browser": "edge".

Пример для папки проекта Server, которая порождает Microsoft Edge в качестве браузера для выполнения отладки, вместо браузера по умолчанию Google Chrome:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (аргументы командыdotnet):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

В предыдущем аргументе:

  • Заполнитель {SERVER APP FOLDER} — это папка проекта Server, обычно "Server".
  • Заполнитель {PROJECT NAME} — это имя приложения, обычно основанное на имени решения, за которым следует ".Server" в приложении, созданном на основе шаблона проекта Blazor.

В следующем примере из руководства по использованию SignalR с приложением Blazor WebAssembly используется имя папки проекта Server и имя проекта BlazorWebAssemblySignalRApp.Server:

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

Пакет SDK для .NET — это набор библиотек и инструментов, которые разработчики используют для создания приложений и библиотек .NET.

Установите пакет SDK для .NET. Команды выдаются в командной оболочке с помощью .NET CLI.

Если вы ранее установили один или несколько пакетов SDK для .NET и хотите просмотреть активную версию, выполните следующую команду в командной оболочке:

dotnet --version

Если вы не знакомы с пакетом SDK для .NET, см . статью "Что такое пакет SDK для .NET?" и связанные статьи в документации по пакету SDK для .NET.

Создайте новый проект:

  • Перейдите в каталог с помощью cd команды, в которой нужно создать папку проекта (например, cd c:/users/Bernie_Kopell/Documents).

  • Для работы с веб-приложением с интерактивной отрисовкой на стороне Blazor сервера по умолчанию (интерактивная служба SSR) выполните следующую команду:

    dotnet new blazor -o BlazorApp

  • Для автономного Blazor WebAssembly интерфейса выполните следующую команду в командной оболочке, которая использует blazorwasm шаблон:

    dotnet new blazorwasm -o BlazorApp

Создайте новый проект:

  • Перейдите в каталог с помощью cd команды, в которой нужно создать папку проекта (например, cd c:/users/Bernie_Kopell/Documents).

  • Для работы с Blazor Server с демонстрационным кодом и Bootstrap выполните следующую команду:

    dotnet new blazorserver -o BlazorApp

  • Для автономного Blazor WebAssembly взаимодействия с демонстрацией кода и начальной загрузки выполните следующую команду:

    dotnet new blazorwasm -o BlazorApp

  • Для работы с размещенной платформой Blazor WebAssembly с демонстрационный кодом и Bootstrap добавьте в команду параметр hosted (-ho/--hosted):

    dotnet new blazorwasm -o BlazorApp -ho

Создайте новый проект:

  • Перейдите в каталог с помощью cd команды, в которой нужно создать папку проекта (например, cd c:/users/Bernie_Kopell/Documents).

  • Для работы с Blazor WebAssembly выполните следующую команду:

    dotnet new blazorwasm -o BlazorApp

  • Для работы с размещенной платформой Blazor WebAssembly добавьте параметр hosted (-ho или --hosted) в команду.

    dotnet new blazorwasm -o BlazorApp -ho

  • Для работы с Blazor Server выполните следующую команду:

    dotnet new blazorserver -o BlazorApp

Дополнительные сведения о шаблонах и параметрах см. в Blazor разделе "Шаблоны проектов" и "Параметры шаблона".

Выполнить приложение

Внимание

При выполнении Blazor веб-приложения запустите приложение из серверного проекта решения, который является проектом с именем, который не заканчивается .Client.

Внимание

При выполнении размещенного приложения Blazor WebAssembly запустите приложение из проекта Server решения.

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

Visual Studio отображает следующее диалоговое окно, если проект не настроен на использование SSL:

Диалоговое окно самозаверяющего сертификата доверия

Выберите Да, если вы делаете SSL-сертификат доверенным.

Отобразится следующее диалоговое окно.

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

Выберите "Да", чтобы подтвердить риск и установить сертификат.

Сведения о доверии сертификату разработки HTTPS для браузера Firefox см. в разделе "Принудительное применение HTTPS" в ASP.NET Core.

Visual Studio:

  • Компилирует и запускает приложение.
  • Запускает браузер https://localhost:{PORT}по умолчанию, в котором отображается пользовательский интерфейс приложения. Заполнитель {PORT} — это случайный порт, назначенный при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json .

Сведения о доверии сертификату разработки HTTPS для браузеров, отличных от Firefox, см. в руководстве по доверию к сертификату разработки HTTPS. При использовании браузера Firefox ознакомьтесь с руководством по доверию сертификатов для Firefox.

В VS Code нажмите клавиши CTRL+F5 (Windows) или «+F5» (macOS), чтобы запустить приложение без отладки.

В строке выбора отладчика в палитре команд в верхней части пользовательского интерфейса VS Code выберите C#. В следующем запросе выберите профиль HTTPS ([https]).

Браузер по умолчанию запускается https://localhost:{PORT}по адресу, в котором отображается пользовательский интерфейс приложения. Заполнитель {PORT} — это случайный порт, назначенный при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json .

Сведения о доверии сертификату разработки HTTPS для браузеров, отличных от Firefox, см. в руководстве по доверию к сертификату разработки HTTPS. При использовании браузера Firefox ознакомьтесь с руководством по доверию сертификатов в разделе Firefox этой статьи.

В командной оболочке, открывшейся в корневой папке проекта, выполните dotnet watch команду, чтобы скомпилировать и запустить приложение:

dotnet watch

Браузер по умолчанию запускается https://localhost:{PORT}по адресу, в котором отображается пользовательский интерфейс приложения. Заполнитель {PORT} — это случайный порт, назначенный при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json .

Когда приложение, созданное из Blazor шаблона проекта веб-приложения, запускается с помощью интерфейса командной строки .NET, приложение выполняется в конечной точке HTTP (небезопасной), так как первый профиль, найденный в файле параметров запуска приложения () является профилем HTTP (Properties/launchSettings.jsonнебезопасным) именем http. Профиль HTTP был помещен в первую позицию, чтобы упростить переход на внедрение безопасности SSL/HTTPS для пользователей, отличных от Windows.

Один из способов запуска приложения с ssl/HTTPS — передать |--launch-profile-lpпараметр с https именем профиля в dotnet watch команду:

dotnet watch -lp https

Альтернативный подход — переместить https профиль над http профилем в Properties/launchSettings.json файле и сохранить изменения. После изменения порядка профиля в файле dotnet watch команда всегда использует https профиль по умолчанию.

Остановка приложения

Остановите приложение с помощью одного из следующих подходов:

  • Закройте окно браузера.
  • В Visual Studio либо:

    • Нажмите кнопку "Остановить" в строке меню Visual Studio:

      Кнопка

    • Нажмите клавиши SHIFT+F5 на клавиатуре.

Остановите приложение с помощью следующего подхода:

  1. Закройте окно браузера.
  2. В VS Code либо:
    • В меню "Запуск" выберите "Остановить отладку".
    • Нажмите клавиши SHIFT+F5 на клавиатуре.

Остановите приложение с помощью следующего подхода:

  1. Закройте окно браузера.
  2. В командной оболочке нажмите клавиши CTRL+C (Windows) или «+C» (macOS).

Файл решения Visual Studio (.sln).

Решение представляет собой контейнер для одного или нескольких взаимосвязанных проектов кода. Файлы решения используют уникальный формат и не предназначены для прямого редактирования.

Visual Studio и Visual Studio Code (VS Code) используют файл решения (.sln) для хранения параметров решения. Интерфейс командной строки .NET не упорядочивают проекты с помощью файла решения, но он может создавать файлы решения и перечислять и изменять проекты в файлах решений с помощью dotnet sln команды. Другие команды интерфейса командной строки .NET используют путь к файлу решения для разных команд публикации, тестирования и упаковки.

Blazor В документации решение используется для описания приложений, созданных из Blazor WebAssembly шаблона проекта, с включенным параметром ASP.NET Core Hosted или из Blazor Hybrid шаблона проекта. Приложения, созданные на основе этих шаблонов проектов, по умолчанию содержат файл решения (.sln). Для размещенных Blazor WebAssembly приложений, в которых разработчик не использует Visual Studio, файл решения можно игнорировать или удалить, если он не используется с командами .NET CLI.

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

Blazor Параметры шаблонов проектов и шаблонов

Платформа Blazor предоставляет шаблоны проектов для создания новых приложений. Шаблоны используются для создания новых Blazor проектов и решений независимо от средств Blazor разработки (Visual Studio, Visual Studio Code или интерфейса командной строки .NET).

  • Blazor Шаблон проекта веб-приложения: blazor
  • Шаблон проекта автономного Blazor WebAssembly приложения: blazorwasm
  • Шаблоны проектов Blazor Server: blazorserver, blazorserver-empty
  • Шаблоны проектов Blazor WebAssembly: blazorwasm, blazorwasm-empty
  • Шаблон проекта Blazor Server: blazorserver
  • Шаблон проекта Blazor WebAssembly: blazorwasm

Дополнительные сведения о шаблонах проектов Blazor см. в статье Структура проекта ASP.NET Core Blazor.

Термины и понятия отрисовки, используемые в следующих подразделах, представлены в следующих разделах статьи "Основные принципы ".

Подробные рекомендации по режимам отрисовки приведены в статье о режимах отрисовки ASP.NET CoreBlazor.

Интерактивный режим отрисовки

  • Интерактивная отрисовка на стороне сервера (интерактивная служба SSR) включена по умолчанию с параметром "Сервер ".
  • Чтобы включить взаимодействие только с отрисовкой на стороне клиента (CSR), используйте параметр WebAssembly .
  • Чтобы включить режим интерактивной отрисовки и возможность автоматического переключения между ними во время выполнения, используйте параметр "Автоматический" (сервер и webAssembly) (автоматический) режим отрисовки.
  • Если задано значение интерактивности None, созданное приложение не имеет интерактивности. Приложение настроено только для отрисовки на стороне сервера.

Режим интерактивной автоматической отрисовки изначально использует интерактивный SSR, а пакет приложений .NET и среда выполнения загружаются в браузер. После активации среды выполнения .NET WebAssembly режим отрисовки переключается на интерактивную отрисовку WebAssembly.

По умолчанию Blazor шаблон веб-приложения включает статический и интерактивный SSR с помощью одного проекта. Если вы также включите CSR, проект включает дополнительный клиентский проект (.Client) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие веб-интерфейсы webAssembly или автоматические режимы отрисовки, должны быть созданы из клиентского проекта.

Внимание

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

Расположение интерактивности

Параметры расположения интерактивности:

  • На страницу или компонент: по умолчанию настраивается интерактивность на каждую страницу или компонент.
  • Global: использование этого параметра глобально настраивает интерактивность для всего приложения.

Расположение интерактивной активности можно задать только в том случае, если режим интерактивной отрисовки не None включен и проверка подлинности не включена.

Примеры страниц

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

Дополнительные рекомендации по параметрам шаблона

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

  • Шаблоны .NET по умолчанию для dotnet новой статьи в документации по .NET Core:
    • blazorserver (включает blazorserver-empty параметры)
    • blazorwasm (включает blazorwasm-empty параметры)
  • Передача параметра справки (-h или --help) dotnet new команде CLI в командной оболочке:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h

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

  • Шаблоны .NET по умолчанию для dotnet новой статьи в документации по .NET Core:
  • Передача параметра справки (-h или --help) dotnet new команде CLI в командной оболочке:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Дополнительные ресурсы