ASP.NET Core Blazor 项目结构

  • 项目

注意

此版本不是本文的最新版本。 若要切换到最新版本，请使用目录顶部的 ASP.NET Core 版本选择器。

版本选择器

如果选择器在较窄的浏览器窗口中不可见，请扩大窗口或选择垂直省略号 (⋮) >“目录”。

目录选择器

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

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) 和 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) 和 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) 和 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) 和 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、blazorwasm-empty

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构：

  • 如果使用 blazorwasm 模板，则应用将填充以下内容：
    • 一个 FetchData 组件的演示代码，该组件从静态资产 (weather.json) 加载数据，且用户与 Counter 组件交互。
    • Bootstrap 前端工具包。
  • 如果使用 blazorwasm-empty 模板，则无需演示代码和 Bootstrap 即可创建应用。

项目结构：

  • Pages 文件夹：包含构成 Blazor 应用的可路由组件/页面 (.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项目模板：blazorwasm

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码，该组件从静态资产 weather.json 加载数据，且用户与 Counter 组件交互。

  • Pages 文件夹：包含构成 Blazor 应用的可路由组件/页面 (.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项目模板：blazorwasm

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码，该组件从静态资产 weather.json 加载数据，且用户与 Counter 组件交互。

  • Pages 文件夹：包含构成 Blazor 应用的可路由组件/页面 (.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项目模板：blazorwasm

Blazor WebAssembly 模板创建 Blazor WebAssembly 应用的初始文件和目录结构。 该应用中填充了一个 FetchData 组件的演示代码，该组件从静态资产 weather.json 加载数据，且用户与 Counter 组件交互。

  • Pages 文件夹：包含构成 Blazor 应用的可路由组件/页面 (.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”项目的天气数据。

<head> 内容的位置

在 Blazor Server 应用中，<head> 内容位于 Pages/_Host.cshtml 文件中。

在 Blazor Server 应用中，<head> 内容位于 Pages/_Layout.cshtml 文件中。

在 Blazor Server 应用中，<head> 内容位于 Pages/_Host.cshtml 文件中。

在 Blazor WebAssembly 应用中，<head> 内容位于 wwwroot/index.html 文件中。

双 Blazor Server/Blazor WebAssembly 应用

若要创建可以作为 Blazor Server 应用或 Blazor WebAssembly 应用运行的应用，一种方法是将所有应用逻辑和组件放入 Razor 类库 (RCL)，并从单独的 Blazor Server 和 Blazor WebAssembly 项目引用 RCL。 对于实现因宿主模型而异的常见服务，请在 RCL 中定义服务接口，并在 Blazor Server 和 Blazor WebAssembly 项目中实现服务。

其他资源