ASP.NET Core Blazor 项目结构

注意

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

版本选择器

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

目录选择器

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

Blazor Server

Blazor Server 项目模板:blazorserverblazorserver-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 项目模板:blazorwasmblazorwasm-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 组件的呈现位置。 使用 appid (<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")),使用 appidwwwroot/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 组件的呈现位置。 使用 appid (<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")),使用 appidwwwroot/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 组件的呈现位置。 使用 appid (<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")),使用 appidwwwroot/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 项目中实现服务。

其他资源