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

Blazor是微软开发的Web框架,目的是让开发者使用C#和HTML来开发Web应用。然而,JavaScript必不可少。所以微软也提供了C#和JavaScript互相调用的方法。这篇文章分享下如何用Blazor WebAssemblyDynamsoft 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 = "No Barcode Fou
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值