Search results

Getting started with Blazor Barcode component

This section briefly explains about how to include a BarcodeGenerator in your Blazor Server-Side application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  1. Install the Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager. Please ensure to check the Include prerelease option for our Beta release.
  2. You can add the client-side resources through CDN or from Nuget package in the HEAD element of the ~/Pages/_Host.cshtml page.
<head>
    <environment include="Development">
        <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
        <!---CDN--->
        <!-- <link href="https://cdn.syncfusion.com/blazor/18.1.55/bootstrap4.css" rel="stylesheet" /> -->
    </environment>
</head>

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

<head>
    <environment include="Development">
        <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
        <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
    </environment>
</head>

Adding component package to the application

Open ~/_Imports.Blazor file and import the Syncfusion.Blazor.BarcodeGenerator packages.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.BarcodeGenerator

Add SyncfusionBlazor service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

@using Syncfusion.Blazor;

namespace BlazorApplication
{
    public class Startup
    {
        ....
        ....
        public void ConfigureServices(IServiceCollection services)
        {
            ....
            ....
            services.AddSyncfusionBlazor();
        }
    }
}

Note: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.

<head>
    <environment include="Development">
       <script src="https://cdn.syncfusion.com/blazor/18.1.55/syncfusion-blazor.min.js"></script>
   </environment>
</head>

Adding BarcodeGenerator component to the Application

BarcodeGenerator component can be rendered by using the SfBarcodeGenerator tag helper in ASP.NET Core Blazor application. Add the BarcodeGenerator component in any web page Blazor in the Pages folder. For example, the BarcodeGenerator component is added in the ~/Pages/Index.Blazor page.

The following example shows a basic BarcodeGenerator component.

<SfBarcodeGenerator Width="200px" Height="150px" Mode="@RenderingMode.SVG" Type="@BarcodeType.Codabar" Value="123456789"></SfBarcodeGenerator>

Barcode Generator

Running the above code will display the barcode generator component on the browser.

Adding QR Generator control

You can add the QR code in our barcode generator component.

<SfQRCodeGenerator Width="200px" Height="150px"  Value="Syncfusion"></SfQRCodeGenerator>

QR Code Generator

Adding Datamatrix Generator control

You can add the datamatrix code in our barcode generator component.

 <SfDataMatrixGenerator Width="200" Height="150" Mode="@RenderingMode.SVG" Value="SYNCFUSION"></SfDataMatrixGenerator>

Data Matrix Generator

See Also