Прочитать на английском

Поделиться через

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

  • Статья
  • 12.11.2024

Примечание

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

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в политике поддержки .NET и .NET Core. В текущем выпуске см . версию .NET 9 этой статьи.

Важно!

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

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

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

Blazor Web App

Шаблон проекта Blazor Web App: blazor

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

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

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

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

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

На основе интерактивного режима отрисовки, выбранного при создании приложения, Layout папка находится в серверном проекте в Components папке или в корне .Client проекта. Папка содержит следующие компоненты макета и таблицы стилей:

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

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

Папка Components проекта сервера содержит серверные Razor компоненты приложения. Общие компоненты часто помещаются в корне папки, а компоненты макета Components и страницы обычно помещаются в папки в папку Components .

Папка Components/Pages проекта сервера содержит routable серверные Razor компоненты приложения. Маршрут для каждой страницы указывается с помощью директивы @page.

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

Файл _Imports.razor в каждом сервере и .Client проектах включает общие Razor директивы для Razor компонентов любого проекта, таких как @using директивы для пространств имен.

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

Примечание

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

Папка wwwroot проекта сервера — это папка веб-корневой папки для проекта сервера, в котором хранятся общедоступные статические ресурсы приложения.

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

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

Файлы параметров приложения (appsettings.Development.json,) на сервере или appsettings.json проекте предоставляют .Client. В серверном проекте файлы параметров находятся в корне проекта. .Client В проекте файлы параметров используются из корневой веб-папкиwwwroot.

.Client В проекте:

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

  • Папка wwwroot — это папка web Root.Clientобщедоступные статические ресурсы приложения.

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

При настройке дополнительных параметров в приложении, созданном из шаблона проекта Blazor Web App, могут появиться дополнительные файлы и папки. Например, создание приложения с 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 CLI, не передавая -lp https команду (--launch-profile httpsdotnet watch или) в команду (или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 или параметром -ho|--hosted с помощью команды .NET CLI dotnet new blazorwasm . Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

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

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта Client "FetchData".
  • Проект "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 или параметром -ho|--hosted с помощью команды .NET CLI dotnet new blazorwasm . Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

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

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта Client "FetchData".
  • Проект "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 или параметром -ho|--hosted с помощью команды .NET CLI dotnet new blazorwasm . Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

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

  • Проект "Server" включает контроллер прогноза погоды, Controllers/WeatherForecastController.cs возвращающий данные о погоде компоненту проекта Client "FetchData".
  • Проект "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 или параметром -ho|--hosted с помощью команды .NET CLI dotnet new blazorwasm . Дополнительные сведения см. в статье Инструментарий для ASP.NET Core Blazor.

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

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

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

Скрипт Blazor служит статическим веб-ресурсом с автоматическим сжатием и отпечатками пальцев. Дополнительные сведения см. в ASP.NET Core Blazor статических файлов.

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

Blazor Web App 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 WebAssembly содержимое Blazor скрипта находится в wwwroot/index.html файле:

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

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

В файле находится содержимое Blazor Web App<head><body>Components/App.razor.

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

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

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

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

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

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

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

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