ASP.NET Core 5.0 - Path QR Code

This article will demonstrate the implementation of a QR Code generator for the current path. I will assume you have downloaded the FREE ASP.NET Core 3.1 - FIDO Utilities Project or created a new ASP.NET Core 5.0 Razor Pages project. See Tutorial: Get started with Razor Pages in ASP.NET Core.

When I implemented a global Offcanvas Demo Menu on Demo. KenHaggerty. Com, I realized a QR Code for the current demo path would be a nice feature and easy to implement. I added the markup to the Offcanvas _UtilitiesMenuPartial. cshtml partial view included in the FUP.

I will demonstrate the Path QR Code generator's html and JavaScript in a partial view.

_PathQrCodePartial.cshtml:

<div class="d-flex justify-content-center">
    <div class="text-center mb-4">
        <h4>Path QR Code</h4>
        <label>Hover Over Code For Path</label>
        <div class="path-qr-code"></div>
        <label>Right Click To Copy Or Save</label>
        <div>
            <a class="btn btn-primary path-qr-code-link" href="#" target="_blank">
                Download QR Code
            </a>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
        asp-fallback-src="~/lib/qrcode/qrcode.min.js" asp-fallback-test="window.QRCode"
        integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script>
    let path = window.location.href.split('?')[0].toLowerCase();
    new QRCode(document.querySelector('.path-qr-code'), {
        text: path,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.M
    });
</script>

I implement CDN link for qrcode.min.js with Subresource Integrity and local fallback. The FUP manages Client Libraries with libman.json.

libman.json:

{
  "destination": "wwwroot/lib/qrcode",
  "library": "qrcodejs@1.0.0"
}

I split window. location. href to get the path without the query string. The qrcode.min.js populates the QR Code's title attribute with the path. The right click context menu allows save or copy the QR Code.

The right click context menu for the page allows Create QR Code for this page. The main difference between the browser generated code and this generator is the correctLevel. The Path QR Code generator sets the correctLevel to QRCode.CorrectLevel.M.

When you download the browser generated code, the downloaded filename is the host name appended to "qrcode_". Different paths for the same host have the same filename. On my Android phone, the long touch event did not open the image context menu. I added a Download QR Code link to download the canvas's DataURL to a path encoded filename.

Add to JavaScript:

// Remove protocol and replace characters with UNDERSCORE
let filename = path.split('://')[1].replace(':', '_').replaceAll('.', '-').replaceAll('/', '-') + '-qr-code.png';
let downloadLink = document.querySelector('.path-qr-code-link');
downloadLink.setAttribute('download', filename);
downloadLink.setAttribute('title', filename);
downloadLink.setAttribute('href', document.querySelector('.path-qr-code canvas').toDataURL());