Структура проекта ASP.NET Core Blazor

  • Статья

Примечание.

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

Внимание

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

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

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

Blazor Веб-приложение

Blazor Шаблон проекта веб-приложения: blazor

Шаблон Blazor проекта веб-приложения предоставляет единую отправную точку для создания Razor любого стиля веб-интерфейса, отрисованного на стороне сервера и отрисовки на стороне клиента. Она объединяет сильные стороны существующих Blazor Server и размещенных моделей с отрисовкой на стороне сервера, потоковой отрисовкой, улучшенной навигацией и Blazor WebAssembly обработкой форм, а также возможностью добавления интерактивности с помощью либо Blazor ServerBlazor WebAssembly на основе каждого компонента.

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

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

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

  • Проект сервера:

    • Папка Components:

      • Layout папка: содержит следующие компоненты макета и таблицы стилей:

        • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
        • MainLayout.razor.css: таблица стилей для основного макета приложения.
        • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink указывает пользователю, какой компонент в данный момент отображается.
        • NavMenu.razor.css: таблица стилей для меню навигации приложения.

      • Pages папка: содержит routable серверные Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующее:

        • Counterкомпонент (Counter.razor): реализует страницу счетчика.
        • Error компонент (Error.razor): реализует страницу ошибки .
        • Компонент Home (Home.razor): реализует страницу Home.
        • Weather компонент (Weather.razor): реализует страницу прогноза погоды.

      • App компонент (App.razor): корневой компонент приложения с разметкой HTML <head> , Routes компонентом и тегом Blazor<script> . Корневой компонент является первым компонентом, который загружает приложение.

      • Routes компонент (Routes.razor): настройка маршрутизации с помощью Router компонента. Для интерактивных Router компонентов на стороне клиента компонент перехватывает навигацию в браузере и отрисовывает страницу, соответствующую запрошенным адресу.

      • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения, отрисованные сервером (.razor), такие как @using директивы для пространств имен.

    • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

      Примечание.

      Профиль http предшествует https профилю в launchSettings.json файле. При запуске приложения с помощью .NET CLI приложение выполняется в конечной точке HTTP, так как обнаружен httpпервый профиль. Порядок профилей упрощает переход на внедрение HTTPS для пользователей Linux и macOS. Если вы предпочитаете запустить приложение с помощью интерфейса командной строки .NET, не передавая -lp https команду или --launch-profile https параметр dotnet run , просто поместите https профиль над профилем http в файле.

    • wwwroot папка: корневая веб-папка для проекта сервера, содержащего общедоступные статические ресурсы приложения.

    • Program.csfile: точка входа проекта сервера, которая настраивает узел веб-приложения ASP.NET Core и содержит логику запуска приложения, включая регистрации служб, конфигурацию, ведение журнала и конвейер обработки запросов.

      • Службы для Razor компонентов добавляются путем вызова AddRazorComponents. AddInteractiveServerComponents добавляет службы для поддержки отрисовки компонентов интерактивного сервера. AddInteractiveWebAssemblyComponents добавляет службы для поддержки отрисовки компонентов Interactive WebAssembly.
      • MapRazorComponents обнаруживает доступные компоненты и задает корневой компонент для приложения (первый загруженный компонент), который по умолчанию является компонентом App (App.razor). AddInteractiveServerRenderMode настраивает интерактивную отрисовку на стороне сервера (интерактивная служба SSR) для приложения. AddInteractiveWebAssemblyRenderMode настраивает режим отрисовки интерактивного веб-сайта для приложения.

    • Файлы параметров приложения (appsettings.Development.json, appsettings.json): укажите параметры конфигурации для проекта сервера.

  • Клиентский проект (.Client):

    • Pages папка: содержит routable клиентские Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает компонент (Counter.razor), реализующий страницу счетчика.Counter

      Структура папок компонента проекта отличается от Blazor структуры основной .Client папки проекта веб-приложения, так как основной проект является стандартным проектом ASP.NET Core. Основной проект должен учитывать другие ресурсы для ASP.NET основных проектов, которые не связаны Blazor.

      Проект .Client является исключительно проектом Blazor и не требуется для интеграции столько же, сколько с неструктурируемымиBlazor функциями и спецификациями Core ASP.NET Core, поэтому она использует менее сложную структуру папок компонентов. Однако вы можете использовать любую структуру папок компонентов, которую вы хотите в .Client проекте. Если вы хотите, вы можете зеркало макет папки компонента основного проекта в .Client проекте. Обратите внимание, что пространства имен могут потребовать корректировки для таких ресурсов, как файлы макета, если вы перемещаете компоненты в разные папки, отличные от использования шаблона проекта.

    • Папка веб-корневой папки для клиентского проекта, содержащего общедоступные статические ресурсы приложения, включая файлы параметров приложения (appsettings.Development.json, ), appsettings.jsonкоторые предоставляют параметры конфигурации для клиентского проекта.

    • Program.csfile: точка входа на стороне клиента, которая настраивает узел WebAssembly и содержит логику запуска проекта, включая регистрации служб, конфигурацию, ведение журнала и конвейер обработки запросов.

    • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения webAssembly, отрисованные (.razor), такие как @using директивы для пространств имен.

При настройке дополнительных параметров в приложении могут отображаться дополнительные файлы и папки, созданные из Blazor шаблона проекта веб-приложения. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Blazor Server

Шаблоны проектов Blazor Server: blazorserver, blazorserver-empty

Шаблоны Blazor Server создают исходные файлы и структуру каталогов для приложения Blazor Server.

  • blazorserver Если используется шаблон, приложение заполняется следующим образом:
    • Демонстрационный код для компонента FetchData, который загружает данные из службы прогноза погоды (WeatherForecastService), обеспечивая взаимодействие пользователя с компонентом Counter.
    • Bootstrap — средство создания внешнего интерфейса.
  • Если используется шаблон blazorserver-empty, приложение создается без демонстрационного кода и Bootstrap.

Структура проекта:

  • Data папка: содержит WeatherForecast класс и реализацию WeatherForecastService , которая содержит примеры данных о погоде для компонента приложения FetchData .

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor) и корневую Razor страницу Blazor Server приложения. Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующее:

    • _Host.cshtml: корневая страница приложения, реализованная Razor как страница:
      • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
      • На странице Host указывается место отрисовки корневого компонента App (App.razor).
    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • Error компонент (Error.razor): отрисовывается при возникновении необработанного исключения в приложении.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwroot папка: корневая веб-папка для приложения, содержащего общедоступные статические ресурсы приложения.

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • appsettings.json и файлы параметров приложения среды: укажите Параметры конфигурации для приложения.

  • Program.cs: точка входа приложения, которая настраивает узел ASP.NET Core и содержит логику запуска приложения, включая регистрацию служб и конфигурацию конвейера обработки запросов:

    • Задает службы внедрения зависимостей для приложения. Службы добавляются путем вызова метода AddServerSideBlazor. В контейнер службы добавляется служба WeatherForecastService, которая используется примером компонента FetchData.
    • Настраивает конвейер обработки запросов приложения:
      • MapBlazorHub вызывается с целью настройки конечной точки для соединения в режиме реального времени с браузером. Соединение создается с помощью SignalR, платформы для добавления веб-функций реального времени в приложения.
      • MapFallbackToPage("/_Host") вызывается для настройки корневой страницы приложения (Pages/_Host.cshtml) и обеспечения навигации.

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor Server, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Шаблон проекта Blazor Server: blazorserver

Шаблон Blazor Server создает исходные файлы и структуру каталогов для приложения Blazor Server. Приложение заполняется демонстрационным кодом для компонента FetchData, который загружает данные из зарегистрированной службы WeatherForecastService, обеспечивая взаимодействие пользователя с компонентом Counter.

  • Data папка: содержит WeatherForecast класс и реализацию WeatherForecastService , которая содержит примеры данных о погоде для компонента приложения FetchData .

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor) и корневую Razor страницу Blazor Server приложения. Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующее:

    • _Host.cshtml: корневая страница приложения, реализованная Razor как страница:
      • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
      • На странице Host указывается место отрисовки корневого компонента App (App.razor).
    • _Layout.cshtml: страница макета для корневой страницы _Host.cshtml приложения.
    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • Error компонент (Error.razor): отрисовывается при возникновении необработанного исключения в приложении.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwroot папка: корневая веб-папка для приложения, содержащего общедоступные статические ресурсы приложения.

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • appsettings.json и файлы параметров приложения среды: укажите Параметры конфигурации для приложения.

  • Program.cs: точка входа приложения, которая настраивает узел ASP.NET Core и содержит логику запуска приложения, включая регистрацию служб и конфигурацию конвейера обработки запросов:

    • Задает службы внедрения зависимостей для приложения. Службы добавляются путем вызова метода AddServerSideBlazor. В контейнер службы добавляется служба WeatherForecastService, которая используется примером компонента FetchData.
    • Настраивает конвейер обработки запросов приложения:
      • MapBlazorHub вызывается с целью настройки конечной точки для соединения в режиме реального времени с браузером. Соединение создается с помощью SignalR, платформы для добавления веб-функций реального времени в приложения.
      • MapFallbackToPage("/_Host") вызывается для настройки корневой страницы приложения (Pages/_Host.cshtml) и обеспечения навигации.

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor Server, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Шаблон проекта Blazor Server: blazorserver

Шаблон Blazor Server создает исходные файлы и структуру каталогов для приложения Blazor Server. Приложение заполняется демонстрационным кодом для компонента FetchData, который загружает данные из зарегистрированной службы WeatherForecastService, обеспечивая взаимодействие пользователя с компонентом Counter.

  • Data папка: содержит WeatherForecast класс и реализацию WeatherForecastService , которая содержит примеры данных о погоде для компонента приложения FetchData .

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor) и корневую Razor страницу Blazor Server приложения. Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующее:

    • _Host.cshtml: корневая страница приложения, реализованная Razor как страница:
      • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
      • На странице Host указывается место отрисовки корневого компонента App (App.razor).
    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • Error компонент (Error.razor): отрисовывается при возникновении необработанного исключения в приложении.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwroot папка: корневая веб-папка для приложения, содержащего общедоступные статические ресурсы приложения.

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • appsettings.json и файлы параметров приложения среды: укажите Параметры конфигурации для приложения.

  • Program.cs: точка входа в приложение, которая настраивает узел ASP.NET Core.

  • Startup.cs: содержит логику запуска приложения. В классе Startup определены два метода:

    • ConfigureServices: настраивает службы внедрения зависимостей для приложения. Службы добавляются путем вызова метода AddServerSideBlazor. В контейнер службы добавляется служба WeatherForecastService, которая используется примером компонента FetchData.
    • Configure: настраивает конвейер обработки запросов приложения:
      • MapBlazorHub вызывается с целью настройки конечной точки для соединения в режиме реального времени с браузером. Соединение создается с помощью SignalR, платформы для добавления веб-функций реального времени в приложения.
      • MapFallbackToPage("/_Host") вызывается для настройки корневой страницы приложения (Pages/_Host.cshtml) и обеспечения навигации.

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor Server, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Шаблон проекта Blazor Server: blazorserver

Шаблон Blazor Server создает исходные файлы и структуру каталогов для приложения Blazor Server. Приложение заполняется демонстрационным кодом для компонента FetchData, который загружает данные из зарегистрированной службы WeatherForecastService, обеспечивая взаимодействие пользователя с компонентом Counter.

  • Data папка: содержит WeatherForecast класс и реализацию WeatherForecastService , которая содержит примеры данных о погоде для компонента приложения FetchData .

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor) и корневую Razor страницу Blazor Server приложения. Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующее:

    • _Host.cshtml: корневая страница приложения, реализованная Razor как страница:
      • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
      • На странице Host указывается место отрисовки корневого компонента App (App.razor).
    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • Error компонент (Error.razor): отрисовывается при возникновении необработанного исключения в приложении.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwroot папка: корневая веб-папка для приложения, содержащего общедоступные статические ресурсы приложения.

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • appsettings.json и файлы параметров приложения среды: укажите Параметры конфигурации для приложения.

  • Program.cs: точка входа в приложение, которая настраивает узел ASP.NET Core.

  • Startup.cs: содержит логику запуска приложения. В классе Startup определены два метода:

    • ConfigureServices: настраивает службы внедрения зависимостей для приложения. Службы добавляются путем вызова метода AddServerSideBlazor. В контейнер службы добавляется служба WeatherForecastService, которая используется примером компонента FetchData.
    • Configure: настраивает конвейер обработки запросов приложения:
      • MapBlazorHub вызывается с целью настройки конечной точки для соединения в режиме реального времени с браузером. Соединение создается с помощью SignalR, платформы для добавления веб-функций реального времени в приложения.
      • MapFallbackToPage("/_Host") вызывается для настройки корневой страницы приложения (Pages/_Host.cshtml) и обеспечения навигации.

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor Server, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Автономный Blazor WebAssembly

Автономный Blazor WebAssembly шаблон проекта: blazorwasm

Шаблон Blazor WebAssembly создает исходные файлы и структуру каталогов для автономного Blazor WebAssembly приложения:

  • blazorwasm Если используется шаблон, приложение заполняется следующим образом:
    • Демонстрационный код для компонента Weather, который загружает данные из статического ресурса (weather.json), обеспечивая взаимодействие пользователя с компонентом Counter.
    • Bootstrap — средство создания внешнего интерфейса.
  • Шаблон blazorwasm также можно создать без примеров страниц и стилей.

Структура проекта:

  • Layout папка: содержит следующие компоненты макета и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующие компоненты:

    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • Компонент Index (Index.razor): реализует страницу Home.
    • Weather компонент (Weather.razor): реализует страницу погоды.

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

    Примечание.

    Профиль http предшествует https профилю в launchSettings.json файле. При запуске приложения с помощью .NET CLI приложение выполняется в конечной точке HTTP, так как обнаружен httpпервый профиль. Порядок профилей упрощает переход на внедрение HTTPS для пользователей Linux и macOS. Если вы предпочитаете запустить приложение с помощью интерфейса командной строки .NET, не передавая -lp https команду или --launch-profile https параметр dotnet run , просто поместите https профиль над профилем http в файле.

  • wwwroot папка: корневая веб-папка для приложения, содержащая общедоступные статические ресурсы приложения, в том числе appsettings.json файлы параметров экологических приложений для параметров конфигурации и примеры данных о погоде (sample-data/weather.json). Веб-страница index.html — это корневая страница приложения, реализованная в виде HTML-страницы:

    • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
    • На странице указывается место отрисовки корневого компонента App. Компонент отображается в расположении элемента модели DOM div с idapp (<div id="app">Loading...</div>).

  • Program.cs: точка входа приложения, которая настраивает узел WebAssembly:

    • Компонент App является корневым компонентом приложения. Компонент App указывается как элемент модели DOM div с idapp (<div id="app">Loading...</div> в wwwroot/index.html) в корневой коллекции компонентов (builder.RootComponents.Add<App>("#app")).
    • Службы добавляются и настраиваются (например, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor WebAssembly, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Blazor WebAssembly

Шаблоны проектов Blazor WebAssembly: blazorwasm, blazorwasm-empty

Шаблоны Blazor WebAssembly создают исходные файлы и структуру каталогов для приложения Blazor WebAssembly.

  • blazorwasm Если используется шаблон, приложение заполняется следующим образом:
    • Демонстрационный код для компонента FetchData, который загружает данные из статического ресурса (weather.json), обеспечивая взаимодействие пользователя с компонентом Counter.
    • Bootstrap — средство создания внешнего интерфейса.
  • Если используется шаблон blazorwasm-empty, приложение создается без демонстрационного кода и Bootstrap.

Структура проекта:

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующие компоненты:

    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.
    • SurveyPromptкомпонент () (SurveyPrompt.razorASP.NET Core в .NET 7 или более ранней версии): Blazor компонент опроса.

  • wwwrootпапка: корневая веб-папка для приложения, содержащая общедоступные статические ресурсы приложения, включая appsettings.json и файлы параметров экологических приложений для параметров конфигурации. Веб-страница index.html — это корневая страница приложения, реализованная в виде HTML-страницы:

    • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
    • На странице указывается место отрисовки корневого компонента App. Компонент отображается в расположении элемента модели DOM div с idapp (<div id="app">Loading...</div>).

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • Program.cs: точка входа приложения, которая настраивает узел WebAssembly:

    • Компонент App является корневым компонентом приложения. Компонент App указывается как элемент модели DOM div с idapp (<div id="app">Loading...</div> в wwwroot/index.html) в корневой коллекции компонентов (builder.RootComponents.Add<App>("#app")).
    • Службы добавляются и настраиваются (например, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor WebAssembly, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Размещенное Blazor WebAssembly решение включает следующие проекты ASP.NET Core:

  • "Client": Blazor WebAssembly приложение.
  • "Server": приложение, которое обслуживает Blazor WebAssembly данные приложения и погоды клиентам.
  • "Shared": проект, который поддерживает общие классы, методы и ресурсы.

Решение создается из Blazor WebAssembly шаблона проекта в Visual Studio с выбранным параметром ASP.NET Core Hosted проверка box или параметром -ho|--hosted с помощью команды .NET CLIdotnet new blazorwasm. Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

Структура проекта клиентского приложения в размещенном Blazor решении Webassembly ("Client" проект) совпадает со структурой проекта для автономного Blazor WebAssembly приложения. Дополнительные файлы в размещенном Blazor WebAssembly решении:

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта FetchData "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

Blazor WebAssembly

Шаблон проекта Blazor WebAssembly: blazorwasm

Шаблон Blazor WebAssembly создает исходные файлы и структуру каталогов для приложения Blazor WebAssembly. Приложение заполняется демонстрационным кодом для компонента FetchData, который загружает данные из статического ресурса weather.json, обеспечивая взаимодействие пользователя с компонентом Counter.

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующие компоненты:

    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwrootпапка: корневая веб-папка для приложения, содержащая общедоступные статические ресурсы приложения, включая appsettings.json и файлы параметров экологических приложений для параметров конфигурации. Веб-страница index.html — это корневая страница приложения, реализованная в виде HTML-страницы:

    • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
    • На странице указывается место отрисовки корневого компонента App. Компонент отображается в расположении элемента модели DOM div с idapp (<div id="app">Loading...</div>).

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • Program.cs: точка входа приложения, которая настраивает узел WebAssembly:

    • Компонент App является корневым компонентом приложения. Компонент App указывается как элемент модели DOM div с idapp (<div id="app">Loading...</div> в wwwroot/index.html) в корневой коллекции компонентов (builder.RootComponents.Add<App>("#app")).
    • Службы добавляются и настраиваются (например, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor WebAssembly, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Размещенное Blazor WebAssembly решение включает следующие проекты ASP.NET Core:

  • "Client": Blazor WebAssembly приложение.
  • "Server": приложение, которое обслуживает Blazor WebAssembly данные приложения и погоды клиентам.
  • "Shared": проект, который поддерживает общие классы, методы и ресурсы.

Решение создается из Blazor WebAssembly шаблона проекта в Visual Studio с выбранным параметром ASP.NET Core Hosted проверка box или параметром -ho|--hosted с помощью команды .NET CLIdotnet new blazorwasm. Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

Структура проекта клиентского приложения в размещенном Blazor решении Webassembly ("Client" проект) совпадает со структурой проекта для автономного Blazor WebAssembly приложения. Дополнительные файлы в размещенном Blazor WebAssembly решении:

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта FetchData "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

Blazor WebAssembly

Шаблон проекта Blazor WebAssembly: blazorwasm

Шаблон Blazor WebAssembly создает исходные файлы и структуру каталогов для приложения Blazor WebAssembly. Приложение заполняется демонстрационным кодом для компонента FetchData, который загружает данные из статического ресурса weather.json, обеспечивая взаимодействие пользователя с компонентом Counter.

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующие компоненты:

    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты и таблицы стилей:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • MainLayout.razor.css: таблица стилей для основного макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • NavMenu.razor.css: таблица стилей для меню навигации приложения.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwrootпапка: корневая веб-папка для приложения, содержащая общедоступные статические ресурсы приложения, включая appsettings.json и файлы параметров экологических приложений для параметров конфигурации. Веб-страница index.html — это корневая страница приложения, реализованная в виде HTML-страницы:

    • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
    • На странице указывается место отрисовки корневого компонента App. Компонент отображается в расположении элемента модели DOM div с idapp (<div id="app">Loading...</div>).

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • Program.cs: точка входа приложения, которая настраивает узел WebAssembly:

    • Компонент App является корневым компонентом приложения. Компонент App указывается как элемент модели DOM div с idapp (<div id="app">Loading...</div> в wwwroot/index.html) в корневой коллекции компонентов (builder.RootComponents.Add<App>("#app")).
    • Службы добавляются и настраиваются (например, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor WebAssembly, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Размещенное Blazor WebAssembly решение включает следующие проекты ASP.NET Core:

  • "Client": Blazor WebAssembly приложение.
  • "Server": приложение, которое обслуживает Blazor WebAssembly данные приложения и погоды клиентам.
  • "Shared": проект, который поддерживает общие классы, методы и ресурсы.

Решение создается из Blazor WebAssembly шаблона проекта в Visual Studio с выбранным параметром ASP.NET Core Hosted проверка box или параметром -ho|--hosted с помощью команды .NET CLIdotnet new blazorwasm. Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

Структура проекта клиентского приложения в размещенном Blazor решении Webassembly ("Client" проект) совпадает со структурой проекта для автономного Blazor WebAssembly приложения. Дополнительные файлы в размещенном Blazor WebAssembly решении:

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта FetchData "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

Blazor WebAssembly

Шаблон проекта Blazor WebAssembly: blazorwasm

Шаблон Blazor WebAssembly создает исходные файлы и структуру каталогов для приложения Blazor WebAssembly. Приложение заполняется демонстрационным кодом для компонента FetchData, который загружает данные из статического ресурса weather.json, обеспечивая взаимодействие пользователя с компонентом Counter.

  • Pages папка: содержит Blazor routable Razor компоненты приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает в себя следующие компоненты:

    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • FetchData компонент (FetchData.razor): реализует страницу получения данных.
    • Компонент Index (Index.razor): реализует страницу Home.

  • Propertiesпапка: содержит конфигурацию среды разработки launchSettings.json в файле.

  • Shared папка: содержит следующие общие компоненты:

    • Компонент MainLayout (MainLayout.razor): компонент макета приложения.
    • NavMenu компонент (NavMenu.razor): реализует навигацию на боковой панели. Включает в себя компонент NavLink (NavLink), который служит для отрисовки навигационных ссылок на другие компоненты Razor. Компонент NavLink автоматически указывает выбранное состояние при загрузке компонента, что помогает пользователю понять, какой компонент отображается в настоящее время.
    • Компонент SurveyPrompt (SurveyPrompt.razor): компонент опроса Blazor.

  • wwwrootпапка: корневая веб-папка для приложения, содержащая общедоступные статические ресурсы приложения, включая appsettings.json и файлы параметров экологических приложений для параметров конфигурации. Веб-страница index.html — это корневая страница приложения, реализованная в виде HTML-страницы:

    • При первом запросе любой страницы приложения эта страница преобразовывается для просмотра и возвращается в ответе.
    • На странице указывается место отрисовки корневого компонента App. Компонент отображается в расположении элемента модели DOM app (<app>Loading...</app>).

  • _Imports.razor: включает общие Razor директивы для включения в компоненты приложения (.razor), например @using директивы для пространств имен.

  • App.razor: корневой компонент приложения, который настраивает маршрутизацию на стороне клиента с помощью Router компонента. Компонент Router перехватывает навигацию в браузере и отображает страницу, соответствующую запрошенному адресу.

  • Program.cs: точка входа приложения, которая настраивает узел WebAssembly:

    • Компонент App является корневым компонентом приложения. Компонент App указывается как элемент модели DOM app (<app>Loading...</app> в wwwroot/index.html) в корневой коллекции компонентов (builder.RootComponents.Add<App>("app")).
    • Службы добавляются и настраиваются (например, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor WebAssembly, могут появиться дополнительные файлы и папки. Например, создание приложения с ASP.NET Core Identity включает дополнительные ресурсы для проверки подлинности и авторизации.

Размещенное Blazor WebAssembly решение включает следующие проекты ASP.NET Core:

  • "Client": Blazor WebAssembly приложение.
  • "Server": приложение, которое обслуживает Blazor WebAssembly данные приложения и погоды клиентам.
  • "Shared": проект, который поддерживает общие классы, методы и ресурсы.

Решение создается из Blazor WebAssembly шаблона проекта в Visual Studio с выбранным параметром ASP.NET Core Hosted проверка box или параметром -ho|--hosted с помощью команды .NET CLIdotnet new blazorwasm. Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

Структура проекта клиентского приложения в размещенном Blazor решении Webassembly ("Client" проект) совпадает со структурой проекта для автономного Blazor WebAssembly приложения. Дополнительные файлы в размещенном Blazor WebAssembly решении:

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта FetchData "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

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

Сценарий Blazor обрабатывается из внедренного ресурса в общей платформе ASP.NET Core.

Blazor В веб-приложении Blazor скрипт находится в Components/App.razor файле:

<script src="_framework/blazor.web.js"></script>

Blazor Server В приложении Blazor скрипт находится в Pages/_Host.cshtml файле:

<script src="_framework/blazor.server.js"></script>

Blazor Server В приложении Blazor скрипт находится в Pages/_Host.cshtml файле:

<script src="_framework/blazor.server.js"></script>

Blazor Server В приложении Blazor скрипт находится в Pages/_Layout.cshtml файле:

<script src="_framework/blazor.server.js"></script>

Blazor Server В приложении Blazor скрипт находится в Pages/_Host.cshtml файле:

<script src="_framework/blazor.server.js"></script>

В приложении Blazor содержимое Blazor WebAssembly скрипта находится в wwwroot/index.html файле:

<script src="_framework/blazor.webassembly.js"></script>

Расположение и <body> содержимое <head>

В веб-приложении <head> и <body> содержимое BlazorComponents/App.razor находится в файле.

В приложении <head> и <body> содержимое Blazor ServerPages/_Host.cshtml находится в файле.

В приложении <head> и <body> содержимое Blazor ServerPages/_Layout.cshtml находится в файле.

В приложении <head> и <body> содержимое Blazor ServerPages/_Host.cshtml находится в файле.

В приложении <head> и <body> содержимое Blazor WebAssemblywwwroot/index.html находится в файле.

Двойное приложение Blazor Server/Blazor WebAssembly

Чтобы создать приложение, которое может работать как приложение Blazor Server или приложение Blazor WebAssembly, можно поместить все элементы логики и компоненты приложения в библиотеку классов Razor (RCL) и ссылаться на эту RCL из отдельных проектов Blazor Server и Blazor WebAssembly. Для общих служб, реализации которых зависят от модели размещения, определите интерфейсы служб в RCL и реализуйте эти службы в проектах Blazor Server и Blazor WebAssembly.

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