Blazor Barcode Community Project

What is Blazor?
Blazor is a WebAssembly based front-end web application framework created by Microsoft that uses .NET, C# and HTML for developing single page applications.

Blazor is currently still experimental and should not be used in production.

Create Barcodes in Blazor using Fonts
This Community Project provides Web Open Fonts Format (WOFF) barcode fonts, a .NET Standard/Core barcode library and Blazor source code to help front-end web developers generate industry compliant barcodes in Blazor. As a start, the Code 39, Code 39 Extended, Industrial 2 of 5 and POSTNET barcodes are supported.

Download Source Code

Supported Browsers

  • Microsoft Edge 42.17134.1.0 (or above)
  • Microsoft EdgeHTML 17.17134 (or above)
  • Microsoft Edge Mobile Browsers (42.0 or above)
  • Google Chrome 65.0.3325.181 (or above)
  • Android Chromium 64.0.3282.137 (or above)
  • Opera 54.0 (or above)
  • macOS Safari 11.1 (or above)
  • iOS Safari 11.3 (or above)
  • Mozilla Firefox Quantum 59.0.2 (or above)
Tutorial on creating a Code 39 barcode using fonts in Blazor
Prerequisites

  • Barcode Fonts - barcodefonts.zip
  • .NET Core 2.1 SDK (2.1.500 or later).
  • Visual Studio 2017 (15.9 or later with the ASP.NET and web development workload). Instead of Visual Studio, you can also use Visual Studio Code
  • The latest Blazor Language Services extension from the Visual Studio Marketplace.
1. Unzip barcodewebfonts.zip on your Desktop. You should see the Web Open Font Format barcode fonts "CCode39.woff", "CCodeIND2of5.woff" and "CCodePostnet.woff".

2. Create a new project by launching Visual Studio 2017 and select "File->New->Project" from the menu.

3. Select "Visual C#->.NET Core->ASP.NET Core Web Application". Enter "BarcodeWebApplication" as the project Name and click on the OK button.

4. Next, select the "Blazor" Template and click on the "OK" button. A standalone Blazor application that runs on WebAssembly will be generated.

5. Next, we will add a .NET barcode library to generate the barcodes. The library will also be used to generate the necessary start/stop and check characters to ensure that the barcode complies with the industry specifications. Right click on "Dependencies" in Visual Studio Solution Explorer and select "Manage NuGet Packages...". Click on the "Browse" tab and search for "NETStandardBarcode". Select "NETStandardBarcode by ConnectCode" and click on the "Install" button.

6. Next, right click on "wwwroot" in "Visual Studio Solution Explorer" and select "Add->New->New Folder". Rename "NewFolder" to "fonts". Using Windows Explorer, copy the barcode fonts "CCode39.woff", "CCodeIND2of5.woff" and "CCodePostnet.woff" from Step 1 into the "fonts" folder. The "fonts" folder of the project is usually located under the following folder:

C:\Users\<username>\source\repos\BarcodeWebApplication\BarcodeWebWebApplication\wwwroot\fonts

7. We will need a Blazor Page to display the generated barcodes. Expand "Pages" in "Visual Studio Solution Explorer". Right click on "Counter.cshtml" and select "Copy". Right click on "Pages" again and select "Paste". Rename "Counter - Copy.cshtml" to "Barcode.cshtml".

8. Paste the following into "Barcode.cshtml".



@page "/barcode"
@using Net.ConnectCode.Barcode;

<h1>Code 39 Barcode</h1>

<p>Barcode</p>
<div id="barcode">@barcode</div>
<div id="barcode_text">@barcode_text</div>

<button class="btn btn-primary" onclick="@GenerateBarcode">Generate Barcode</button>		

@functions {

    string barcode = "";
    string barcode_text = "";
    void GenerateBarcode()
    {
        BarcodeFonts bcf = new BarcodeFonts();
        bcf.BarcodeType = BarcodeFonts.BarcodeEnum.Code39;		
        bcf.CheckDigit = BarcodeFonts.YesNoEnum.Yes;
        bcf.Data = "1234567";
        bcf.encode();
        barcode = bcf.EncodedData;
        barcode_text = bcf.HumanText;
    }
}



  • The "<div id="barcode">@barcode</div>" element is used to display the generated Code 39 barcode. It uses the Blazor syntax to bind with the C# "barcode" variable.
  • The "<div id="barcode_text">@barcode_text</div>" is used to display the huaman readable text that commonly appears below a barcode. It uses the Blazor syntax to bind with the C# "barcode_text" variable.
  • A HTML button is also defined in the page that calls the "GenerateBarcode" function when it is clicked on.
  • The "GenerateBarcode" function contains programming codes that use the "NETStandardBarcode" nuget library to generate a Code 39 barcode. The generated output is placed in the "barcode" and "barcode_text" variable.
9. In "wwwroot", click on "index.html". Paste the following to the bottom into the "" element.


    <STYLE TYPE="text/css" media="screen,print">
        @font-face {
            font-family: CCode39;
            src: url("/fonts/CCode39.woff") format('woff')		
        }

        #barcode {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            font-family: 'CCode39', sans-serif;
            text-align: center;
            font-size: 32px
        }

        #barcode_text {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            font-family: sans-serif;
            text-align:center;
            font-size: 24px
        }

    </STYLE>



The "@font-face" tag declares the use of the Code 39 barcode web font. "#barcode" will be used to apply the "CCode39" font to the generated output of the previous step.

10. Expand "Shared" in "Visual Studio Solution Explorer". Double click and add the following to "NavMenu.cshtml".


        <li class="nav-item px-3">
            <NavLink class="nav-link" href="barcode">
                <span class="oi oi-plus" aria-hidden="true"></span> Barcode		
            </NavLink>
        </li>



Make sure the above HTML codes appears right below the following:


        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
                <span class="oi oi-home" aria-hidden="true"></span> Home		
            </NavLink>
        </li>


When this link is clicked on, it will launch the "Barcode.cshtml" page we have created previously to display the barcode.

11. Finally, click on the "IIS Express" button to run the Blazor application. Click on the "Barcode" hyperlink on the Left Bar and you should see the following:






Besides generating a Code 39 barcode, a Code 39 Extended (ASCII), Industrial 2 of 5 and POSTNET barcode can also be easily created. Simply make changes to the "GenerateBarcode" function and the CSS Style in "index.html" as shown below:

Code 39 Extended Barcode

Sample .NET API


    void GenerateBarcode()
    {
        BarcodeFonts bcf = new BarcodeFonts();
        bcf.BarcodeType = BarcodeFonts.BarcodeEnum.Code39ASCII; 	
        bcf.CheckDigit = BarcodeFonts.YesNoEnum.Yes;
        bcf.Data = "1234567";
        bcf.encode();
        barcode = bcf.EncodedData;
        barcode_text = bcf.HumanText;
    }



CSS


    <STYLE TYPE="text/css" media="screen,print">
        @font-face {
            font-family: CCode39Extended;
            src: url("/fonts/CCode39.woff") format('woff')		
        }

        #barcode {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            font-family: 'CCode39Extended', sans-serif;
            text-align: center;
            font-size: 32px
        }

    </STYLE>



Industrial 2 of 5 Barcode

Sample .NET API


    void GenerateBarcode()
    {
        BarcodeFonts bcf = new BarcodeFonts();
	BarcodeFonts.BarcodeEnum.Industrial2of5;
        bcf.CheckDigit = BarcodeFonts.YesNoEnum.Yes;		
        bcf.Data = "1234567";
        bcf.encode();
        barcode = bcf.EncodedData;
        barcode_text = bcf.HumanText;
    }



CSS


    <STYLE TYPE="text/css" media="screen,print">
        @font-face {
            font-family: CCodeIND2of5;
            src: url("/fonts/CCodeIND2of5.woff") format('woff')			
        }

        #barcode {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            font-family: 'CCodeIND2of5', sans-serif;
            text-align: center;
            font-size: 32px
        }

    </STYLE>



POSTNET Barcode

Sample .NET API


    void GenerateBarcode()
    {
        BarcodeFonts bcf = new BarcodeFonts();		
	BarcodeFonts.BarcodeEnum.POSTNET;
        bcf.Data = "123456789";
        bcf.encode();
        barcode = bcf.EncodedData;
        barcode_text = bcf.HumanText;
    }



CSS


    <STYLE TYPE="text/css" media="screen,print">
        @font-face {
            font-family: POSTNET;
            src: url("/fonts/CCodePostnet.woff") format('woff')		
        }

        #barcode {
            font-weight: normal;
            font-style: normal;
            line-height: normal;
            font-family: 'CCodePostnet', sans-serif;
            text-align: center;
            font-size: 12px
        }

    </STYLE>