ASP.NET Core 5.0 - Path QR Code

Ken Haggerty
Created 09/01/2021 - Updated 09/02/2021 01:58

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.

FIDO Utilities Project and Article Series

The ASP.NET Core 3.1 - FIDO Utilities Project (FUP) is a collection of utilities I use in the ASP.NET Core 5.0 - Users Without Passwords Project (UWPP). I have upgraded the FUP with Bootstrap v5 and Bootstrap Native v4. FUP version 2.1 features SingleUser Authentication, Admin Page with Send Email Tests, ExceptionEmailerMiddleware, Bootstrap v5 Detection JavaScript, Copy and Paste Demo, Offcanvas Partial Demo, and Path QR Code Demo. The SMTP Settings Tester is updated and now located in the authorized Pages > Admin folder. The EmailSender and AES Cipher Demo are also updated. Registered users can download the source code for free on KenHaggerty. Com at Manage > Assets. The UWPP is published at Fido. KenHaggerty. Com.

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.

Path QR Code
Path QR Code Mobile

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.

Hover Over Code For Path
Right Click To Copy Or Save

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.

Create Page QR Code
Compare QR Codes

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());

Article Tags:

JavaScript

Comment Count = 0

Please log in to comment.

Login Register
Logged in users receive web notifications.
Web Notifications