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

Примечание.

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

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

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

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

Blazor Web App

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

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

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

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

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

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

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

  • Компонент MainLayout (MainLayout.razor) — это компонент макета приложения.
  • Это MainLayout.razor.css таблица стилей, расположенная непосредственно рядом с компонентом, для основного макета приложения.
  • Компонент NavMenu (NavMenu.razor) реализует навигацию на боковой панели. Компонент включает NavLink компоненты (NavLink), которые отображают ссылки навигации на другие Razor компоненты. Компонент NavLink указывает пользователю, какой компонент в данный момент отображается.
  • Это NavMenu.razor.css разделимая таблица стилей для меню навигации приложения.
  • Компонент ReconnectModal отражает состояние подключения на стороне сервера в пользовательском интерфейсе и включается, когда интерактивный режим отрисовки приложения является интерактивным сервером или интерактивным автоматическим. Дополнительные сведения см. в руководстве по ASP.NET CoreBlazorSignalR.
  • Это совмещенная таблица стилей для компонента ReconnectModal.razor.css.
  • Это ReconnectModal.razor.js — сопутствующий файл JavaScript для компонента ReconnectModal.
  • Компонент 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 серверного проекта содержит маршрутизируемые серверные Razor компоненты приложения. Маршрут для каждой страницы указывается с помощью директивы @page.

Компонент NotFound (NotFound.razor) реализует страницу Not Found для отображения, когда содержимое не найдено для пути запроса. Дополнительные сведения см. в разделе Навигация ASP.NET CoreBlazor.

Компонент App (App.razor) является корневым компонентом приложения с разметкой HTML <head>, компонентом Routes и тегом Blazor<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 https команде dotnet watch (или dotnet run), просто разместите профиль https выше профиля http в файле.

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

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

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

Файлы параметров приложения (appsettings.Development.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 папка: содержит маршрутизируемые Razor компоненты Blazor приложения (.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 и содержит логику старта приложения, включая регистрацию служб и конфигурацию конвейера обработки запросов.

    • Задает службы внедрения зависимостей (DI) для приложения. Службы добавляются путем вызова 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 папка: содержит маршрутизируемые Razor компоненты Blazor приложения (.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 и содержит логику старта приложения, включая регистрацию служб и конфигурацию конвейера обработки запросов.

    • Задает службы внедрения зависимостей (DI) для приложения. Службы добавляются путем вызова 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 папка: содержит маршрутизируемые Razor компоненты Blazor приложения (.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 папка: содержит маршрутизируемые Razor компоненты Blazor приложения (.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 папка: содержит маршрутизируемые Razor компоненты Blazor приложения (.razor). Маршрут для каждой страницы указывается с помощью директивы @page. Шаблон включает следующие компоненты:
    • Counter компонент (Counter.razor): реализует страницу счетчика.
    • Компонент Index (Index.razor): реализует страницу Home.
    • Weather компонент (Weather.razor): реализует страницу погоды.
    • NotFound компонент (NotFound.razor): реализует не найденную страницу для отображения, если содержимое не найдено для пути запроса. Дополнительные сведения см. в разделе Навигация ASP.NET CoreBlazor.
  • Pages папка: содержит маршрутизируемые компоненты приложения 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 https команде dotnet 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 папка: содержит маршрутизируемые компоненты приложения 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) (ASP.NET Core в .NET 7 или более ранней версии): Blazor компонент опроса.

  • wwwrootпапка: Папка Web Root для приложения, содержащая общедоступные статические ресурсы приложения, включая файлы настроек окружения приложения для 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, который возвращает данные о погоде компоненту "FetchData" проекта "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

Blazor WebAssembly

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

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

  • Pages папка: содержит маршрутизируемые компоненты приложения 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папка: Папка Web Root для приложения, содержащая общедоступные статические ресурсы приложения, включая файлы настроек окружения приложения для 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, который возвращает данные о погоде компоненту FetchData проекта "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

Blazor WebAssembly

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

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

  • Pages папка: содержит маршрутизируемые компоненты приложения 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папка: Папка Web Root для приложения, содержащая общедоступные статические ресурсы приложения, включая файлы настроек окружения приложения для 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, который возвращает данные о погоде компоненту FetchData проекта "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

Blazor WebAssembly

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

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

  • Pages папка: содержит маршрутизируемые компоненты приложения 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папка: Папка Web Root для приложения, содержащая общедоступные статические ресурсы приложения, включая файлы настроек окружения приложения для 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, который возвращает данные о погоде компоненту FetchData проекта "Client".
  • Проект "Shared" включает класс прогноза погоды, WeatherForecast.cs который представляет данные о погоде для проектов "Client" и "Server".

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

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

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

<script src="@Assets["_framework/blazor.web.js"]"></script>

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

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

Сценарий 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 обрабатывается из внедренного ресурса в общей платформе ASP.NET Core.

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

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

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

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

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

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

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

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

Для приложения Blazor Web App или Blazor Server проект должен содержать по крайней мере один файл компонента Razor (.razor), чтобы автоматически включить скрипт Blazor при публикации приложения. Если проект не содержит хотя бы один Razor компонент, установите для свойства MSBuild RequiresAspNetWebAssets значение true в файле проекта приложения, чтобы добавить сценарий Blazor.

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

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

<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

Когда приложение опубликовано, {fingerprint} заполнитель автоматически заменяется уникальным хэшем для перебора кэша.

<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.

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

  • Last updated on