In this article I will explain with an example, how to dynamically generate and display Barcode Image in ASP.Net Core MVC.
The Barcode Image will be dynamically generated using .Net Graphics API and Barcode Font in ASP.Net Core MVC.
Note: The IDAutomationHC39M Free Version Barcode Font is provided by IDAutomation and they are the creators and owners of the Font and its license.
Downloading and installing Barcode Font
First you will need to download the Free Barcode Font from the following link.
Once downloaded follow the following steps.
1. Extract the Font from the ZIP file.
2. Double Click, Open the File and then click the Install Button as shown below.
3. After installation is completed, restart your machine.
Downloading System.Drawing.Common library
You will need to install the System.Drawing.Common package using the following command.
Install-Package System.Drawing.Common -Version 4.7.0
Note: The System.Drawing.Common package is necessary to use the System.Drawing class as it is not available in .Net Core.
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
Inside this Action method, the value of the Barcode entered in the TextBox is captured as parameter.
First the length of the Barcode text is determined and a Bitmap Image is drawn. Then a White rectangle is drawn over the Bitmap Image using White Brush and the Barcode is drawn using Black Brush.
Finally the image is saved to MemoryStream and then converted to Base64 string.
The Base64 string is set into a ViewBag object.
public class HomeController : Controller
{
// GET: Home
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(string barcode)
{
using (MemoryStream ms = new MemoryStream())
{
//The Image is drawn based on length of Barcode text.
using (Bitmap bitMap = new Bitmap(barcode.Length * 40, 80))
{
//The Graphics library object is generated for the Image.
using (Graphics graphics = Graphics.FromImage(bitMap))
{
//The installed Barcode font.
Font oFont = new Font("IDAutomationHC39M Free Version", 16);
PointF point = new PointF(2f, 2f);
//White Brush is used to fill the Image with white color.
SolidBrush whiteBrush = new SolidBrush(Color.White);
graphics.FillRectangle(whiteBrush, 0, 0, bitMap.Width, bitMap.Height);
//Black Brush is used to draw the Barcode over the Image.
SolidBrush blackBrush = new SolidBrush(Color.Black);
graphics.DrawString("*" + barcode + "*", oFont, blackBrush, point);
}
//The Bitmap is saved to Memory Stream.
bitMap.Save(ms, ImageFormat.Png);
//The Image is finally converted to Base64 string.
ViewBag.BarcodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
}
}
return View();
}
}
View
The View consists of an HTML Form with following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View consists of an HTML TextBox, a Submit Button and an Image element.
When the Submit Button is clicked, the Form is submitted and the generated Barcode Image is displayed in HTML Image element using ViewBag object.
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<form asp-action="Index" asp-controller="Home" >
<input type="text" name="barcode"/>
<input type="submit" value="Generate Barcode"/>
</form>
<hr/>
@if (ViewBag.BarcodeImage != null)
{
<img src="@ViewBag.BarcodeImage" alt=""/>
}
</body>
</html>
Screenshot
Downloads