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

本文链接：https://blog.csdn.net/yushulx/article/details/108466939

本文介绍了如何利用Blazor WebAssembly和Dynamsoft JavaScript Barcode SDK创建一个条形码识别Web应用。通过C#与JavaScript的交互，实现在浏览器中执行.NET代码并识别图片中的条形码。详细步骤包括工程创建、页面设置、SDK集成及代码实现，最终展示了一个简洁的条形码读取功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">@result</p>
 
@code {
    private static String result &