VintaSoft Barcode .NET SDK 14.1: Documentation for Web developer
In This Topic
    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:
    1. 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:
      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:
      Configure the project to use .NET 6.0
    2. 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.

      Add references to the Vintasoft assemblies
    3. 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 'Add => Controller' context menu for 'Controllers' folder
      • Select Empty API controller template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
        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
        Source codes of Barcode API controller
        Here are source codes of MyVintasoftBarcodeApiController class:
        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)
                {
                }
        
            }
        }
        
        
    4. 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 'Add => Controller' context menu for 'Controllers' folder
      • Select "MVC Controller - Empty" template, set the controller name to the "HomeController" and press the "Add" button
        ASP.NET Core controller settings
      • Open "Program.cs" file, add controllers with views to the services of ASP.NET Core application:
        Controllers in Program.cs file
        Add created MVC controller to the endpoints of ASP.NET Core application:
        Endpoints in Program.cs file
        Here are C# source codes of Startup.cs file:
        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();
        
    5. 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
        'Add view...' 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
        Web view settings
    6. 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.
        Add references to Vintasoft JavaScript files
    7. Client side: Add JavaScript code, which generates and displays barcode image, to the web view.

      • Open web view - file "Views\Home\Index.cshtml".
        Default web view
      • Add base code:
        Index base code
        Here is base HTML code:
        @{
            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:
        References to Vintasoft JavaScript files
        Here is HTML code that adds references to Vintasoft JavaScript files:
        <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:
        HTML markup (an image element that will display generated barcode image)
        Here is HTML markup code:
        <img id="barcodeImage" src="" />
        
        
      • Add JavaScript code that generates and displays barcode image:
        JavaScript code that generates and displays barcode image
        Here is JavaScript code that generates and displays barcode image:
        <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.
    8. Run the ASP.NET Core application and see the result.

      Barcode generation result in ASP.NET Core application