Blazor条形码识别应用：在Web中运行C#和JavaScript代码

Blazor是微软开发的Web框架，目的是让开发者使用C#和HTML来开发Web应用。然而，JavaScript必不可少。所以微软也提供了C#和JavaScript互相调用的方法。这篇文章分享下如何用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK来创建一个简单的Web应用，用于识别图片中的条形码。

关于Blazor

Blazor提供了两个模板：Blazor WebAssembly和Blazor Server。

Blazor WebAssembly

Blazor Server

Blazor Server的实现方式是把客户端的逻辑放到server端来执行，然后通过WebSocket推送给客户端。要编写前端代码，使用Blazor WebAssembly会更加直观方便。

在Blazor工程中集成JavaScript条形码SDK

首先使用 Blazor WebAssembly模板来创建一个工程：

dotnet new blazorwasm -o BlazorBarcodeSample

在工程中增加一个页面：

cd BlazorBarcodeSample
dotnet new razorcomponent -n BarcodeReader -o Pages

把生成的BarcodeReader页面添加到首页中：

@page "/"
 
<h1>Hello, world!</h1>
 
Welcome to your new app.
 
<SurveyPrompt Title="How is Blazor working for you?" />
<BarcodeReader />

现在可以运行看下效果：

dotnet run

在初次运行的时候，可以打开开发者控制台观察下加载的资源。

我们会发现加载了一个dotnet.wasm文件和一些dll文件。因为有了浏览器中的.NET运行环境，浏览器就可以执行C#代码。

接下来对页面做一点修改。
Index.razor:

@page "/"
 
<h1>Blazor Barcode Sample</h1>
 
<BarcodeReader />

BarcodeReader.razor:

@page "/barcodereader"
 
<button class="btn btn-primary" >Read Barcodes from Files</button>
<p style="color:green;font-style:italic"