9.4 Blazor (客户端 Web UI 框架)

## 9.4 Blazor (客户端 Web UI 框架) ## 9.4 Blazor (客户端 Web UI 框架) Blazor 是一个使用 .NET 构建交互式客户端 Web UI 的框架。它允许开发者使用 C# 代替 JavaScript 来编写 Web 前端代码，并利用 .NET 的强大功能、工具和库。Blazor 提供了两种托管模型：Blazor WebAssembly 和 Blazor Server，分别在客户端浏览器和服务器端运行 .NET 代码。 ### 9.4.1 Blazor 的优势 * **使用 C#：** 避免 JavaScript，使用您已经熟悉的 .NET 语言编写 Web 前端。 * **共享代码：** 可以在客户端和服务器端共享代码，例如数据模型、验证逻辑等。 * **.NET 生态系统：** 利用 .NET 的强大功能、工具、库和安全性。 * **性能：** Blazor WebAssembly 编译为 WebAssembly，提供接近原生应用的性能。Blazor Server 通过 SignalR 提供高效的实时更新。 * **组件模型：** 使用可重用的组件构建 UI，提高代码的可维护性和可测试性。 * **现代 Web 标准：** Blazor 基于现代 Web 标准构建，支持 HTML、CSS 和 JavaScript 互操作。 ### 9.4.2 Blazor 托管模型 **9.4.2.1 Blazor WebAssembly** Blazor WebAssembly 将 .NET 运行时、您的应用和依赖项下载到浏览器中。应用直接在浏览器中运行，无需服务器端 .NET 运行时。 * **优点：** * 完全在客户端运行，服务器负载低。 * 支持离线应用。 * 利用客户端资源，响应速度快。 * **缺点：** * 初始加载时间较长，因为需要下载 .NET 运行时。 * 浏览器必须支持 WebAssembly。 * 安全性依赖于客户端环境。 * **适用场景：** * 需要高性能的客户端应用。 * 允许离线使用。 * 对服务器资源有限制。 **9.4.2.2 Blazor Server** Blazor Server 应用在服务器上运行。UI 更新通过 SignalR 连接发送到客户端。 * **优点：** * 初始加载时间短。 * 充分利用服务器资源。 * 适用于资源密集型应用。 * 更强的安全性，因为代码在服务器端运行。 * **缺点：** * 需要持续的网络连接。 * 服务器负载较高。 * 延迟可能影响用户体验。 * **适用场景：** * 需要快速加载的应用。 * 对安全性要求高。 * 可以接受服务器负载。 ```mermaid graph TD A[User Browser] --> B{Blazor WebAssembly}; B --> C[.NET Runtime (WebAssembly)]; B --> D[Your App]; A --> E{Blazor Server}; E --> F[ASP.NET Core Server]; F -- SignalR --> A; style B fill:#f9f,stroke:#333,stroke-width:2px style E fill:#ccf,stroke:#333,stroke-width:2px ``` ### 9.4.3 Blazor 组件 Blazor 应用由组件构成。组件是可重用的 UI 元素，可以包含 HTML 标记、C# 代码和其他组件。 **9.4.3.1 组件的创建** Blazor 组件通常使用 Razor 语法创建，文件扩展名为 `.razor`。 ```csharp // Counter.razor @page "/counter"

Counter

Current count: @currentCount

Click me @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } ``` **9.4.3.2 组件参数** 组件可以接收参数，允许父组件向子组件传递数据。 ```csharp // MyComponent.razor

@Title

@Message

@code { [Parameter] public string? Title { get; set; } [Parameter] public string? Message { get; set; } } ``` ```csharp // ParentComponent.razor ``` **9.4.3.3 事件处理** 组件可以处理用户事件，例如点击、鼠标移动等。 ```csharp // MyButton.razor @ButtonText @code { [Parameter] public string ButtonText { get; set; } = "Click me"; [Parameter] public EventCallback OnClick { get; set; } } ``` **9.4.3.4 组件生命周期** Blazor 组件具有生命周期方法，可以在组件的不同阶段执行代码。 * `OnInitialized`: 在组件初始化后调用。 * `OnParametersSet`: 在设置组件参数后调用。 * `OnAfterRender`: 在组件渲染后调用。 ### 9.4.4 数据绑定 Blazor 支持数据绑定，可以将 UI 元素的值绑定到 C# 代码中的变量。 **9.4.4.1 单向绑定** 将 C# 变量的值绑定到 UI 元素。 ```csharp

Value: @myValue

@code { private string myValue = "Initial Value"; } ``` **9.4.4.2 双向绑定** 将 UI 元素的值绑定到 C# 变量，并且当 UI 元素的值发生变化时，C# 变量也会更新。 ```csharp

Value: @myValue

@code { private string myValue = "Initial Value"; } ``` ### 9.4.5 依赖注入 Blazor 支持依赖注入，允许您将服务注入到组件中。 ```csharp // MyComponent.razor @inject IMyService MyService

Value: @MyService.GetValue()

@code { } ``` ```csharp // IMyService.cs public interface IMyService { string GetValue(); } // MyService.cs public class MyService : IMyService { public string GetValue() { return "Service Value"; } } ``` 需要在 `Program.cs` 文件中注册服务： ```csharp // Program.cs (Blazor WebAssembly) builder.Services.AddScoped(); // Program.cs (Blazor Server) builder.Services.AddScoped(); ``` ### 9.4.6 JavaScript 互操作 Blazor 允许您与 JavaScript 代码进行互操作。 **9.4.6.1 从 C# 调用 JavaScript** 使用 `IJSRuntime` 服务从 C# 代码调用 JavaScript 函数。 ```csharp @inject IJSRuntime JSRuntime Call JavaScript @code { private async Task CallJavaScript() { await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!"); } } ``` **9.4.6.2 从 JavaScript 调用 C#** 使用 `[JSInvokable]` 属性将 C# 方法暴露给 JavaScript 代码。 ```csharp // MyComponent.razor @inject IJSRuntime JSRuntime @code { [JSInvokable] public static string GetMessage() { return "Hello from C#!"; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("setMessage", DotNetObjectReference.Create(this)); } } } ``` ```javascript // JavaScript code function setMessage(dotNetHelper) { dotNetHelper.invokeMethodAsync('GetMessage') .then(message => alert(message)); } ``` ### 9.4.7 路由 Blazor 使用 `@page` 指令定义组件的路由。 ```csharp // MyPage.razor @page "/mypage"

My Page

``` 可以使用 `NavigationManager` 服务进行页面导航。 ```csharp @inject NavigationManager NavigationManager Go to Other Page @code { private void NavigateToOtherPage() { NavigationManager.NavigateTo("/otherpage"); } } ``` ### 9.4.8 状态管理 Blazor 提供了多种状态管理方法，包括： * **组件参数：** 用于父子组件之间的数据传递。 * **服务：** 用于在整个应用中共享状态。 * **状态容器：** 使用第三方库（例如 Fluxor 或 Redux.NET）来管理复杂的状态。 ### 9.4.9 总结 Blazor 是一个强大的 .NET Web UI 框架，它允许开发者使用 C# 构建交互式的客户端 Web 应用。通过选择合适的托管模型（Blazor WebAssembly 或 Blazor Server），您可以根据您的应用需求优化性能和安全性。Blazor 的组件模型、数据绑定、依赖注入和 JavaScript 互操作功能使其成为构建现代 Web 应用的理想选择。 掌握Blazor，能够让.NET开发者更好的构建全栈应用。