Инструменты для 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 проекта WebAssmebly недоступен в ASP.NET Core 8.0 или более поздней версии. Чтобы создать размещенное приложение, необходимо выбрать параметр Framework ранее .NET 8.0 с помощью флажка ASP.NET Core Hosted.Blazor WebAssembly
- Для размещенного 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
Примечание.
Шаблон размещенного Blazor проекта WebAssmebly недоступен в ASP.NET Core 8.0 или более поздней версии. Чтобы создать размещенное Blazor WebAssembly приложение с помощью пакета SDK для .NET 8.0 или более поздней версии, передайте
-f|--framework
параметр с целевой платформой 7.0 (net7.0
):dotnet new blazorwasm -o BlazorApp -ho -f net7.0
Создайте новый проект:
Перейдите в каталог с помощью
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 проекта WebAssmebly недоступен в ASP.NET Core 8.0 или более поздней версии. Чтобы создать размещенное Blazor WebAssembly приложение с помощью пакета SDK для .NET 8.0 или более поздней версии, передайте
-f|--framework
параметр с моникером целевой платформы (например,net6.0
):dotnet new blazorwasm -o BlazorApp -ho -f net6.0
Для работы с Blazor Server выполните следующую команду:
dotnet new blazorserver -o BlazorApp
Дополнительные сведения о шаблонах и параметрах см. в Blazor разделе "Шаблоны проектов" и "Параметры шаблона".
Выполнить приложение
Внимание
При выполнении Blazor веб-приложения запустите приложение из серверного проекта решения, который является проектом с именем, который не заканчивается .Client
.
Внимание
При выполнении размещенного приложения Blazor WebAssembly запустите приложение из проекта Server решения.
Нажмите клавиши CTRL+F5 на клавиатуре, чтобы запустить приложение без отладчика.
Visual Studio отображает следующее диалоговое окно, если проект не настроен на использование SSL:
Выберите Да, если вы делаете SSL-сертификат доверенным.
Отобразится следующее диалоговое окно.
Выберите "Да", чтобы подтвердить риск и установить сертификат.
Visual Studio:
- Компилирует и запускает приложение.
- Запускает браузер
https://localhost:{PORT}
по умолчанию, в котором отображается пользовательский интерфейс приложения. Заполнитель{PORT}
— это случайный порт, назначенный при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проектаProperties/launchSettings.json
.
В VS Code нажмите клавиши CTRL+F5 (Windows) или «+F5» (macOS), чтобы запустить приложение без отладки.
В строке выбора отладчика в палитре команд в верхней части пользовательского интерфейса VS Code выберите C#. В следующем запросе выберите профиль HTTPS ([https]
).
Браузер по умолчанию запускается https://localhost:{PORT}
по адресу, в котором отображается пользовательский интерфейс приложения. Заполнитель {PORT}
— это случайный порт, назначенный при создании приложения. Если необходимо изменить порт из-за конфликта локального порта, измените порт в файле проекта Properties/launchSettings.json
.
В командной оболочке, открывшейся в корневой папке проекта, выполните 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 на клавиатуре.
Остановите приложение с помощью следующего подхода:
- Закройте окно браузера.
- В VS Code либо:
- В меню "Запуск" выберите "Остановить отладку".
- Нажмите клавиши SHIFT+F5 на клавиатуре.
Остановите приложение с помощью следующего подхода:
- Закройте окно браузера.
- В командной оболочке нажмите клавиши 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.
Дополнительные сведения см. на следующих ресурсах:
- Общие сведения о проектах и решениях (документация по Visual Studio)
- Что такое решения и проекты в Visual Studio? (Документация по Visual Studio)
- Управление проектами (документация по VS 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.
Термины и понятия отрисовки, используемые в следующих подразделах, представлены в следующих разделах статьи "Основные принципы ".
- Основные понятия отрисовки клиента и сервера
- Основные понятия статической и интерактивной отрисовки
- Режимы отрисовки
Подробные рекомендации по режимам отрисовки приведены в статье о режимах отрисовки ASP.NET CoreBlazor.
Интерактивный режим отрисовки
- Интерактивная отрисовка на стороне сервера (интерактивная служба SSR) включена по умолчанию с параметром "Сервер ".
- Чтобы включить взаимодействие только с отрисовкой на стороне клиента (CSR), используйте параметр WebAssembly .
- Чтобы включить режим интерактивной отрисовки и возможность автоматического переключения между ними во время выполнения, используйте параметр "Автоматический" (сервер и webAssembly) (автоматический) режим отрисовки.
- Если задано значение интерактивности
None
, созданное приложение не имеет интерактивности. Приложение настроено только для отрисовки на стороне сервера.
Режим интерактивной автоматической отрисовки изначально использует интерактивный SSR, а пакет приложений .NET и среда выполнения загружаются в браузер. После активации среды выполнения .NET WebAssembly режим отрисовки переключается на интерактивную отрисовку WebAssembly.
По умолчанию Blazor шаблон веб-приложения включает статический и интерактивный SSR с помощью одного проекта. Если вы также включите CSR, проект включает дополнительный клиентский проект (.Client
) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие веб-интерфейсы webAssembly или автоматические режимы отрисовки, должны быть созданы из клиентского проекта.
Внимание
При использовании Blazor веб-приложения большинство Blazor компонентов документации требуют интерактивности для работы и демонстрации концепций, описанных в статьях. При тестировании примера компонента, предоставленного в статье, убедитесь, что приложение принимает глобальное взаимодействие или компонент принимает интерактивный режим отрисовки.
Расположение интерактивности
Параметры расположения интерактивности:
- На страницу или компонент: по умолчанию настраивается интерактивность на каждую страницу или компонент.
- Global: использование этого параметра глобально настраивает интерактивность для всего приложения.
Расположение интерактивной активности можно задать только в том случае, если режим интерактивной отрисовки не None
включен и проверка подлинности не включена.
Примеры страниц
Чтобы включить примеры страниц и макет на основе стиля начальной загрузки, используйте параметр "Включить примеры страниц ". Отключите этот параметр для проекта без примеров страниц и стилизации начальной загрузки.
Дополнительные рекомендации по параметрам шаблона
- режимы отрисовки 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
Дополнительные ресурсы
- Visual Studio
- Visual Studio Code
- ASP.NET средства сборки Core Blazor WebAssembly и компиляция накануне (AOT)
- Интерфейс командной строки .NET
- Пакет SDK для .NET
- Поддержка горячей перезагрузки .NET для ASP.NET Core
- Модели размещения ASP.NET Core Blazor
- Структура проекта ASP.NET Core Blazor
- Учебники по Blazor Hybrid в ASP.NET Core
ASP.NET Core