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

Мақала
11/06/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`).