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

• Установите последнюю версию Visual Studio с рабочей нагрузкой ASP.NET и веб-разработки .

• Создайте проект с помощью одного из доступных Blazor шаблонов:

  • Blazor Web App: создает приложение, которое поддерживает интерактивную отрисовку на стороне сервера (интерактивный 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 «Приложение», который включает демонстрационный код и Bootstrap, или шаблон Blazor WebAssembly «Пустое приложение» без демонстрационного кода и Bootstrap. Нажмите кнопку Далее.

• Установите последнюю версию 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-адреса приложения.
• Изменяет браузер по умолчанию с Microsoft Edge на Google Chrome.

"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, демонстрационным кодом и Bootstrap выполните следующую команду:

  dotnet new blazorwasm -o BlazorApp
  

• Чтобы использовать размещённый Blazor WebAssembly с демонстрационным кодом и Bootstrap, добавьте к команде опцию hosted (-ho/--hosted):

  dotnet new blazorwasm -o BlazorApp -ho
  

  Note

  Шаблон размещенного Blazor WebAssembly проекта недоступен в .NET 8 или более поздней версии. Чтобы создать хостируемое Blazor WebAssembly приложение, используя SDK .NET 8 или более поздней версии, передайте параметр -f|--framework с целевой платформой .NET 7 (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
  

  Note

  Шаблон размещенного Blazor WebAssembly проекта недоступен в .NET 8 или более поздней версии. Чтобы создать хостируемое Blazor WebAssembly приложение с помощью .NET SDK версии 8 или более поздней, передайте параметр -f|--framework с идентификатором целевой платформы (например, net6.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

• Для работы с Blazor Server выполните следующую команду:

  dotnet new blazorserver -o BlazorApp