VintaSoft Barcode .NET SDK 15.0: Documentation for Web developer
In This Topic
    Generate barcode image in ASP.NET MVC5 application
    In This Topic
    This tutorial shows how to create a blank ASP.NET MVC5 application in Visual Studio .NET 2019 and generate barcode image in ASP.NET MVC5 application.


    Here are steps, which must be done:
    1. Create a blank ASP.NET MVC5 application.

      Open Visual Studio .NET 2019 and create a new project, of ASP.NET Web application type, and configure the project to use .NET Framework 4.7.2:

      Select the "Empty" template for ASP.NET Web application and configure the project to use Web API:

    2. Server side: Add references to the Vintasoft assemblies to ASP.NET MVC5 application.

      Add references to the Vintasoft.Barcode.dll, Vintasoft.Barcode.Gdi.dll, Vintasoft.Shared.dll, Vintasoft.Shared.Web.dll, Vintasoft.Barcode.Web.Services.dll and Vintasoft.Barcode.Web.Api2Controllers.dll assemblies from "<InstallPath>\VintaSoft Barcode .NET v15.0\Bin\DotNet4\AnyCPU\" folder in ASP.NET MVC5 application.
      Comment: Reference to Vintasoft.Barcode.Gdi.dll assembly is necessary only if SDK should draw text value of barcode on barcode image. Instead of Vintasoft.Barcode.Gdi.dll assembly can be used Vintasoft.Barcode.ImageSharp.dll or Vintasoft.Barcode.SkiaSharp.dll assembly.

    3. Server side: Add Web API 2 controller, which allows to generate barcode, to ASP.NET MVC5 application.

      • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
      • Select "Web API 2 Controller - Empty" template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
      • Specify that MyVintasoftBarcodeApiController class is derived from Vintasoft.Barcode.Web.Api2Controllers.VintasoftBarcodeApi2Controller class

        Here are C# source codes of MyVintasoftBarcodeApiController class:
        using Vintasoft.Barcode.Web.Api2Controllers;
        
        namespace WebApplication1.Controllers
        {
            public class MyVintasoftBarcodeApiController : VintasoftBarcodeApi2Controller
            {
            }
        }
        
        
      • Open "App_Start\WebApiConfig.cs" file and check that ASP.NET MVC application correctly registers route for Web API controller.

        Here are C# source codes of WebApiConfig.cs file:
        using System.Web.Http;
        
        namespace WebApplication1
        {
            public static class WebApiConfig
            {
                public static void Register(HttpConfiguration config)
                {
                    config.Routes.MapHttpRoute(
                        name: "DemoAPI",
                        routeTemplate: "vintasoft/api/{controller}/{action}"
                    );
                }
            }
        }
        
        
    4. Server side: Create ASP.NET MVC 5 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 5 Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
      • Open "App_Start\RouteConfig.cs" file and check that ASP.NET MVC application correctly registers route for MVC controller.

        Here are C# source codes of RouteConfig.cs file:
        using System.Web.Mvc;
        using System.Web.Routing;
        
        namespace WebApplication1
        {
            public class RouteConfig
            {
                public static void RegisterRoutes(RouteCollection routes)
                {
                    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        
                    routes.MapRoute(
                        name: "Default",
                        url: "{controller}/{action}",
                        defaults: new { controller = "Default", action = "Index" }
                    );
        
                }
            }
        }
        
        
        
    5. Server side: Check global configuration of ASP.NET MVC5 application.

      Open "Global.asax.cs" file and check that "Application_Start" method registers all areas in ASP.NET MVC application, configures global HTTP configuration for ASP.NET application, registers routes for ASP.NET MVC application.

      Here are C# source codes of Global.asax.cs file:
      using System.Web.Http;
      using System.Web.Mvc;
      using System.Web.Routing;
      
      namespace WebApplication1
      {
          public class WebApiApplication : System.Web.HttpApplication
          {
              protected void Application_Start()
              {
                  AreaRegistration.RegisterAllAreas();
                  GlobalConfiguration.Configure(WebApiConfig.Register);
                  RouteConfig.RegisterRoutes(RouteTable.Routes);
              }
          }
      }
      
      
    6. Client side: Create web view for displaying generated barcode.

      • Open "DefaultController.cs" file, press the right mouse button on the "Index" method of DefaultController class and select the "Add View..." menu from context menu
      • Set view name to "Index", uncheck "Use a layout page" checkbox and press the "Add" button => "Views\Default\Index.cshtml" file will be created
    7. Client side: Add Vintasoft JavaScript files to the project.

      • Copy Vintasoft.Shared.js and Vintasoft.Barcode.js files from "<InstallPath>\VintaSoft Barcode .NET v15.0\Bin\JavaScript\" folder into "Scripts" folder.
    8. Client side: Add JavaScript code, which generates and displays barcode image, to the web view.

      • Open web view - file "Views\Default\Index.cshtml".
      • 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>
        
        
    9. Run the ASP.NET MVC5 application and see the result.