.NET5 Blazor初探
学更好的别人，
做更好的自己。
——《微卡智享》
本文长度为3935字，预计阅读10分钟
前言
经常看我公众号的朋友应该能看出来，我的文章基本都是.Net、Android、OpenCV的相关的，用到的语言C#、Kotlin、C++、还有现在偶尔还维护下的Delphi老代码。本来也想空余时间学一下前端的，公众号里也有几篇VUE文章，后台没再继续学习的主要原因就是学习的成本太高，除了JS的语言，像编译部署、环境搭建、跨域访问等一系列的东西，需要花费的时间太多。前阵子.Net5发布后跟着做了个小的东西，也是无意间看到了Blazor后，抱着测试看看是否占用学习时间太多的想法做了个Demo，于是有这今天这篇。
实现效果
上图中可以看到，原默认生成的Demo里只有前三项，我在菜单栏中又加入了入库录入的一个菜单，并且查询显示出了数据。
文章开头我就说过，考虑到学习，编译，布署、环境搭建及跨域等这些的学习时间成本，我这个Demo直接就是通过调用Server端的Api，数据库使用SqlSugar的框架直接获取数据，然后发布后调用的结果。一共就花了几小时的时间到的这个效果后，所以我决定了空余的时间把Blazor掌握好，弥补一下前端这块的短板。
Blazor简介
微卡智享
说起Blazor的Slogan：将.Net技术带回浏览器。
组件
Blazor应用基于组件。Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。
组件是内置到 .NET 程序集的 .NET C# 类，它们用于：
- 定义灵活的 UI 呈现逻辑。
- 处理用户事件。
- 可以嵌套和重用。
- 可作为 Razor 类库或 NuGet 包共享和分发。
组件类通常以 Razor 标记页（文件扩展名为 .razor）的形式编写。Blazor 中的组件有时被称为 Razor 组件。Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。 借助 Razor，可使用 Visual Studio 中的 IntelliSense 编程支持在同一文件中的 HTML 标记与 C# 之间切换。Razor Pages 和 MVC 也使用 Razor。 与基于请求/响应模型生成的 Razor Pages 和 MVC 不同，组件专门用于处理客户端 UI 逻辑和构成。
Blazor 使用 UI 构成的自然 HTML 标记。 下面的 Razor 标记演示了一个组件 (Dialog.razor)，它显示一个对话框，并处理在用户选择按钮时发生的事件：
<div class="card" style="width:22rem">
<div class="card-body">
<h3 class="card-title">@Title</h3>
<p class="card-text">@ChildContent</p>
<button @onclick="OnYes">Yes!</button>
</div>
</div>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public string Title { get; set; }
private void OnYes()
{
Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
}
}从上面的代码看，感觉上面是页面，下面的代码的方式和VUE也挺像的。
Blazor WebAssembly
Blazor WebAssembly 是单页应用 (SPA) 框架，用于使用 .NET 生成交互式客户端 Web 应用。Blazor WebAssembly 使用无插件或将代码重新编译为其他语言的开放式 Web 标准。Blazor WebAssembly 适用于所有新式 Web 浏览器，包括移动浏览器。
通过 WebAssembly（缩写为 wasm），可在 Web 浏览器内运行 .NET 代码。WebAssembly 是针对快速下载和最大执行速度优化的压缩字节码格式。WebAssembly 是开放的 Web 标准，支持用于无插件的 Web 浏览器。
WebAssembly 代码可通过 JavaScript（称为 JavaScript 互操作性，通常简称为 JavaScript 互操作或 JS 互操作）访问浏览器的完整功能 。 通过浏览器中的 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行，沙盒提供的保护可防御客户端计算机上的恶意操作。
简单概括，Blazor使用WebAssembly来工作，WebAssembly是一种高性能的管道，可以将代码预编译为紧凑的二进制格式。最重要的是，每个主流浏览器（包括移动版本）都支持WebAssembly。
程序说明
微卡智享
01
SqlSugar依赖包
Shared是Client（前端）及Server（后端）同时用到的公共类，上图中红框标注的要加载的NuGet包中，一定要使用SqlSugarCoreNoDrive，因为我在发布程序的时候基于.Net5可移植的方式，开始一直不成功，提示OracleDataAccess.DLL的问题。想到应该是因为WIndows的平台，如果是可移植所以无法打包，于是在NuGet中搜索了SqlSugar，发现有一个NoDrive的包，然后把原来的移除后替换这个，解决了发布的问题。
02
添加页面及调用API
默认天气的Demo中就有向服务端请求Api的方式，里面用到了@inject注入HttpClient的方式请求。
于是就模仿这个页面新建了一个razor的组件（注：razor的组件第一个字母必须是大写）
@page "/ReplenishLrpage"
@using ZngyTest.Shared.Znyg.Model
@inject HttpClient http
<h3>药品录入查询</h3>
@if (RelenishLrs == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>药品编码</th>
<th>药品名称</th>
<th>单位</th>
<th>入库数量</th>
<th>入库日期</th>
<th>入库单号</th>
</tr>
</thead>
<tbody>
@foreach (var item in RelenishLrs)
{
<tr>
<td>@item.gcode</td>
<td>@item.gname</td>
<td>@item.unit</td>
<td>@item.qty</td>
<td>@string.Format("{0:yyyy-MM-dd}", item.sdate)</td>
<td>@item.Remark</td>
</tr>
}
</tbody>
</table>
}
@code {
private List<Replenish_Lr> RelenishLrs;
protected override async Task OnInitializedAsync()
{
RelenishLrs = await http.GetFromJsonAsync<List<Replenish_Lr>>("api/ReplenishLr/page");
}
}
上面的代码可以看到，我们请求服务端的Api地址。
服务端也添加对应的Controller，函数中也对应的Api的地址。
实现方式在Shared的类中。
03
服务器数据库配置
读取数据库配置还是用到了Configucation，这个在《使用.Net5尝鲜的一些小总结及Configuration.Json读取配置文件的使用》中有讲过。
然后新建了一个InitProject的类，里面写读取数据库的参数的静态方法。
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error");
}
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapControllers();
endpoints.MapFallbackToFile("index.html");
});
InitProject.initZnygConfig();
}最后在Startup的Configure中最后加入这个静态方法的调用。
总结一下
Blazor对于.Net的想做前端的开发人员来说学习成本真的很低。
我个人的学习方法，想要快速学习掌握新的知识---最好的方式就是直接在项目中实践，然后再针对不明白的东西返回来学基础。按步就班的学习在学校挺好，工作以后就太浪费时间了。
完