In this article I will explain with an example, how to dynamically generate and display Barcode Image in ASP.Net Core Razor Pages.
The Barcode Image will be dynamically generated using .Net Graphics API and Barcode Font in ASP.Net Core Razor Pages.
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.
![ASP.Net Core Razor Pages: Dynamically generate and display Barcode Image]()
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.
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
Razor PageModel (Code-Behind)
The PageModel consists of the following two Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Handler method for handling Barcode generate operation
This Handler method gets called, when Generate Barcode Button is clicked.
Inside this, 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 Bitmap image is saved to MemoryStream and then converted to Base64 string and the Base64 string is set into the public property BarcodeImage.
public class IndexModel : PageModel
{
public string BarcodeImage { get; set; }
public void OnGet()
{
}
public void OnPostGenerate(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.
this.BarcodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
}
}
}
}
Razor page (HTML)
The HTML of Razor Page consists of an HTML Form consisting of an HTML Input element and a Submit Button.
The Generate Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostGenerate, but here it will be specified as Generate when calling from the Razor HTML Page.
Form Submit
When the Generate Button is clicked, the generated Barcode Image is displayed in HTML Image element.
@page
@model Barcode_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form method="post">
<input type="text" name="barcode" />
<input type="submit" value="Generate Barcode" asp-page-handler="Generate" />
</form>
@if (Model.BarcodeImage != null)
{
<img src="@Model.BarcodeImage" alt="" />
}
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Dynamically generate and display Barcode Image]()
Demo
Downloads
