VintaSoft Barcode .NET SDK 12.5 for Web
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:
      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:
      Select the Empty template for ASP.NET Web Application and configure 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.Shared.dll, Vintasoft.Shared.Web.dll, Vintasoft.Barcode.Web.Services.dll and Vintasoft.Barcode.Web.Api2Controllers.dll assemblies from "<InstallPath>\VintaSoft Barcode .NET v12.5\Bin\DotNet4\AnyCPU\" folder in ASP.NET MVC5 application.

      Add references to the Vintasoft assemblies
    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
        'Add => Controller' context menu
      • Select "Web API 2 Controller - Empty" template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
        Web API 2 controller settings
      • Specify that MyVintasoftBarcodeApiController class is derived from Vintasoft.Barcode.Web.Api2Controllers.VintasoftBarcodeApi2Controller class
        C# source codes of MyVintasoftBarcodeApiController 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.
        C# source codes of WebApiConfig.cs file
        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
        'Add => Controller...' context menu
      • Select "MVC 5 Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
        ASP.NET MVC5 controller settings
      • Open "App_Start\RouteConfig.cs" file and check that ASP.NET MVC application correctly registers route for MVC controller.
        C# source codes of RouteConfig.cs file
        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.
      C# source codes of Global.asax.cs file
      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
        'Add view...' 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
        Web view settings
    7. Client side: Add Vintasoft JavaScript files to the project.

      • Copy jQuery (version 3 or higher) file into "Scripts" folder if "Scripts" folder does not contain jQuery file (jquery-3.X.1.min.js).
        You can use jquery-3.4.1.min.js file from "<InstallPath>\VintaSoft Barcode .NET v12.5\Examples\ASP.NET MVC\CSharp\AspNetMvcBarcodeDemo\Scripts\External\" folder or jQuery (version 3 or higher) file from any other source.

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

      • Open web view - file "Views\Default\Index.cshtml".
        Default web view
      • Add references to Vintasoft JavaScript files:
        References to Vintasoft JavaScript files
        Here is HTML code that adds references to jQuery and Vintasoft JavaScript files:
        <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
        <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>
        
        
    9. Run the ASP.NET MVC5 application and see the result.

      Barcode generation result in ASP.NET MVC5 application