Published March 15, 2023

Razor Barcode Reader (Code Example Tutorial)

This article demonstrates how to create a barcode reader using the IronBarcode C# library and the Dynamsoft JavaScript Barcode SDK. It provides step-by-step instructions for creating a web app that scans barcodes on the client-side using a UI. The article is intended for web developers familiar with Visual Studio and C#.

This article will cover how to create a Blazor project in Visual Studio and how to use IronBarcode to read barcodes from images.

A barcode reader, also known as a barcode scanner, is a device that can read and interpret the information encoded in barcodes. Barcodes are a common method of storing and sharing data (such as product information) in a visual format. Barcode readers can be found in various settings, including retail stores, warehouses, and manufacturing facilities.

IronBarcode is a C# library that enables developers to create barcode readers in their applications. The library supports a wide range of barcode formats, including QR codes and standard 1D barcodes. It can be integrated into various applications, including web apps developed using the Blazor WebAssembly framework and desktop apps created using Visual Studio.

How to Read Barcode in Razor

Install C# library to read barcode in Razor
Configure Razor web app and get it ready to read barcode
Change ReaderSettings properties of BarcodeReader class to archive robust reading
Utilize Read method to perform reading on the given barcode
Access the reading result value to apply further process

What is the IronBarcode C# Library?

IronBarcode is a C# library that enables developers to read barcodes from image files, streams, and live video streams. It is designed to be easy to use, providing a simple API for reading barcodes. Additionally, it can read a wide variety of barcode formats, including QR codes, UPC codes, and EAN codes.

To use IronBarcode in a C# project, the first step is to install the library. This can be done by using the NuGet Package Manager or by downloading the DLL files from the IronBarcode website. Once the library is installed, you can include the necessary namespace in your code and create an instance of the IronBarCodeReader class.

For example, the following code reads a barcode from an image file located at "C:\barcode.jpg":

IronBarCodeReader reader = new IronBarCodeReader();
var result = reader.Read("C:\barcode.jpg");

IronBarCodeReader reader = new IronBarCodeReader();
var result = reader.Read("C:\barcode.jpg");

Imports Microsoft.VisualBasic

Dim reader As New IronBarCodeReader()
Dim result = reader.Read("C:" & vbBack & "arcode.jpg")

VB C#

The Read method returns a BarcodeResult object that contains the data encoded in the barcode, along with other information about the barcode, such as its format and location within the image. The BarcodeData property of the BarcodeResult object contains the encoded data.

In web applications, developers can use IronBarcode on the server side to read barcode images and then pass the results to the client-side using JavaScript.

Benefits of Using the IronBarcode Library

The IronBarcode library is a barcode reading library that enables developers to create web apps that can read barcodes from image files, live video streams, and even directly from a disk drive. It can read multiple barcodes from a single image and can read both QR codes and traditional barcodes. One of the key features of the IronBarcode library is the Razor Barcode Reader, which is a web framework developed by Microsoft that enables developers to create web apps using the C# programming language and the Razor syntax.

IronBarcode also allows for JavaScript calls, which allow developers to use JavaScript variables and functions in their C# code. This enables developers to make UI changes and display barcode results on the homepage.

It is also important to note that IronBarcode enables developers to customize the font style and error handling of the barcode scanner.

The Reading Barcode Scanner

How to Create a Razor Barcode Reader Web App in C# Using the IronBarcode Library

To create a Razor Barcode Reader web app in C# using the IronBarcode library, you can follow these steps:

Once you have installed the IronBarcode library and added it to your project's dependencies in Visual Studio, create a new Blazor WebAssembly project in Visual Studio Code by selecting the "Blazor WebAssembly App" template in the "Create a new Project" window.
Install the IronBarcode library in your project by going to Tools > NuGet Package Manager > Package Manager Console, and entering the following command in the Console panel:
```
Install-Package BarCode
```
Installing the IronBarcode library using Visual Studio's NuGet Package Manager UI
You can also install IronBarcode using the .NET CLI with the command
```
dotnet add package IronBarcode
```
Alternatively, search for IronBarcode in the NuGet Package Manager UI:
Searching for the IronBarcode library in the Package Manager UI. It will most likely appear before all other libraries in the search results.
Once the package is installed, you will need to include the necessary namespace in your code. Add the following code to the top of your project's source file:
```
@using IronBarCode;
```
```
@using IronBarCode;
```
```
Dim IronBarCode As [using]
```
VB C#
In the Solution Explorer, add a new page to the project by right-clicking on the "Pages" folder and selecting "Add > Razor Page." Name the page "BarcodeScanner."
In the "BarcodeScanner.razor" file, add an input element to allow the user to select an image file to scan for barcodes. You can use the ChangeEventArgs to handle the file input event and call a function to scan the barcode.
```
<input type="file" @onchange="ScanBarcode" />
```
```
<input type="file" @onchange="ScanBarcode" />
```
XML

In the "BarcodeScanner.razor.cs" file, create a new function ScanBarcode that reads the selected file and uses the IronBarcode library to scan for barcodes.

private async Task ScanBarcode(ChangeEventArgs e) { 
    var file = e.Value as IFileList; 
    var filePath = file[0].Name; 
    var barcodeResults = BarcodeReader.QuicklyReadOneBarcode(filePath); 
    var barcodeText = barcodeResults.Text; 
}

private async Task ScanBarcode(ChangeEventArgs e) { 
    var file = e.Value as IFileList; 
    var filePath = file[0].Name; 
    var barcodeResults = BarcodeReader.QuicklyReadOneBarcode(filePath); 
    var barcodeText = barcodeResults.Text; 
}

Private Async Function ScanBarcode(ByVal e As ChangeEventArgs) As Task
	Dim file = TryCast(e.Value, IFileList)
	Dim filePath = file(0).Name
	Dim barcodeResults = BarcodeReader.QuicklyReadOneBarcode(filePath)
	Dim barcodeText = barcodeResults.Text
End Function

VB C#

In the ScanBarcode function, you can also add logic to handle error messages, customize the font style of the barcode text, and update a JavaScript variable to display the barcode text on the page.
Run the application by navigating to the project directory in a command prompt and running the dotnet run command.

Here is an example of how you can implement this in your code:

using IronBarcode; 
@page "/barcodescanner" 
<h1>Barcode Scanner</h1> 
<input type="file" @onchange="ScanBarcode" /> 
<p>Barcode Text: @barcodeText</p> 
@code { 
    private string barcodeText; 
    private async Task ScanBarcode(ChangeEventArgs e) { 
    var file = e.Value as IFileList; 
    var filePath = file[0].Name; 
    var barcodeResults = BarcodeReader.QuicklyReadOneBarcode(filePath); barcodeText = barcodeResults.Text; 
} 
}

using IronBarcode; 
@page "/barcodescanner" 
<h1>Barcode Scanner</h1> 
<input type="file" @onchange="ScanBarcode" /> 
<p>Barcode Text: @barcodeText</p> 
@code { 
    private string barcodeText; 
    private async Task ScanBarcode(ChangeEventArgs e) { 
    var file = e.Value as IFileList; 
    var filePath = file[0].Name; 
    var barcodeResults = BarcodeReader.QuicklyReadOneBarcode(filePath); barcodeText = barcodeResults.Text; 
} 
}

Imports IronBarcode
'INSTANT VB TODO TASK: The following line could not be converted:
page "/barcodescanner" (Of h1) Barcode Scanner</h1> <input type="file" onchange="ScanBarcode" /> (Of p) Barcode Text: barcodeText</p> code
If True Then
	private String barcodeText
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private async Task ScanBarcode(ChangeEventArgs e)
'	{
'	var file = TryCast(e.Value, IFileList);
'	var filePath = file[0].Name;
'	var barcodeResults = BarcodeReader.QuicklyReadOneBarcode(filePath);
'	barcodeText = barcodeResults.Text;
'}
End If

VB C#

Retrieving Barcode Data

Creating and Configuring the IronBarCodeReader Class

To create an instance of the IronBarCodeReader class, you can use the following code:

using IronBarCode; 
var reader = new BarcodeReader();

using IronBarCode; 
var reader = new BarcodeReader();

Imports IronBarCode
Private reader = New BarcodeReader()

VB C#

To configure the reader with the required settings, you can use the following properties and methods:

reader.ReaderSettings.SetBarCodeTypesToFind(BarCodeType.QR\_CODE): This method sets the types of barcodes to be searched for. In this example, it is set to only find QR codes.
reader.ReaderSettings.TryHarder = true: This property tells the reader to perform a more thorough scan of the image, which can help increase the chances of successfully reading a barcode.
reader.ReaderSettings.MaxNumberOfBarcodesToReadPerPage = 1: This property sets the maximum number of barcodes that can be read from a single image. In this example, it is set to only read one barcode.
reader.ReaderSettings.AllowMultipleReadsOnSingleBarcode = false: This property controls whether or not multiple reads can be performed on a single barcode. In this example, it is set to false, so only one read will be performed.
reader.ReaderSettings.AllowRotationCorrection = true: This property controls whether or not the reader should try to correct the image if it is rotated.
reader.ReaderSettings.AllowInverted = true: This property controls whether or not the reader should try to read inverted barcodes.
reader.ReaderSettings.AllowMicroQr = true: This property controls whether or not the reader should try to read Micro QR codes.

Reading a Barcode from an Image using the IronBarCodeReader Class in Razor Web Apps

To use the IronBarCodeReader class to read a barcode from an image in a Blazor WebAssembly project, you can follow these steps:

In the Pages folder of your project, create a new page where you want to display the barcode image and the read result.
On the new page, add a reference to the IronBarCode DLL files by adding the following line to the top of the file:
```
@using IronBarCode;
```
```
@using IronBarCode;
```
```
Dim IronBarCode As [using]
```
VB C#

In the OnInitialized method of the page, use the following code to read the barcode from the image file and display the result in the UI:

protected override void OnInitialized() { 
    var barcodeReader = new BarcodeReader(); 
    var barcodeResult = barcodeReader.Read("path/to/image.jpg"); 
    if (barcodeResult != null) {
        // Use the text variable to update the UI with the barcode result 
        var text = barcodeResult.Text; 
    } 
}

protected override void OnInitialized() { 
    var barcodeReader = new BarcodeReader(); 
    var barcodeResult = barcodeReader.Read("path/to/image.jpg"); 
    if (barcodeResult != null) {
        // Use the text variable to update the UI with the barcode result 
        var text = barcodeResult.Text; 
    } 
}

Protected Overrides Sub OnInitialized()
	Dim barcodeReader As New BarcodeReader()
	Dim barcodeResult = barcodeReader.Read("path/to/image.jpg")
	If barcodeResult IsNot Nothing Then
		' Use the text variable to update the UI with the barcode result 
		Dim text = barcodeResult.Text
	End If
End Sub

VB C#

The above code uses the Read method of the BarcodeReader class to read the barcode from the image file.
The result of calling QrCodeWriter.createQrCode using the aforementioned parameters
If the barcode is found, the Text property of the barcodeResult object will contain the barcode text.
You can use this text to display the barcode result in the UI.

Note that the above is a simple example and you may want to add additional error handling and UI changes to the code to fit your requirements.

You can also use the barcodeResult object to access the other properties such as the type of barcode found, the location, size and other details of the barcode in the image.

Once you have made the necessary changes, you can build and run your project by running the following command in the developer console:

dotnet run

This will run the project and open the homepage in the browser. You can test the barcode reading functionality by providing a valid image file path in the above code and seeing the results in the browser.

Generate QR Codes in different colors, in different file formats, and using different images the methods available in IronBarcode's QRCodeWriter class

Conclusion

IronBarcode is a flexible and efficient software library that supports a wide range of barcode formats, symbols, and characters. It is compatible with different operating systems and provides reliable licensing and support.

IronBarcode Licensing

IronBarcode offers a free edition for development use and a 30-day free trial for commercial use. With its various pricing tiers, developers can choose the solution that best fits their needs and budget.

For the price of two IronBarcode licenses, you can obtain the full suite of five Iron Software libraries.