Blazor框架爲前端打開的.NET世界大門

最近在研究Blazor框架，作了些Demo，感受到了它強大之處，真的不弱於任何JS框架。

首先C#的語言特性，相比JS不知高出多少，而JS要大一點的項目，必然少不了webpack之類的工具，看着都頭痛，實在不想接觸。說實話，webpack之類的工具應該是JS語言自身的缺點才產生這樣的工具，其餘的任何一個語言，須要這種打包工具嗎？

用Blazor框架，必須用webassembly纔有意義，而Blazor Server是依賴 SignalR與服務端進行通訊，邏輯腳本仍是運行於服務端，並更新DOM。經過webassembly，Blazor能夠把整個.NET都帶到了瀏覽器上。

先看一個實例，圖片上傳前處理，不借助後端，直接在瀏覽器上處理，實例經過nuget引用了SixLabors.ImageSharp圖像處理工具，.NET版本爲5.0，若是是3.0則沒有<InputFile>組件，經過這個組件咱們能夠處理本地文件。

@page "/UseFile"
@using SixLabors.ImageSharp
@using SixLabors.ImageSharp.Processing
<label class="ant-btn ant-btn-default"><InputFile style="display:none;" OnChange="FileChange"></InputFile>打開圖片</label>
<div>
    @if (ImageLoaded)
    {
        <img src="@ImgDataUrl" />
    }
    <br /> @Message
</div>
@code {
    private bool ImageLoaded { get; set; }
    public string Message { get; set; }
    public string ImgDataUrl { get; set; }
    public async Task FileChange(InputFileChangeEventArgs evn)
    {
        try
        {
            //加載圖片內容
            var sFile = evn.File.OpenReadStream(1024 * 1024 * 5); //5M限制
            var msInput = new System.IO.MemoryStream();
            await sFile.CopyToAsync(msInput);

            var img = SixLabors.ImageSharp.Image.Load(msInput.ToArray());
            img.Mutate((p) => { p.Resize(200, 200); }); //調整大小
            var fmt = SixLabors.ImageSharp.Formats.Jpeg.JpegFormat.Instance;
            ImgDataUrl = img.ToBase64String(fmt); //data:application/octet-stream;base64, ....
            ImageLoaded = true;
            Message = "圖片已處理";
            StateHasChanged();
        }
        catch (Exception err)
        {
            this.Message = err.Message;
        }
    }
}

運行結果：

如今咱們真的徹底的，僅在瀏覽器上處理了圖像，不發送任何請求到後端。咱們看到，實現這一過程，咱們須要從nuget上引入SixLabors.ImageSharp並使用它就好了。nuget上還有多少東西能夠用，不用我說了吧。

第二個例子，Excel導出，一樣在nuget上引用Epplus：

@page "/exportdata"
<h3>導出Excel</h3>
請輸入內容：<AntDesign.Input @bind-Value="@Content" style="width:200px;"></AntDesign.Input>
<AntDesign.Button OnClick="ExportToExcel">導出Excel</AntDesign.Button>
<br/>
@if (CanDownload)
{
    <a download="導出結果.xlsx" href="@DataUrl">下載結果</a>
}
@code {
    public string Content { get; set; }

    private bool CanDownload { get; set; } = false;
    private string DataUrl { get; set; }

    public void ExportToExcel()
    {
        using (var pk = new OfficeOpenXml.ExcelPackage())
        {
            var sheet = pk.Workbook.Worksheets.Add("Data");
            sheet.SetValue("A1", Content);
            var msOutput = new System.IO.MemoryStream();
            pk.SaveAs(msOutput);
            DataUrl = "data:application/octet-stream;base64," + Convert.ToBase64String(msOutput.ToArray());
            CanDownload = true;
            StateHasChanged();
        }
    }
}

運行結果：

這是標準的.xlsx文件，可不是csv之類的簡單內容輸出，徹底在瀏覽器上運行，沒有發出任何後端請求。一樣，只需在nuget上引入一個東西，而後使用就好了。這些東西一般來講，咱們都只能在服務器上運行的，但經過Webassembly和blazor，咱們把它們直接搬到瀏覽器裏來了。很是使人興奮的事情。不能否認，讓JS來作這些事情固然也行，但遠不如.NET來得舒服。

Blazor真的爲前端打開了一個.NET世界的大門。只是，如今還只是剛開始，不少人尚未意識到.NET能給咱們帶來的東西。加上前端JS的生態目前已經很是豐富，加上不少人對.NET技術一直帶着歧視的眼光，Blazor要進入前端站穩腳跟，還要走很長的路。我相信，Blazor要火起來的話，就沒JS什麼事了。