Promoting SoC Through Application Layering

Posted by on
Creating a layered design in an application is a fundamental element of modern software architecture. The goal is to promote the Separation of Concerns (SoC) design principle. Separation of Concerns The ideas behind SoC date back to Dijkstra's 1974 paper "On the role of scientific thought" . In computer science, separation of concerns (sometimes abbreviated as SoC) is a design principle for separating a computer program into distinct sections. Each section addresses a separate concern, a set of information that affects the code of a computer program. A concern can be as general as "the details of the hardware for an application", or as specific as "the name of which class to instantiate". A program that embodies SoC well is called a modular program. Modularity, and hence separation of concerns, is achieved by encapsulating information inside a section of code that has a well-defined interface. - Wikipedia SoC is a broad design principal th...

Dynamic QR Code Generation

Posted by on

It can be useful to create QR Codes dynamically in an ASP.NET application (or any web application). QRCode.js makes this easy. Let's look at an example of using QRCode.js in an ASP.NET Core Web App to dynamically generate a QR Code.

Dynamic QR Code Generator App Screenshot

To keep this example short and simple, we'll embed all of the logic into a single Razor Page (note that this is not a good design, but illustrates the usage of QRCode.js). We'll just reference the QRCode.js library from cdnjs.

Below is the code for the Razor Page Index.cshtml.

@page
@model IndexModel
@{
    ViewData["Title"] = "Dynamic QR Code Generator";
}

<div class="text-center">
    <h1 class="display-4">Dynamic QR Code Generator</h1>

    <form method="post">
        <div>
            <input type="text" name="QRCodeUri" value="@Model.QRCodeUri" size="50"/>
            <input type="submit">
        </div>
    </form>

    <div class="d-flex justify-content-center mt-4" id="qrcode"></div>
</div>

@section Scripts
{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

    <script type="text/javascript">
        function InitializeQRCode(id, uri)
        {
            new QRCode(document.getElementById(id),
                {
                    text: uri,
                    width: 180,
                    height: 180,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
        }

        $(document).ready(function () {
            InitializeQRCode('qrcode', '@Model.QRCodeUri');
        });
    </script>
}

Below is the code from Index.cshtml.cs.

public class IndexModel : PageModel
{
	private readonly ILogger<IndexModel> _logger;

	[BindProperty]
	public string QRCodeUri { get; set; } = "https://www.brightideatechnology.com";

	public IndexModel(ILogger<IndexModel> logger)
	{
		_logger = logger;
	}

	public void OnGet() { }

	public void OnPost() { }
}

This example was created using Visual Studio 2022 running an ASP.NET Core Web App project.

Source code: https://github.com/jharrell-bits/DynamicQRCodeDemo