In this article I will explain with an example, how to dynamically create and display
Barcode Image in
ASP.Net Core (.Net Core 10).
The
Barcode Image will be dynamically generated using
.Net Graphics API and
Barcode Font in
ASP.Net Core (.Net Core 10).
Note: The
IDAutomationHC39M Free Version Barcode Font is provided by
IDAutomation and they are the creators and owners of the Font and its license.
Software Information
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 10.0.5
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.
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
Controller
The Controller consists of following 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
{
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
HTML Markup
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.
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
Testing Log
Compiled in: Visual Studio 2026
Framework: .Net Core 10.
Result: 100% Success
Downloads