模板

ASP.NET Core Blazor 模板

作者：Daniel Roth 和 Luke Latham

重要

Blazor WebAssembly 为预览版状态

ASP.NET Core 3.0 支持 Blazor Server 。 Blazor WebAssembly 在 ASP.NET Core 3.1 中为预览版。

Blazor 框架提供模板，用于为每个 Blazor 承载模型开发应用程序：

  • Blazor WebAssembly （blazorwasm）
  • Blazor 服务器（blazorserver）

有关 Blazor的宿主模型的详细信息，请参阅 ASP.NET Core Blazor 宿主模型。

有关基于模板创建 Blazor 应用程序的分步说明，请参阅 ASP.NET Core Blazor 入门。

Blazor 项目结构

以下文件和文件夹构成了 Blazor 模板生成的 Blazor 应用：

  • Program.cs – 应用程序的入口点，用于设置：

    • ASP.NET Core主机（Blazor Server）
    • WebAssembly host （Blazor WebAssembly） – 此文件中的代码对于从 Blazor WebAssembly 模板（blazorwasm）创建的应用程序是唯一的。
      • 作为应用程序的根组件的 App 组件被指定为 Add 方法的 app DOM 元素。
      • 服务可以在主机生成器上配置 ConfigureServices 方法（例如，builder.Services.AddSingleton<IMyDependency, MyDependency>();）。
      • 可以通过主机生成器（builder.Configuration）提供配置。

  • Startup.cs （Blazor Server） – 包含应用的启动逻辑。 Startup 类定义两种方法：

    • ConfigureServices – 配置应用的依赖项注入（DI）服务。 在 Blazor Server apps 中，通过调用 AddServerSideBlazor添加服务，WeatherForecastService 将添加到服务容器中，供示例 FetchData 组件使用。
    • Configure – 配置应用的请求处理管道：
      • 调用 MapBlazorHub 来设置与浏览器进行实时连接时使用的终结点。 该连接是使用SignalR创建的，它是一个框架，用于向应用程序添加实时 web 功能。
      • 调用MapFallbackToPage （"/_Host"）以设置应用的根页面（Pages/_Host），并启用导航。

  • wwwroot/index.html （Blazor WebAssembly） – 作为 html 页面实现的应用的根页面：

    • 当最初请求应用的任何页面时，此页将呈现并在响应中返回。
    • 页面指定 App 呈现根组件的位置。 App 组件（app.config）指定为 Startup.Configure中 AddComponent 方法的 app DOM 元素。
    • _framework/blazor.webassembly.js 加载 JavaScript 文件，该文件：
      • 下载 .NET 运行时、应用程序和应用程序的依赖项。
      • 初始化运行时以运行应用程序。

  • Pages/_Host cshtml （Blazor Server） – 作为 Razor 页面实现的应用的根页面：

    • 当最初请求应用的任何页面时，此页将呈现并在响应中返回。
    • _framework/blazor.server.js 加载 JavaScript 文件，该文件将设置浏览器与服务器之间的实时 SignalR 连接。
    • "主机" 页指定根 App 组件（app.config）的呈现位置。

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

  • Pages文件夹 – 包含组成 Blazor 应用的可路由组件/页面（razor）。 每页的路由都是使用@page指令指定的。 此模板包括以下组件：

    • Index （–razor）实现主页。
    • Counter （razor） – 实现计数器页。
    • 应用中发生未经处理的异常时，将 Error （仅限Error、Blazor Server app） – 呈现。
    • FetchData （FetchData） – 实现 "提取数据" 页。

  • 共享文件夹 – 包含应用使用的其他 UI 组件（razor）：

    • MainLayout （MainLayout） – 应用的布局组件。
    • NavMenu （NavMenu） – 实现侧栏导航。 包含NavLink 组件（NavLink），该组件将呈现指向其他 Razor 组件的导航链接。 加载组件时，NavLink 组件会自动指示选定状态，这有助于用户了解当前显示的组件。

  • _Imports – 包含包含在应用组件（razor）中的常见 razor 指令，如用于命名空间的@using指令。

  • 数据文件夹（Blazor Server） – 包含向应用程序的 FetchData 组件提供示例天气数据的 WeatherForecastService 的 WeatherForecast 类和实现。

  • wwwroot – 包含应用的公共静态资产的应用的Web 根文件夹。

  • appsettings （Blazor Server） – 应用的配置设置。

目录
模板