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

  • Статья

Примечание.

Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.

Внимание

Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

В текущем выпуске см . версию .NET 8 этой статьи.

В этой статье описываются средства для создания приложений Blazor на различных платформах. Выберите платформу в верхней части этой статьи.

Чтобы создать Blazor приложение в Windows, используйте следующее руководство.

  • Установите последнюю версию 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. Выберите Далее.
  • Укажите значение Имя проекта и подтвердите правильность значения Расположение.

Примечание.

Термины и понятия отрисовки, используемые в следующих рекомендациях, представлены в следующих разделах статьи "Основные принципы".

Подробные рекомендации по режимам отрисовки приведены в статье о режимах отрисовки ASP.NET CoreBlazor.

  • Blazor Для веб-приложения в диалоговом окне "Дополнительные сведения":

    • Раскрывающийся список интерактивного режима отрисовки

      • Интерактивная отрисовка на стороне сервера (интерактивная служба SSR) включена по умолчанию с параметром "Сервер ".
      • Чтобы включить взаимодействие только с отрисовкой на стороне клиента (CSR), выберите параметр WebAssembly .
      • Чтобы включить режим интерактивной отрисовки и возможность автоматического переключения между ними во время выполнения, выберите параметр "Автоматический" (сервер и webAssembly) (автоматический) режим отрисовки.
      • Если задано значение интерактивности None, созданное приложение не имеет интерактивности. Приложение настроено только для отрисовки на стороне сервера.

      Режим интерактивной автоматической отрисовки изначально использует интерактивный SSR, а пакет приложений .NET и среда выполнения загружаются в браузер. После активации среды выполнения .NET WebAssembly режим отрисовки переключается на интерактивную отрисовку WebAssembly.

      По умолчанию Blazor шаблон веб-приложения включает статический и интерактивный SSR с помощью одного проекта. Если вы также включите CSR, проект включает дополнительный клиентский проект (.Client) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие веб-интерфейсы webAssembly или автоматические режимы отрисовки, должны быть созданы из клиентского проекта.

      Дополнительные сведения см. в режимах отрисовки ASP.NET CoreBlazor.

    • Раскрывающийся список расположений в интерактивном расположении

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

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

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

    Дополнительные сведения см. в режимах отрисовки ASP.NET CoreBlazor.

  • Для размещенного Blazor WebAssemblyприложения в диалоговом окне "Дополнительные сведения" выберите папку ASP.NET Core Hosted проверка box.

  • Нажмите кнопку создания.

  • Нажмите клавиши CTRL+F5 (Windows) или ⌘+F5 (macOS), чтобы запустить приложение.

При запуске размещенного решенияBlazor WebAssembly в Visual Studio автозагружаемым проектом решения является проект Server.

Дополнительные сведения об установке доверия к сертификату разработки HTTPS ASP.NET Core см. в статье Принудительное применение протокола HTTPS в ASP.NET Core.

Внимание

При выполнении размещенного приложения Blazor WebAssembly запустите приложение из проекта Server решения.

При запуске приложения используется только Properties/launchSettings.json файл в Server проекте.

Чтобы создать Blazor приложение в Linux или macOS, используйте следующее руководство.

Используйте интерфейс командной строки .NET (CLI) для выполнения команд в командной оболочке.

Установите последнюю версию пакета SDK для .NET Core. Если вы установили пакет SDK ранее, можно определить установленную версию, выполнив следующую команду:

dotnet --version

Установите последнюю версию Visual Studio Code для платформы.

Установите пакет средств разработки C# для Visual Studio Code. Дополнительные сведения см. в разделе Отладка приложений ASP.NET CoreBlazor.

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

  • Blazor Для работы с веб-приложением с интерактивной отрисовкой на стороне сервера по умолчанию выполните следующую команду в командной оболочке, которая использует blazor шаблон проекта:

    dotnet new blazor -o BlazorApp

    Чтобы включить только отрисовку на стороне клиента, используйте -int|--interactivity параметр WebAssembly:

    dotnet new blazor -o BlazorApp -int WebAssembly

    Чтобы включить интерактивную отрисовку на стороне сервера, за -int|--interactivity которой следует отрисовка на стороне клиента, используйте параметр Auto:

    dotnet new blazor -o BlazorApp -int Auto

    Если интерактивность отключена, задав -int|--interactivity параметр , Noneсозданное приложение не имеет интерактивности. Приложение настроено только для отрисовки на стороне статического сервера:

    dotnet new blazor -o BlazorApp -int None

    Режим интерактивной автоматической отрисовки изначально использует интерактивную отрисовку на стороне сервера (интерактивная служба SSR), а пакет приложений .NET и среда выполнения загружаются в браузер. После активации среды выполнения .NET WebAssembly режим отрисовки переключается на режим интерактивной отрисовки WebAssembly.

    По умолчанию Blazor шаблон веб-приложения включает как статическую, так и интерактивную отрисовку на стороне сервера с помощью одного проекта. Если вы также включите режим отрисовки Интерактивного веб-приложения WebAssembly, проект включает дополнительный клиентский проект (.Client) для компонентов на основе WebAssembly. Встроенные выходные данные из клиентского проекта загружаются в браузер и выполняются на клиенте. Все компоненты, использующие режимы интерактивного веб-просмотра или интерактивного автоматического отрисовки, должны быть созданы из клиентского проекта.

    Дополнительные сведения см. в режимах отрисовки ASP.NET CoreBlazor.

    Приложения по умолчанию являются расположением интерактивности на основе каждого компонента или страницы. Чтобы установить интерактивность для всего приложения, используйте -ai|--all-interactive этот параметр:

    dotnet new blazor -o BlazorApp -ai

    Выбор этого параметра задает интерактивность для всего приложения в компоненте App , указав режим отрисовки для верхнего уровня HeadOutlet и Routes компонентов. Настройка интерактивности этих компонентов распространяет интерактивность ко всем дочерним компонентам в приложении.

    Расположение интерактивного взаимодействия можно задать только в том случае, если режим интерактивной отрисовки (-int|--interactivity) не None включен и проверка подлинности не включена.

    Чтобы создать приложение без примеров страниц и стилей, используйте -e|--empty этот параметр:

    dotnet new blazor -o BlazorApp -e

  • Для автономного Blazor WebAssembly интерфейса выполните следующую команду в командной оболочке, которая использует blazorwasm шаблон:

    dotnet new blazorwasm -o BlazorApp

    Чтобы создать автономное Blazor WebAssembly приложение без примеров страниц и стилей, используйте -e|--empty этот параметр:

    dotnet new blazorwasm -o BlazorApp -e

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

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

    dotnet new blazorserver -o BlazorApp

  • Кроме того, создайте приложение без демонстрационного кода и начальной Blazor Serverblazorserver-empty загрузки с помощью шаблона проекта:

    dotnet new blazorserver-empty -o BlazorApp

  • Для автономного Blazor WebAssembly взаимодействия с демонстрацией кода и начальной загрузки выполните следующую команду:

    dotnet new blazorwasm -o BlazorApp

  • Кроме того, создайте автономное Blazor WebAssembly приложение без демонстрационного кода и начальной загрузки с помощью blazorwasm-empty шаблона проекта:

    dotnet new blazorwasm-empty -o BlazorApp

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

    dotnet new blazorwasm -o BlazorApp -ho

  • Можно также создать размещенное приложение Blazor WebAssembly без демонстрационного кода и Bootstrap, используя шаблон blazorwasm-empty с параметром hosted.

    dotnet new blazorwasm-empty -o BlazorApp -ho

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

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

    dotnet new blazorwasm -o BlazorApp

  • Для работы с размещенной платформой Blazor WebAssembly добавьте параметр hosted (-ho или --hosted) в команду.

    dotnet new blazorwasm -o BlazorApp -ho

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

    dotnet new blazorserver -o BlazorApp

Откройте папку BlazorApp в Visual Studio Code.

Когда Visual Studio Code запрашивает добавление ресурсов для сборки и отладки проекта, нажмите кнопку "Да".

Если Visual Studio Code не предлагает автоматически добавлять ресурсы сборки и отладки ( .vscode папка с launch.json файлами tasks.json ), выберите "Просмотреть>палитру команд " и введите ".NET" в поле поиска. В списке команд выберите команду ".NET: Generate Assets for Build and Debug".

Примечание.

Дополнительные сведения о конфигурации и использовании Visual Studio Code см. в документации по Visual Studio Code.

Файл Properties/launchSettings.json проекта содержит свойство inspectUri для прокси-сервера отладки во всех профилях. Оно указано в разделе profiles файла:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

Запуск размещенного Blazor WebAssembly и конфигурация задачи

Для размещенных решенийBlazor WebAssembly добавьте (или переместите) папку .vscode с файлами launch.json и tasks.json в родительскую папку, содержащую типичные папки проекта: Client, Server и Shared. Обновите или подтвердите, что конфигурация в файлах launch.json и tasks.json выполняет размещенное приложение Blazor WebAssembly из проекта Server.

Внимание

При выполнении размещенного приложения Blazor WebAssembly запустите приложение из проекта Server решения.

При запуске приложения используется только Properties/launchSettings.json файл в 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"
    }
  ]
}

Нажмите клавиши CTRL+F5 (Windows) или ⌘+F5 (macOS), чтобы запустить приложение.

Примечание.

Сейчас поддерживается только отладка в браузере.

Вы не можете автоматически перестроить серверное приложение 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",
    ...
],
...

Нажмите клавиши CTRL+F5 (Windows) или ⌘+F5 (macOS), чтобы запустить приложение.

Установка доверия к сертификату разработки

Дополнительные сведения см. в статье Принудительное использование HTTPS.

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

Решение представляет собой контейнер для одного или нескольких взаимосвязанных проектов кода. Visual Studio использует файл решения (.sln) для хранения параметров решения. Файлы решения используют уникальный формат и не предназначены для прямого редактирования.

Средства за пределами Visual Studio могут взаимодействовать с файлами решения:

  • Интерфейс командной строки .NET может создавать файлы решений, получать или изменять проекты в файлах решения с помощью команды dotnet sln. Другие команды интерфейса командной строки .NET используют путь к файлу решения для разных команд публикации, тестирования и упаковки.
  • Visual Studio Code может выполнять команду dotnet sln и другие команды интерфейса командной строки .NET через встроенный терминал, но не использует напрямую параметры, включенные в файл решения.

Blazor В документации решение используется для описания приложений, созданных из Blazor WebAssembly шаблона проекта, с включенным параметром ASP.NET Core Hosted или из Blazor Hybrid шаблона проекта. Приложения, созданные на основе этих шаблонов проектов, по умолчанию содержат файл решения (.sln). Для размещенных Blazor WebAssembly приложений, в которых разработчик не использует Visual Studio, файл решения можно игнорировать или удалить, если он не используется с командами .NET CLI.

Дополнительные сведения см. в ресурсах в документации по Visual Studio:

Использование Visual Studio для кроссплатформенной разработки на Blazor

Visual Studio Code — это кроссплатформенная интегрированная среда разработки (IDE) с открытым кодом, которую можно использовать для разработки приложений Blazor. Используйте .NET CLI для создания приложения Blazor, которое будет разрабатываться в Visual Studio Code. Дополнительные сведения см. в версии Linux или macOS этой статьи.

Дополнительные сведения о конфигурации и использовании Visual Studio Code см. в документации по Visual Studio 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.

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

  • Шаблоны .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

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