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

Статья
06/14/2024

Примечание.

Это не последняя версия этой статьи. В текущем выпуске см . версию .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 Web App: создает веб-приложение, которое поддерживает интерактивную Blazor отрисовку на стороне сервера (интерактивная служба SSR) и отрисовку на стороне клиента (CSR). Шаблон Blazor Web App рекомендуется приступить к работе с 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 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 Web App сервера по умолчанию (интерактивная служба 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 WebAssembly проекта недоступен в 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 WebAssembly проекта недоступен в 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 Web Appприложения запустите приложение из серверного проекта решения, который является проектом с именем, который не заканчивается .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

Когда приложение, созданное из Blazor Web App шаблона проекта, запускается с помощью .NET CLI, приложение выполняется в конечной точке HTTP (небезопасной), так как первый профиль, найденный в файле параметров запуска приложения (Properties/launchSettings.json) является профилем HTTP (небезопасным), который называется 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.

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

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

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

Шаблон проекта Blazor Web App: 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 Web App включает как статический, так и интерактивный SSR с помощью одного проекта. Если вы также включите CSR, проект включает дополнительный клиентский проект (.Client) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие веб-интерфейсы webAssembly или автоматические режимы отрисовки, должны быть созданы из клиентского проекта.

Внимание

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

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

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

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

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

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

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

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

режимы отрисовки ASP.NET Core Blazor
Шаблоны .NET по умолчанию для dotnet новой статьи в документации по .NET Core:
- blazor
- blazorwasm
Передача параметра справки (-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:
- blazorserver
- blazorwasm
Передача параметра справки (-h или --help) dotnet new команде CLI в командной оболочке:
- dotnet new blazorserver -h
- dotnet new blazorwasm -h

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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