Blazor Webassembly、Blazor 组件库 之初体验

目标

    用 C# 代替 javascript 做前端开发。

Hello World项目

    选了 Blazor.Diagrams 作为上手程序，这是一个小巧但例子很丰富的流程图绘制库，内核设计比较清晰，扩展性强。

Razor 文件与 ComponentBase.BuildRenderTree 干一样的活

    Blazor.Diagrams库里面混合使用了 Razor 文件和 **Renderer.cs 文件，根据这篇文章的解释，Razor文件在Blazor里面会被编译成同名C#类，得到的代码和在 ComponentBase.BuildRenderTree 里面手写的一样。

@page "/counter"

<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++;
    }
}

   编译之后的结果：

[Route("/counter")]
public class Counter : ComponentBase
{
    private int currentCount = 0;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.AddMarkupContent(0, "<h1>Counter</h1>\r\n\r\n");
        builder.OpenElement(1, "p");
        builder.AddContent(2, "Current count: ");
        builder.AddContent(3, this.currentCount);
        builder.CloseElement();
        builder.AddMarkupContent(4, "\r\n\r\n");
        builder.OpenElement(5, "button");
        builder.AddAttribute(6, "class", "btn btn-primary");
        builder.AddAttribute<MouseEventArgs>(7, "onclick", 
		EventCallback.Factory.Create<MouseEventArgs>(this, 
		new Action(this, Counter.IncrementCount)));
        builder.AddContent(8, "Click me");
        builder.CloseElement();
    }

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

Blazor 组件库(Component Library)

    前端开发的趋势是组件化，可以创建 .net standard 类库(对应vs2019模板类型：Razor类库) ，把Blazor组件包装起来，然后在Blazor Server或者Blazor Webassembly里面共享，Blazor.Diagrams的Demo就是这么设计的。

    创建完 .net standard 2.1 类库后，我发现不能处理.razor 文件，分析csproj文件后发现两处需要修改：

1. Sdk 由 Microsoft.NET.Sdk 修改为 Microsoft.NET.Sdk.Razor；(如果创建的是 Razor类库 这一步省略)
2. 添加 <RazorLangVersion>3.0</RazorLangVersion>。

    保存后这个.net standard类库就成了 Blazor组件库了，可以添加 razor 文件，也可以给 **.razor 文件添加 **.razor.cs 代码文件，会被自动合并。

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>


</Project>

_framework  _content 来定位css/js

   在 Server 的 Home 或 WebAssembly 的 index 文件中，可以引用 Blazor 组件库里面的css或js资源。

   在 WebAssembly  wwwroot/index.html 文件中，你会发现有一行 <script src="_framework/blazor.webassembly.js"></script>，_framework 指向的是编译后生成的 bin\Debug\netstandard2.1\wwwroot\_framework 文件夹。

   根据你使用的组件，可以向 index.html 添加<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />，这里面的 _content 指向引用的组件库 Z.Blazor.Diagrams 下面的 wwwroot 目录。

使用体验

    运行中报错未将对象引用设置到实例，Blazor 没有指向出错的代码，在cs中加断点也无法对变量进行监视，与纯cs开发相比不好调试(老外推荐在Blazor Server模式下调试，然后在Wasm模式下运行)，与js比较开发效率提高了，语法错误在编译时能够发现，但运行时错误一样不好定位。

    Blazor的未来取决于组件库是不是丰富，微软要是买几个商用的库(如syncfusion, infragistics)免费给大家用就爽了。