VintaSoft Barcode .NET SDK 15.0: 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:

      Configure the project to use .NET 8.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 v15.0\Bin\DotNet8\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.

    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 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:
        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 "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:
        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
      • 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
    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 v15.0\Bin\JavaScript\" folder into "wwwroot\Scripts\" folder.
    7. 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:
        @{
            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:
        <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:
        <img id="barcodeImage" src="" />
        
        
      • Add 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.