Read QR Code In ASP .NET MVC

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>

Final output

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories