Blazor Webassembly、Blazor 组件库之初体验

最新推荐文章于 2024-07-26 16:18:09 发布

ironinfo

最新推荐文章于 2024-07-26 16:18:09 发布

阅读量1.3k

点赞数

分类专栏： a 文章标签： blazor web assembly 前端 diagram 组件库

本文链接：https://blog.csdn.net/xhydongda/article/details/117081960

版权

a 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

目标

用 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文件后发现两处需要修改：

Sdk 由 Microsoft.NET.Sdk 修改为 Microsoft.NET.Sdk.Razor；(如果创建的是 Razor类库这一步省略)
添加 <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 目录。