Инструменты для Blazor ASP.NET Core
Примечание.
Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.
Внимание
Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
В текущем выпуске см . версию .NET 8 этой статьи.
В этой статье описываются средства для создания приложений Blazor на различных платформах. Выберите платформу в верхней части этой статьи.
Чтобы создать Blazor приложение в Windows, используйте следующее руководство.
Установите последнюю версию 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. Выберите Далее.
- Укажите значение Имя проекта и подтвердите правильность значения Расположение.
Примечание.
Термины и понятия отрисовки, используемые в следующих рекомендациях, представлены в следующих разделах статьи "Основные принципы".
- Основные понятия отрисовки клиента и сервера
- Основные понятия статической и интерактивной отрисовки
- Режимы отрисовки
Подробные рекомендации по режимам отрисовки приведены в статье о режимах отрисовки ASP.NET CoreBlazor.
Blazor Для веб-приложения в диалоговом окне "Дополнительные сведения":
Раскрывающийся список интерактивного режима отрисовки
- Интерактивная отрисовка на стороне сервера (интерактивная служба SSR) включена по умолчанию с параметром "Сервер ".
- Чтобы включить взаимодействие только с отрисовкой на стороне клиента (CSR), выберите параметр WebAssembly .
- Чтобы включить режим интерактивной отрисовки и возможность автоматического переключения между ними во время выполнения, выберите параметр "Автоматический" (сервер и webAssembly) (автоматический) режим отрисовки.
- Если задано значение интерактивности
None
, созданное приложение не имеет интерактивности. Приложение настроено только для отрисовки на стороне сервера.
Режим интерактивной автоматической отрисовки изначально использует интерактивный SSR, а пакет приложений .NET и среда выполнения загружаются в браузер. После активации среды выполнения .NET WebAssembly режим отрисовки переключается на интерактивную отрисовку WebAssembly.
По умолчанию Blazor шаблон веб-приложения включает статический и интерактивный SSR с помощью одного проекта. Если вы также включите CSR, проект включает дополнительный клиентский проект (
.Client
) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие веб-интерфейсы webAssembly или автоматические режимы отрисовки, должны быть созданы из клиентского проекта.Дополнительные сведения см. в режимах отрисовки ASP.NET CoreBlazor.
Раскрывающийся список расположений в интерактивном расположении
- На страницу или компонент: по умолчанию настраивается интерактивность на каждую страницу или компонент.
- Глобальный: выбор этого параметра глобально настраивает интерактивность для всего приложения.
Расположение интерактивной активности можно задать только в том случае, если режим интерактивной отрисовки не
None
включен и проверка подлинности не включена.Чтобы включить примеры страниц и макет на основе стиля начальной загрузки, выберите пункт "Включить примеры страниц" проверка box. Отключите этот параметр для проекта без примеров страниц и стилизации начальной загрузки.
Дополнительные сведения см. в режимах отрисовки ASP.NET CoreBlazor.
- Для размещенного Blazor WebAssemblyприложения в диалоговом окне "Дополнительные сведения" выберите папку ASP.NET Core Hosted проверка box.
Нажмите кнопку создания.
Нажмите клавиши CTRL+F5 (Windows) или ⌘+F5 (macOS), чтобы запустить приложение.
При запуске размещенного решенияBlazor WebAssembly в Visual Studio автозагружаемым проектом решения является проект Server.
Дополнительные сведения об установке доверия к сертификату разработки HTTPS ASP.NET Core см. в статье Принудительное применение протокола HTTPS в ASP.NET Core.
Внимание
При выполнении размещенного приложения Blazor WebAssembly запустите приложение из проекта Server решения.
При запуске приложения используется только Properties/launchSettings.json
файл в Server проекте.
Чтобы создать Blazor приложение в Linux или macOS, используйте следующее руководство.
Используйте интерфейс командной строки .NET (CLI) для выполнения команд в командной оболочке.
Установите последнюю версию пакета SDK для .NET Core. Если вы установили пакет SDK ранее, можно определить установленную версию, выполнив следующую команду:
dotnet --version
Установите последнюю версию Visual Studio Code для платформы.
Установите пакет средств разработки C# для Visual Studio Code. Дополнительные сведения см. в разделе Отладка приложений ASP.NET CoreBlazor.
Создайте новый проект:
Blazor Для работы с веб-приложением с интерактивной отрисовкой на стороне сервера по умолчанию выполните следующую команду в командной оболочке, которая использует
blazor
шаблон проекта:dotnet new blazor -o BlazorApp
Чтобы включить только отрисовку на стороне клиента, используйте
-int|--interactivity
параметрWebAssembly
:dotnet new blazor -o BlazorApp -int WebAssembly
Чтобы включить интерактивную отрисовку на стороне сервера, за
-int|--interactivity
которой следует отрисовка на стороне клиента, используйте параметрAuto
:dotnet new blazor -o BlazorApp -int Auto
Если интерактивность отключена, задав
-int|--interactivity
параметр ,None
созданное приложение не имеет интерактивности. Приложение настроено только для отрисовки на стороне статического сервера:dotnet new blazor -o BlazorApp -int None
Режим интерактивной автоматической отрисовки изначально использует интерактивную отрисовку на стороне сервера (интерактивная служба SSR), а пакет приложений .NET и среда выполнения загружаются в браузер. После активации среды выполнения .NET WebAssembly режим отрисовки переключается на режим интерактивной отрисовки WebAssembly.
По умолчанию Blazor шаблон веб-приложения включает как статическую, так и интерактивную отрисовку на стороне сервера с помощью одного проекта. Если вы также включите режим отрисовки Интерактивного веб-приложения WebAssembly, проект включает дополнительный клиентский проект (
.Client
) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие режимы интерактивного веб-просмотра или интерактивного автоматического отрисовки, должны быть созданы из клиентского проекта.Дополнительные сведения см. в режимах отрисовки ASP.NET CoreBlazor.
Приложения по умолчанию являются расположением интерактивности на основе каждого компонента или страницы. Чтобы установить интерактивность для всего приложения, используйте
-ai|--all-interactive
этот параметр:dotnet new blazor -o BlazorApp -ai
Выбор этого параметра задает интерактивность для всего приложения в компоненте
App
, указав режим отрисовки для верхнего уровняHeadOutlet
иRoutes
компонентов. Настройка интерактивности этих компонентов распространяет интерактивность ко всем дочерним компонентам в приложении.Расположение интерактивного взаимодействия можно задать только в том случае, если режим интерактивной отрисовки (
-int|--interactivity
) неNone
включен и проверка подлинности не включена.Чтобы создать приложение без примеров страниц и стилей, используйте
-e|--empty
этот параметр:dotnet new blazor -o BlazorApp -e
Для автономного Blazor WebAssembly интерфейса выполните следующую команду в командной оболочке, которая использует
blazorwasm
шаблон:dotnet new blazorwasm -o BlazorApp
Чтобы создать автономное Blazor WebAssembly приложение без примеров страниц и стилей, используйте
-e|--empty
этот параметр:dotnet new blazorwasm -o BlazorApp -e
Создайте новый проект:
Для работы с Blazor Server с демонстрационным кодом и Bootstrap выполните следующую команду:
dotnet new blazorserver -o BlazorApp
Кроме того, создайте приложение без демонстрационного кода и начальной Blazor Server
blazorserver-empty
загрузки с помощью шаблона проекта:dotnet new blazorserver-empty -o BlazorApp
Для автономного Blazor WebAssembly взаимодействия с демонстрацией кода и начальной загрузки выполните следующую команду:
dotnet new blazorwasm -o BlazorApp
Кроме того, создайте автономное Blazor WebAssembly приложение без демонстрационного кода и начальной загрузки с помощью
blazorwasm-empty
шаблона проекта:dotnet new blazorwasm-empty -o BlazorApp
Для работы с размещенной платформой Blazor WebAssembly с демонстрационный кодом и Bootstrap добавьте в команду параметр hosted (
-ho
/--hosted
):dotnet new blazorwasm -o BlazorApp -ho
Можно также создать размещенное приложение Blazor WebAssembly без демонстрационного кода и Bootstrap, используя шаблон
blazorwasm-empty
с параметром hosted.dotnet new blazorwasm-empty -o BlazorApp -ho
Создайте новый проект:
Для работы с 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
Откройте папку BlazorApp
в Visual Studio Code.
Когда Visual Studio Code запрашивает добавление ресурсов для сборки и отладки проекта, нажмите кнопку "Да".
Если Visual Studio Code не предлагает автоматически добавлять ресурсы сборки и отладки ( .vscode
папка с launch.json
файлами tasks.json
), выберите "Просмотреть>палитру команд " и введите ".NET
" в поле поиска. В списке команд выберите команду ".NET: Generate Assets for Build and Debug
".
Примечание.
Дополнительные сведения о конфигурации и использовании Visual Studio Code см. в документации по Visual Studio Code.
Файл Properties/launchSettings.json
проекта содержит свойство inspectUri
для прокси-сервера отладки во всех профилях. Оно указано в разделе profiles
файла:
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
Запуск размещенного Blazor WebAssembly и конфигурация задачи
Для размещенных решенийBlazor WebAssembly добавьте (или переместите) папку .vscode
с файлами launch.json
и tasks.json
в родительскую папку, содержащую типичные папки проекта: Client, Server и Shared
. Обновите или подтвердите, что конфигурация в файлах launch.json
и tasks.json
выполняет размещенное приложение Blazor WebAssembly из проекта Server.
Внимание
При выполнении размещенного приложения Blazor WebAssembly запустите приложение из проекта Server решения.
При запуске приложения используется только Properties/launchSettings.json
файл в 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"
}
]
}
Нажмите клавиши CTRL+F5 (Windows) или ⌘+F5 (macOS), чтобы запустить приложение.
Примечание.
Сейчас поддерживается только отладка в браузере.
Вы не можете автоматически перестроить серверное приложение 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",
...
],
...
Нажмите клавиши CTRL+F5 (Windows) или ⌘+F5 (macOS), чтобы запустить приложение.
Установка доверия к сертификату разработки
Дополнительные сведения см. в статье Принудительное использование HTTPS.
Файл решения Visual Studio (.sln
).
Решение представляет собой контейнер для одного или нескольких взаимосвязанных проектов кода. Visual Studio использует файл решения (.sln
) для хранения параметров решения. Файлы решения используют уникальный формат и не предназначены для прямого редактирования.
Средства за пределами Visual Studio могут взаимодействовать с файлами решения:
- Интерфейс командной строки .NET может создавать файлы решений, получать или изменять проекты в файлах решения с помощью команды
dotnet sln
. Другие команды интерфейса командной строки .NET используют путь к файлу решения для разных команд публикации, тестирования и упаковки. - Visual Studio Code может выполнять команду
dotnet sln
и другие команды интерфейса командной строки .NET через встроенный терминал, но не использует напрямую параметры, включенные в файл решения.
Blazor В документации решение используется для описания приложений, созданных из Blazor WebAssembly шаблона проекта, с включенным параметром ASP.NET Core Hosted или из Blazor Hybrid шаблона проекта. Приложения, созданные на основе этих шаблонов проектов, по умолчанию содержат файл решения (.sln
). Для размещенных Blazor WebAssembly приложений, в которых разработчик не использует Visual Studio, файл решения можно игнорировать или удалить, если он не используется с командами .NET CLI.
Дополнительные сведения см. в ресурсах в документации по Visual Studio:
Использование Visual Studio для кроссплатформенной разработки на Blazor
Visual Studio Code — это кроссплатформенная интегрированная среда разработки (IDE) с открытым кодом, которую можно использовать для разработки приложений Blazor. Используйте .NET CLI для создания приложения Blazor, которое будет разрабатываться в Visual Studio Code. Дополнительные сведения см. в версии Linux или macOS этой статьи.
Дополнительные сведения о конфигурации и использовании Visual Studio Code см. в документации по Visual Studio Code.
Параметры шаблона 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.
Дополнительные сведения о параметрах шаблонов см. на следующих ресурсах.
- Шаблоны .NET по умолчанию для dotnet новой статьи в документации по .NET Core:
- Передача параметра справки (
-h
или--help
)dotnet new
команде CLI в командной оболочке:dotnet new blazor -h
dotnet new blazorwasm -h
- Шаблоны .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
Дополнительные ресурсы
ASP.NET Core
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по