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:
-
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:
-
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 15.1\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.
-
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}"
);
}
}
}
-
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" }
);
}
}
}
-
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);
}
}
}
-
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
-
Client side: Add Vintasoft JavaScript files to the project.
-
Copy Vintasoft.Shared.js and Vintasoft.Barcode.js files from "<InstallPath>\VintaSoft Barcode .NET 15.1\Bin\JavaScript\" folder into "Scripts" folder.
-
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>
-
Run the ASP.NET MVC5 application and see the result.