In this artical we will learn how to generate & read Barcode in ASP.NET MVC.
First, we have to download Barcode Font to generate & read barcode.
Create a new project in Visual Sutdio for Barcode read & generate in MVC
- Right click on project in solution explorer and click. Manage nuget Packages. After that install below ZXing.Net packages to your project,
Now, let’s create a new controller in your controller’s folder, right-click on your controller’s folder , select “Add”->”Controller”->”MVC 5 Empty controller”-> Provide name
“Barcode” and click “OK”
Add controller with following methods for generate & read barcode,
using System; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Web.Mvc; using System.Web; using ZXing; namespace BarCodeGenerateRead.Controllers { public class BarcodeController : Controller { // GET: Barcode [HttpGet] public ActionResult Barcodegenerate() { return View(); } [HttpPost] public ActionResult Barcodegenerate(string barcode) { Image img = null; using (var ms = new MemoryStream()) { var writer = new BarcodeWriter() { Format = BarcodeFormat.CODE_128 }; writer.Options.Height = 80; writer.Options.Width = 280; writer.Options.PureBarcode = true; img = writer.Write(barcode); img.Save(ms, ImageFormat.Png); ViewBag.BarcodeImage = "data:image/Png;base64," + Convert.ToBase64String(ms.ToArray()); } return View(); } [HttpGet] public ActionResult BarCodeRead() { return View(); } [HttpPost] public ActionResult BarCodeRead(HttpPostedFileBase barCodeUpload) { IBarcodeReader reader = new BarcodeReader(); string strImage = string.Empty; String localSavePath = "~/UploadFiles/"; String fileName = barCodeUpload.FileName; localSavePath += fileName; barCodeUpload.SaveAs(Server.MapPath(localSavePath)); using (Bitmap oldBmp = new Bitmap(barCodeUpload.InputStream)) using (Bitmap newBmp = new Bitmap(oldBmp)) using (Bitmap targetBmp = newBmp.Clone(new Rectangle(0, 0, newBmp.Width, newBmp.Height), PixelFormat.Format32bppArgb)) { var barcodeBitmap = (targetBmp); var result = reader.Decode(barcodeBitmap); if (result != null) { ViewBag.BarCode = result.Text; } } return View(); } } }
Here,controller consist two Action method
Barcodegenerate Action method have parameter that get value from textbox to generate barcode.
Add the view Barcodegenerate.cshtml to get value from user as following.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> @using (Html.BeginForm("Barcodegenerate", "Barcode", FormMethod.Post)) { <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <h2>Generate Bar Code</h2> <input type="text" name="barcode" Class="form-control col-4" ID="textCode" /> <br /><br /> <input type="submit" Class="btn btn-primary" ID="btnGenerate" value="Generate" /> <hr /> @if (ViewBag.BarcodeImage != null) { <img src="@ViewBag.BarcodeImage" alt="" width="450" height="80" /> } </div> </div> } </body> </html>
For BarCodeRead Action method add following view as BarCodeRead.cshtml.
@using (Html.BeginForm("BarCodeRead", "Barcode", FormMethod.Post, new { @enctype = "multipart/form-data" })) { <div class="row"> <div class="col-md-3"></div> <div class="col-md-3"> <div align="center"> <br /> <input type="file" name="barCodeUpload" Class="form-control" ID="barCodeUpload" /><br /> <br /> <input type="submit" Class="btn btn-primary" ID="UploadButton" value="Upload"> <br /><br /> <span>@ViewBag.ErrorMessage</span> <span id="BarCodetext">@ViewBag.BarCode</span> </div> </div> </div> }
OUTPUT: