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

• Установите последнюю версию 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 WebAssembly приложения установите флажок ASP.NET Core Hosted в диалоговом окне "Дополнительные сведения".

Запуск размещенного 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"
    }
  ]
}

.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",
    ...
],
...

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

• Перейдите в каталог с помощью 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