通过

ASP.NET Core Blazor 项目结构

  • 项目

注意

此版本不是本文的最新版本。 对于当前版本，请参阅此文的 .NET 8 版本。

警告

此版本的 ASP.NET Core 不再受支持。 有关详细信息，请参阅 .NET 和 .NET Core 支持策略。 对于当前版本，请参阅此文的 .NET 8 版本。

重要

此信息与预发布产品相关，相应产品在商业发布之前可能会进行重大修改。 Microsoft 对此处提供的信息不提供任何明示或暗示的保证。

对于当前版本，请参阅此文的 .NET 8 版本。

本文介绍 Blazor 项目模板生成的 Blazor 应用所包含的文件和文件夹。

Blazor Web App

Blazor Web App项目模板：blazor

Blazor Web App 项目模板提供了单一起点，用于使用 Razor 组件 (.razor) 生成任何样式的 Web UI，无论是服务器端呈现还是客户端呈现。 其将现有 Blazor Server 和 Blazor WebAssembly 托管模型的优势与静态服务器呈现、流呈现、增强的导航和表单处理等相结合，以及使用 Blazor Server 或 Blazor WebAssembly 按组件添加交互性的功能。

如果在创建应用时同时选择了客户端呈现 (CSR) 和交互式服务器端呈现（交互式 SSR），则项目模板将使用交互式自动呈现模式。 当 .NET 应用捆绑包和运行时下载到浏览器时，自动呈现模式最初会使用交互式 SSR。 激活 .NET WebAssembly 运行时后，呈现将切换到 CSR。

Blazor Web App 模板会使用单个项目同时启用静态和交互式服务器端呈现。 如果还启用交互式 WebAssembly 呈现，项目将额外包含一个客户端项目 (.Client) 用于基于 WebAssembly 的组件。 客户端项目的生成输出将下载到浏览器并在客户端上执行。 使用交互式 WebAssembly 或交互式自动呈现模式的组件必须位于 .Client 项目中。

.Client 项目的组件文件夹结构不同于 Blazor Web App 的主项目文件夹结构，因为主项目是标准 ASP.NET Core 项目。 主项目必须考虑到与 Blazor 无关的 ASP.NET Core 项目的其他资产。 欢迎你在 .Client 项目中使用任何你想要的组件文件夹结构。 如果想要，你可以在 .Client 项目中镜像主项目的组件文件夹布局。 请注意，如果将组件移动到非项目模板使用的文件夹中，则命名空间可能需要为布局文件等资产进行调整。

有关组件和呈现模式的详细信息，请参阅 ASP.NET Core Razor 组件和 ASP.NET Core Blazor 呈现模式文章。

根据应用创建时选择的交互式呈现模式，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 文件夹包含应用的可路由服务器端 Razor 组件。 每个页面的路由都是使用 @page 指令指定的。

App 组件 (App.razor) 是应用的根组件，其中包含 HTML <head> 标记、Routes 组件和 Blazor<script> 标记。 根组件是应用加载的第一个组件。

每个服务器和 .Client 项目中的 _Imports.razor 文件都包括任一项目的 Razor 组件的公共 Razor 指令，例如命名空间的 @using 指令。

Properties 文件夹在 launchSettings.json 文件中保存开发环境配置。

注意

http 位于 launchSettings.json 文件中的 https 配置文件前面。 使用 .NET CLI 运行应用时，该应用在 HTTP 终结点上运行，因为找到的第一个配置文件是 http。 配置文件顺序让你能够轻松地过渡到为 Linux 和 macOS 用户采用 HTTPS。 如果希望使用 .NET CLI 启动应用，而无需将 -lp https 或 --launch-profile https 选项传递给 dotnet watch（或 dotnet run）命令，只需在文件中将 https 配置文件放在 http 配置文件上方即可。

服务器项目的 wwwroot 文件夹是用于保存应用的公共静态资产的服务器项目的 Web 根文件夹。

服务器项目的 Program.cs 文件是项目的入口点，用于设置 ASP.NET Core Web 应用程序主机，并包含应用的启动逻辑，包括服务注册、配置、记录和请求处理管道：

服务器或 .Client 项目中的应用设置文件（appsettings.Development.json、appsettings.json）用于提供配置设置。 在服务器项目中，设置文件位于项目的根目录中。 在 .Client 项目中，设置文件从 Web 根文件夹 wwwroot 中获取。

在 .Client 项目中：

  • Pages 文件夹包含可路由的客户端 Razor 组件。 每个页面的路由都是使用 @page 指令指定的。

  • wwwroot 文件夹是 .Client 项目的 Web 根目录文件夹，包含应用的公共静态资产。

  • 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 应用的可路由 Razor 组件 (.razor) 和 Blazor Server 应用的根 Razor 页。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件：

    • _Host.cshtml：实现为 Razor 页面的应用根页面：
      • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
      • 此主机页面指定根 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 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件：提供应用的配置设置。

  • Program.cs：应用的入口点，用于设置 ASP.NET Core 主机 并包含应用的启动逻辑，其中包括服务注册和请求处理管道配置：

    • 指定应用的依赖项注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务，并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • 配置应用的请求处理管道：
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接，该框架用于向应用添加实时 Web 功能。
      • 调用 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 应用的可路由 Razor 组件 (.razor) 和 Blazor Server 应用的根 Razor 页。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件：

    • _Host.cshtml：实现为 Razor 页面的应用根页面：
      • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
      • 此主机页面指定根 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 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件：提供应用的配置设置。

  • Program.cs：应用的入口点，用于设置 ASP.NET Core 主机 并包含应用的启动逻辑，其中包括服务注册和请求处理管道配置：

    • 指定应用的依赖项注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务，并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • 配置应用的请求处理管道：
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接，该框架用于向应用添加实时 Web 功能。
      • 调用 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 应用的可路由 Razor 组件 (.razor) 和 Blazor Server 应用的根 Razor 页。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件：

    • _Host.cshtml：实现为 Razor 页面的应用根页面：
      • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
      • 此主机页面指定根 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 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件：提供应用的配置设置。

  • Program.cs：应用的入口点，用于设置 ASP.NET Core 主机。

  • Startup.cs：包含应用的启动逻辑。 Startup 类定义两个方法：

    • ConfigureServices：配置应用的依赖关系注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务，并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • Configure：配置应用的请求处理管道：
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接，该框架用于向应用添加实时 Web 功能。
      • 调用 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 应用的可路由 Razor 组件 (.razor) 和 Blazor Server 应用的根 Razor 页。 每个页面的路由都是使用 @page 指令指定的。 该模板包括以下组件：

    • _Host.cshtml：实现为 Razor 页面的应用根页面：
      • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
      • 此主机页面指定根 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 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • appsettings.json 和环境应用设置文件：提供应用的配置设置。

  • Program.cs：应用的入口点，用于设置 ASP.NET Core 主机。

  • Startup.cs：包含应用的启动逻辑。 Startup 类定义两个方法：

    • ConfigureServices：配置应用的依赖关系注入 (DI) 服务。 通过调用 AddServerSideBlazor 添加服务，并将 WeatherForecastService 添加到服务容器以供示例 FetchData 组件使用。
    • Configure：配置应用的请求处理管道：
      • 调用 MapBlazorHub 可以为与浏览器的实时连接设置终结点。 使用 SignalR 创建连接，该框架用于向应用添加实时 Web 功能。
      • 调用 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 应用的可路由 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 位于 launchSettings.json 文件中的 https 配置文件前面。 使用 .NET CLI 运行应用时，该应用在 HTTP 终结点上运行，因为找到的第一个配置文件是 http。 配置文件顺序让你能够轻松地过渡到为 Linux 和 macOS 用户采用 HTTPS。 如果希望使用 .NET CLI 启动应用，而无需将 -lp https 或 --launch-profile https 选项传递给 dotnet watch（或 dotnet run）命令，只需在文件中将 https 配置文件放在 http 配置文件上方即可。

  • wwwroot 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产，例如配置设置和示例天气数据 (sample-data/weather.json) 的 appsettings.json 和环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面：

    • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 使用 app 的 id (<div id="app">Loading...</div>) 在 div DOM 元素的位置呈现组件。

  • Program.cs：应用入口点，用于设置 WebAssembly 主机：

    • App 组件是应用的根组件。 对于根组件集合 (builder.RootComponents.Add<App>("#app"))，使用 app 的 id（wwwroot/index.html 中的 <div id="app">Loading...</div>）将 App 组件指定为 div DOM 元素。
    • 添加并配置了服务（例如，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 应用的可路由 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)（.NET 7 或更低版本中的 ASP.NET Core）：Blazor 调查组件。

  • wwwroot 文件夹：应用的 Web 根目录文件夹，其中包含应用的公共静态资产，包括 appsettings.json 和配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面：

    • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 使用 app 的 id (<div id="app">Loading...</div>) 在 div DOM 元素的位置呈现组件。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs：应用入口点，用于设置 WebAssembly 主机：

    • App 组件是应用的根组件。 对于根组件集合 (builder.RootComponents.Add<App>("#app"))，使用 app 的 id（wwwroot/index.html 中的 <div id="app">Loading...</div>）将 App 组件指定为 div DOM 元素。
    • 添加并配置了服务（例如，builder.Services.AddSingleton<IMyDependency, MyDependency>()）。

配置其他选项时，从 Blazor WebAssembly 项目模板生成的应用中可能会出现其他文件和文件夹。 例如，使用 ASP.NET Core Identity 生成应用包括用于身份验证和授权功能的其他资产。

托管 Blazor WebAssembly 解决方案包括以下 ASP.NET Core 项目：

  • “Client”：Blazor WebAssembly 应用。
  • “Server”：向客户端提供 Blazor WebAssembly 应用和天气数据的应用。
  • “Shared”：维护常见类、方法和资源的项目。

解决方案是从 Visual Studio 中的 Blazor WebAssembly 项目模板生成的，其中选中了“ASP.NET Core 托管”复选框，或选中了使用 .NET CLI 的 dotnet new blazorwasm 命令的 -ho|--hosted 选项。 有关详细信息，请参阅用于 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 应用的可路由 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 根目录文件夹，其中包含应用的公共静态资产，包括 appsettings.json 和配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面：

    • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 使用 app 的 id (<div id="app">Loading...</div>) 在 div DOM 元素的位置呈现组件。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs：应用入口点，用于设置 WebAssembly 主机：

    • App 组件是应用的根组件。 对于根组件集合 (builder.RootComponents.Add<App>("#app"))，使用 app 的 id（wwwroot/index.html 中的 <div id="app">Loading...</div>）将 App 组件指定为 div DOM 元素。
    • 添加并配置了服务（例如，builder.Services.AddSingleton<IMyDependency, MyDependency>()）。

配置其他选项时，从 Blazor WebAssembly 项目模板生成的应用中可能会出现其他文件和文件夹。 例如，使用 ASP.NET Core Identity 生成应用包括用于身份验证和授权功能的其他资产。

托管 Blazor WebAssembly 解决方案包括以下 ASP.NET Core 项目：

  • “Client”：Blazor WebAssembly 应用。
  • “Server”：向客户端提供 Blazor WebAssembly 应用和天气数据的应用。
  • “Shared”：维护常见类、方法和资源的项目。

解决方案是从 Visual Studio 中的 Blazor WebAssembly 项目模板生成的，其中选中了“ASP.NET Core 托管”复选框，或选中了使用 .NET CLI 的 dotnet new blazorwasm 命令的 -ho|--hosted 选项。 有关详细信息，请参阅用于 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 应用的可路由 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 根目录文件夹，其中包含应用的公共静态资产，包括 appsettings.json 和配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面：

    • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 使用 app 的 id (<div id="app">Loading...</div>) 在 div DOM 元素的位置呈现组件。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs：应用入口点，用于设置 WebAssembly 主机：

    • App 组件是应用的根组件。 对于根组件集合 (builder.RootComponents.Add<App>("#app"))，使用 app 的 id（wwwroot/index.html 中的 <div id="app">Loading...</div>）将 App 组件指定为 div DOM 元素。
    • 添加并配置了服务（例如，builder.Services.AddSingleton<IMyDependency, MyDependency>()）。

配置其他选项时，从 Blazor WebAssembly 项目模板生成的应用中可能会出现其他文件和文件夹。 例如，使用 ASP.NET Core Identity 生成应用包括用于身份验证和授权功能的其他资产。

托管 Blazor WebAssembly 解决方案包括以下 ASP.NET Core 项目：

  • “Client”：Blazor WebAssembly 应用。
  • “Server”：向客户端提供 Blazor WebAssembly 应用和天气数据的应用。
  • “Shared”：维护常见类、方法和资源的项目。

解决方案是从 Visual Studio 中的 Blazor WebAssembly 项目模板生成的，其中选中了“ASP.NET Core 托管”复选框，或选中了使用 .NET CLI 的 dotnet new blazorwasm 命令的 -ho|--hosted 选项。 有关详细信息，请参阅用于 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 应用的可路由 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 根目录文件夹，其中包含应用的公共静态资产，包括 appsettings.json 和配置设置的环境应用设置文件。 index.html 网页是实现为 HTML 页面的应用的根页面：

    • 最初请求应用的任何页面时，都会呈现此页面并在响应中返回。
    • 此页面指定根 App 组件的呈现位置。 组件呈现在 app DOM 元素 (<app>Loading...</app>) 的位置。

  • _Imports.razor：包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如用于命名空间的 @using 指令。

  • App.razor：应用的根组件，用于使用 Router 组件来设置客户端路由。 Router 组件会截获浏览器导航并呈现与请求的地址匹配的页面。

  • Program.cs：应用入口点，用于设置 WebAssembly 主机：

    • App 组件是应用的根组件。 App 组件指定为根组件集合 (builder.RootComponents.Add<App>("app")) 的 app DOM 元素（wwwroot/index.html 中的 <app>Loading...</app>）。
    • 添加并配置了服务（例如，builder.Services.AddSingleton<IMyDependency, MyDependency>()）。

配置其他选项时，从 Blazor WebAssembly 项目模板生成的应用中可能会出现其他文件和文件夹。 例如，使用 ASP.NET Core Identity 生成应用包括用于身份验证和授权功能的其他资产。

托管 Blazor WebAssembly 解决方案包括以下 ASP.NET Core 项目：

  • “Client”：Blazor WebAssembly 应用。
  • “Server”：向客户端提供 Blazor WebAssembly 应用和天气数据的应用。
  • “Shared”：维护常见类、方法和资源的项目。

解决方案是从 Visual Studio 中的 Blazor WebAssembly 项目模板生成的，其中选中了“ASP.NET Core 托管”复选框，或选中了使用 .NET CLI 的 dotnet new blazorwasm 命令的 -ho|--hosted 选项。 有关详细信息，请参阅用于 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 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)，并从单独的 Blazor Server 和 Blazor WebAssembly 项目引用 RCL。 对于实现因宿主模型而异的常见服务，请在 RCL 中定义服务接口，并在 Blazor Server 和 Blazor WebAssembly 项目中实现服务。

其他资源