Generate barcode image in ASP.NET Core application

In This Topic

This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2022 and generate barcode image in ASP.NET Core application.

Here are steps, which must be done:

Create a blank ASP.NET Core Web application.
Open Visual Studio .NET 2022 and create a new project, of ASP.NET Core Web application type:

Configure the project to use .NET 6.0:
Server side: Add references to the Vintasoft assemblies to ASP.NET Core Web application.
Add references to the Vintasoft.Barcode.dll, Vintasoft.Barcode.SkiaSharp.dll, Vintasoft.Shared.dll, Vintasoft.Shared.Web.dll, Vintasoft.Barcode.Web.Services.dll and Vintasoft.Barcode.AspNetCore.ApiControllers.dll assemblies from "<InstallPath>\VintaSoft Barcode .NET v14.1\Bin\DotNet6\AnyCPU\" folder in ASP.NET Core Web application.
Comment: Reference to Vintasoft.Barcode.SkiaSharp.dll assembly is necessary only if SDK should draw text value of barcode on barcode image. Vintasoft.Barcode.ImageSharp.dll can be used instead of Vintasoft.Barcode.SkiaSharp.dll assembly.
Server side: Add Web API controller that allows to generate barcode image.
- Add the "Controllers" folder to the project.
- Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
- Select Empty API controller template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
- Specify that MyVintasoftBarcodeApiController class is derived from Vintasoft.Barcode.AspNetCore.ApiControllers.VintasoftBarcodeApiController class
  
  Here are source codes of MyVintasoftBarcodeApiController class:
  - C#
  using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Mvc; using Vintasoft.Barcode.AspNetCore.ApiControllers; namespace WebApplication1.Controllers { public class MyVintasoftBarcodeApiController : VintasoftBarcodeApiController { public MyVintasoftBarcodeApiController(IWebHostEnvironment hostingEnvironment) : base(hostingEnvironment) { } } }
Server side: Create MVC controller for web view that will display generated barcode.
- Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
- Select "MVC Controller - Empty" template, set the controller name to the "HomeController" and press the "Add" button
- Open "Program.cs" file, add controllers with views to the services of ASP.NET Core application:
  
  Add created MVC controller to the endpoints of ASP.NET Core application:
  
  Here are C# source codes of Startup.cs file:
  - C#
  var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); builder.Services.AddControllersWithViews(); var app = builder.Build(); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}"); }); app.MapRazorPages(); app.Run();
Client side: Create web view for displaying generated barcode.
- Open "HomeController.cs" file, press the right mouse button on the "Index" method of HomeController class and select the "Add View..." menu from context menu
- Select "Razor View - Empty" template, press the "Add" button, Set view name to "Index" and press the "Add" button => "Views\Home\Index.cshtml" file will be created
Client side: Add Vintasoft JavaScript files to the project.
- Add the "wwwroot\Scripts\" folder to ASP.NET Core application.
- Copy Vintasoft.Shared.js and Vintasoft.Barcode.js files from "<InstallPath>\VintaSoft Barcode .NET v14.1\Bin\JavaScript\" folder into "wwwroot\Scripts\" folder.

Client side: Add JavaScript code, which generates and displays barcode image, to the web view.

Open web view - file "Views\Home\Index.cshtml".

Add base code:

Here is base HTML code:

HTML

@{
    Layout = null;
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ASP.NET Core Barcode Generator Demo</title>

</head>
<body>

</body>
</html>

Add references to Vintasoft JavaScript files:

Here is HTML code that adds references to Vintasoft JavaScript files:

HTML

<script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/Scripts/Vintasoft.Barcode.js" type="text/javascript"></script>

Add HTML markup (an image element that will display generated barcode image) to the web view:

Here is HTML markup code:
- HTML
```
<img id="barcodeImage" src="" />
```

Add JavaScript code that generates and displays barcode image:

Here is JavaScript code that generates and displays barcode image:

JavaScript

<script type="text/javascript">
    /**
     * Generates 1D barcode image.
     */
    function generate1dBarcodeImage(barcodeType, barcodeValue) {
        // create service that allows to generate barcode
        var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftBarcodeApi");

        // create the barcode writer
        var barcodeWriter = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

        // create the barcode writer settings for generating 1D barcode
        var barcodeWriterSettings = new Vintasoft.Barcode.Web1DBarcodeWriterSettingsJS();
        // specify that barcode writer must generate QR barcode image
        barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.Web1DBarcodeTypeEnumJS(barcodeType));
        // specify the Code128 barcode value
        barcodeWriterSettings.set_Value(barcodeValue);

        // specify settings for barcode writer
        barcodeWriter.set_Settings(barcodeWriterSettings);

        // send an asynchronous request for getting barcode image as Base64 string
        barcodeWriter.getBarcodeAsBase64Image(__writeBarcode_success, __writeBarcode_failed);
    }

    /**
     * Generates 2D barcode image.
     */
    function generate2dBarcodeImage(barcodeType, barcodeValue) {
        // create web service that allows to generate barcode
        var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("/vintasoft/api/MyVintasoftBarcodeApi");

        // create the barcode writer
        var barcodeWriter = new Vintasoft.Barcode.WebBarcodeWriterJS(barcodeService);

        // create the barcode writer settings for generating 2D barcode
        var barcodeWriterSettings = new Vintasoft.Barcode.Web2DBarcodeWriterSettingsJS();
        // specify that barcode writer must generate QR barcode image
        barcodeWriterSettings.set_BarcodeType(new Vintasoft.Barcode.Web2DBarcodeTypeEnumJS(barcodeType));
        // specify the QR barcode value
        barcodeWriterSettings.set_Value(barcodeValue);

        // specify settings for barcode writer
        barcodeWriter.set_Settings(barcodeWriterSettings);

        // send an asynchronous request for getting barcode image as Base64 string
        barcodeWriter.getBarcodeAsBase64Image(__writeBarcode_success, __writeBarcode_failed);
    }

    /**
     * Barcode is generated successfully.
     */
    function __writeBarcode_success(data) {
        if (data.success) {
            var barcodeImage = data.barcodeImage;
            document.getElementById("barcodeImage").src = barcodeImage;
        }
        else {
            alert(data.errorMessage);
        }
    }

    /**
     * Barcode generation is failed.
     */
    function __writeBarcode_failed(data) {
        // show information about error
        alert(data.errorMessage);
    }


    // set the session identifier
    Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
    // generate image of QR barcode with value "12345"
    generate2dBarcodeImage("QR", "12345");
</script>

Delete "Pages" folder.

Run the ASP.NET Core application and see the result.

Send Feedback

Create a blank ASP.NET Core Web application.

Server side: Add references to the Vintasoft assemblies to ASP.NET Core Web application.

Server side: Add Web API controller that allows to generate barcode image.

Server side: Create MVC controller for web view that will display generated barcode.

Client side: Create web view for displaying generated barcode.

Client side: Add Vintasoft JavaScript files to the project.

Client side: Add JavaScript code, which generates and displays barcode image, to the web view.

Run the ASP.NET Core application and see the result.