Blazor框架为前端打开的.NET世界大门

<p>最近在研究Blazor框架，做了些Demo，感觉到了它强大之处，真的不弱于任何JS框架。</p><p>首先C#的语言特性，相比JS不知高出多少，而JS要大一点的项目，必然少不了webpack之类的工具，看着都头痛，实在不想接触。说实话，webpack之类的工具应该是JS语言自身的缺点才产生这样的工具，其他的任何一个语言，需要这种打包工具吗？</p><p>用Blazor框架，必须用webassembly才有意义，而Blazor Server是依赖 SignalR与服务端进行通信，逻辑脚本还是运行于服务端，并更新DOM。通过webassembly，Blazor可以把整个.NET都带到了浏览器上。</p><p>先看一个实例，图片上传前处理，不借助后端，直接在浏览器上处理，实例通过nuget引用了SixLabors.ImageSharp图像处理工具，.NET版本为5.0，如果是3.0则没有<InputFile>组件，通过这个组件我们可以处理本地文件。</p><p>@Page[?][?] "/UseFile"</p><p>@using SixLabors.ImageSharp</p><p>@using SixLabors.ImageSharp.Processing</p><p><label class="ant-btn ant-btn-default"><InputFile style="display:none;" OnChange="FileChange"></InputFile>打开图片</label></p><p><div></p><p>    @IF[?][?] (ImageLoaded)</p><p>    {</p><p>        </p><p>    }</p><p>    <br /> @Message</p><p></div></p><p>@Code[?][?] {</p><p>    private bool ImageLoaded { get; set; }</p><p>    public string Message { get; set; }</p><p>    public string ImgDataUrl { get; set; }</p><p>    public async Task FileChange(InputFileChangeEventArgs evn)</p><p>    {</p><p>        try</p><p>        {</p><p>            //加载图片内容</p><p>            var sFile = evn.File.OpenReadStream(1024 * 1024 * 5); //5M限制</p><p>            var msInput = new System.IO.MemoryStream();</p><p>            await sFile.CopyToAsync(msInput);</p><p> </p><p>            var img = SixLabors.ImageSharp.Image.Load(msInput.ToArray());</p><p>            img.Mutate((p) => { p.Resize(200, 200); }); //调整大小</p><p>            var fmt = SixLabors.ImageSharp.Formats.Jpeg.JpegFormat.Instance;</p><p>            ImgDataUrl = img.ToBase64String(fmt); //data:application/octet-stream;base64, ....</p><p>            ImageLoaded = true;</p><p>            Message = "图片已处理";</p><p>            StateHasChanged();</p><p>        }</p><p>        catch (Exception err)</p><p>        {</p><p>            this.Message = err.Message;</p><p>        }</p><p>    }</p><p>现在我们真的完全的，仅在浏览器上处理了图像，不发送任何请求到后端。我们看到，实现这一过程，我们需要从nuget上引入SixLabors.ImageSharp并使用它就行了。nuget上还有多少东西可以用，不用我说了吧。</p><p>第二个例子，Excel导出，同样在nuget上引用Epplus：</p><p>@Page[?][?] "/exportdata"</p><p><h3>导出Excel</h3></p><p>请输入内容：<AntDesign.Input @bind-Value="@Content" style="width:200px;"></AntDesign.Input></p><p><AntDesign.Button OnClick="ExportToExcel">导出Excel</AntDesign.Button></p><p><br/></p><p>@IF[?][?] (CanDownload)</p><p>{</p><p>    <a download="导出结果.xlsx" href="@DataUrl">下载结果</a></p><p>}</p><p>@Code[?][?] {</p><p>    public string Content { get; set; }</p><p> </p><p>    private bool CanDownload { get; set; } = false;</p><p>    private string DataUrl { get; set; }</p><p> </p><p>    public void ExportToExcel()</p><p>    {</p><p>        using (var pk = new OfficeOpenXml.ExcelPackage())</p><p>        {</p><p>            var sheet = pk.Workbook.Worksheets.Add("Data");</p><p>            sheet.SetValue("A1", Content);</p><p>            var msOutput = new System.IO.MemoryStream();</p><p>            pk.SaveAs(msOutput);</p><p>            DataUrl = "data:application/octet-stream;base64," + Convert.ToBase64String(msOutput.ToArray());</p><p>            CanDownload = true;</p><p>            StateHasChanged();</p><p>这是标准的.xlsx文件，可不是csv之类的简单内容输出，完全在浏览器上运行，没有发出任何后端请求。同样，只需在nuget上引入一个东西，然后使用就行了。这些东西通常来说，我们都只能在服务器上运行的，但通过Webassembly和blazor，我们把它们直接搬到浏览器里来了。非常令人兴奋的事情。不可否认，让JS来做这些事情当然也行，但远不如.NET来得舒服。</p><p>Blazor真的为前端打开了一个.NET世界的大门。只是，现在还只是刚开始，很多<a href="http://wzjk.iis7.net/" data-url="wzjk.iis7.net" class="show-5118-data" rel="nofollow" target="_blank">网站监控</a>人还没有意识到.NET能给我们带来的东西。加上前端JS的生态目前已经非常丰富，加上很多人对.NET技术一直带着歧视的眼光，Blazor要进入前端站稳脚跟，还要走很长的路。我相信，Blazor要火起来的话，就没JS什么事了。</p>