In my previous article Generate and Display QR Code Image Using ASP.Net MVC, I explained that how to generate the QR Code. In this article, I will explain that how to read QR codes. To read QR Codes, I’m using .NET Barcode Reader Component.
So the first step you need to perform is to Install .NET QR Code Barcode Reader & Scanner. Add BarcodeLib.BarcodeReader.dll to your project.
Controller Code
using BarcodeLib.BarcodeReader;
using OnBarcode.Barcode.BarcodeScanner;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
namespace GenerateQRCode.Controllers
{
public class ReadQRCodeController : Controller
{
// GET: ReadQRCode
public ActionResult Index()
{
return View();
}
[HttpPost]
public string ReadQRCode()
{
if (Request.Files.Count > 0)
{
try
{
HttpFileCollectionBase files = Request.Files;
HttpPostedFileBase file = files[0];
string fname = Server.MapPath("~/QRCodes/" + file.FileName);
file.SaveAs(fname);
string[] results = BarcodeReader.read(fname, BarcodeReader.QRCODE);
return results[0];
}
catch (Exception ex)
{
return "";
}
}
else
{
return "";
}
}
}
}
In the above code, the Index method simply returns the view. The ReadQRCode method return decoded QR code string.
View
@{
ViewBag.Title = "Index";
}
<h2>Read QR Code</h2>
<br /><br /><br />
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>upload QR Code Image</label>
<input id="QRImage" type="file" required class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<button class="btn btn-primary" id="ReadQR">Read</button>
</div>
</div>
<br /><br /><br />
<div class="row">
<div class="col-lg-4">
<span id="QRtext" class="d-none" />
</div>
</div>
Script Section
<script>
$('#ReadQR').click(function () {
debugger
var fileUpload = $("#QRImage").get(0);
if (fileUpload.files.length > 0) {
var fileData = new FormData();
fileData.append(fileUpload.files[0].name,fileUpload.files[0]);
$.ajax({
url: '/ReadQRCode/ReadQRCode',
method: 'POST',
data: fileData,
contentType: false,
processData: false,
success: function (res) {
debugger
if (res != null && res != '' && res != 'undefined') {
$('#QRtext').removeClass('d-none');
$('#QRtext').text(res);
}
else {
$('#QRtext').addClass('d-none');
}
},
error: function () {
alert('Something went wrong.');
}
});
}
else {
$('#QRImg').addClass('d-none');
alert('Please enter something to generate QR Code');
}
});
</script>
