再学Blazor——概述

简介

Blazor 是一种 .NET 前端 Web 框架，同时支持服务器端呈现和客户端交互性。

• 使用 C# 语言创建丰富的交互式 UI
• 共享前后端应用逻辑
• 可以生成混合桌面和移动应用
• 受益于 .NET 的性能、可靠性和安全性
• 需要有 HTML、CSS、JS 相关基础（开发 UI 框架的话）
• 组件化设计，类似 React、Vue 等前端框架

组件

Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体，甚至小到一个输入框。

• 定义灵活的 UI 呈现逻辑
• 处理用户事件
• 可以嵌套和重用 （大大提高开发效率和维护成本）
• 可作为 Razor 类库或 NuGet 包共享和分发
• 有 Razor 标记页（.razor文件）和纯 C# 高级写法两种编写形式

1. Razor 常用写法

此写法为 HTML 和 C# 混合开发，HTML 结构清晰，示例如下：

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

2. C# 高级写法

如下代码为纯 C# 高级写法，这段代码也是 .razor 文件编译后生成的格式。如果你反编译 Razor 语法写的组件dll，发现上述 HTML 和 C# 混合开发的组件代码与下面类似。

class Counter : ComponentBase
{
    private int currentCount = 0;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //构建 h1 标签
        builder.OpenElement(0, "h1");
        builder.AddMarkupContent(1, "Counter");
        builder.CloseElement();

        //构建 P 标签
        builder.OpenElement(0, "p");
        builder.AddMarkupContent(1, $"Current count: {currentCount}");
        builder.CloseElement();

        //构建按钮
        builder.OpenElement(0, "button");
        builder.AddAttribute(1, "class", "btn btn-primary");
        builder.AddAttribute(2, "onclick", EventCallback.Factory.Create(this, IncrementCount));
        builder.AddMarkupContent(3, "Click me");
        builder.CloseElement();
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

上述 BuildRenderTree 方法代码较长，我们可以将 UI 元素封装成扩展方法，button封装成组件，这样构建组件既方便又可读。使用扩展方法后组件代码改进如下：

class Counter : ComponentBase
{
    private int currentCount = 0;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //构建 h1 标签
        builder.H1("Counter");
        //构建 P 标签
        builder.P($"Current count: {currentCount}");
        //构建按钮
        builder.Component<Button>()
               .Set(c => c.Style, "btn btn-primary")
               .Set(c => c.Text, "Click me")
               .Set(c => c.OnClick, IncrementCount)
               .Build();
    }

    private void IncrementCount()
    {
        currentCount++;
    }
}

Web 应用

Blazor Web应用提供了一种基于组件的体系结构，该体系结构具有在单个解决方案中实现服务器端呈现和完整的客户端交互性的能力。在这种体系结构中，你可以在服务器端和客户端呈现模式之间进行切换，甚至可以在同一页面中混合使用这两种模式。

Blazor Web应用可以通过静态呈现来自服务器的HTML内容来响应，这种方式的优点是能够快速将UI传送到浏览器。由于UI呈现在服务器上快速执行，所以无需下载大型JavaScript捆绑包，从而大大加快了页面加载速度。

Blazor Web应用还支持交互式服务器呈现，这种方式通过与浏览器的实时连接在服务器上处理UI交互。这种呈现方式可以实现丰富的用户体验，就像客户端应用所提供的那样，不过无需创建API终结点就能访问服务器资源。

此外，Blazor Web应用也支持通过客户端呈现来处理交互。这种呈现方式依赖于使用可随附应用下载的WebAssembly构建的.NET运行时。在WebAssembly上运行Blazor时，.NET代码可以访问浏览器的完整功能，并可与JavaScript互操作。 .NET 代码在浏览器的安全性沙盒中运行，沙盒提供的保护可防御客户端计算机上的恶意操作。

对于独立Blazor WebAssembly应用，该应用可以完全在浏览器中直接运行，无需服务器参与。对于这种应用，资产可作为静态文件部署到可为客户端提供静态内容的Web服务器或服务中。下载后，可以将独立Blazor WebAssembly应用作为渐进式Web应用（PWA）进行缓存并脱机执行。

混合应用

Blazor Hybrid 允许在本地客户端应用中将 Razor 组件与适用于 Web、移动和桌面平台的本机及 Web 技术进行混合使用。其实现方式是，代码在 .NET 进程中以本地形式运行，并使用本地互操作通道将 Web UI 呈现在嵌入式 Web View 控件中。

混合应用采用 .NET Multi-platform App UI （.NET MAUI）来构建，这是一个跨平台框架，利用 C# 和 XAML 来创建本机移动应用和桌面应用。