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) – 应用的配置设置。