In this article I will explain with an example, how to dynamically generate and display Barcode Image in ASP.Net MVC Razor.
The Barcode Image will be dynamically generated using .Net Graphics API and Barcode Font in ASP.Net MVC Razor.
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 MVC: Dynamically generate and display Barcode Image]()
3. After installation is completed, restart your machine.
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 ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult 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 which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – 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.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<input type="text" name="barcode"/>
<input type="submit" value="Generate Barcode"/>
}
<hr/>
@if (ViewBag.BarcodeImage != null)
{
<img src="@ViewBag.BarcodeImage" alt=""/>
}
</body>
</html>
Screenshot
![ASP.Net MVC: Dynamically generate and display Barcode Image]()
Downloads
