Develop QR Code Generator Website in ASP.NET Core

You can find many free QR code generator websites on the internet that allow you to generate QR codes online. But have you ever thought about how to build a website for this purpose on your own? In this blog post, we’ll provide guidelines for creating your own website using ASP.NET Core to generate QR codes.

Getting Started

Now a days QR codes impacting a business a lot to boost their marketing, it plays a measure roll for a business to show up their product, promotional efforts and enhance customer interaction etc.

You may find every online website shows their product with QR code or Barcode, because it helps to share lots of information on web page by using a single QR code.

Above are the small information about QR code and I hope you will understand the impact of the QR code in business and how much important to show it on a web site. For website developers it is also important to know how to generate it.

Prerequisites

1. Knowledge of C#
2. knowledge of HTML
3. Microsoft Visual Studio
4. QR Code Generator Package

Creating a QR code generator website using ASP.NET Core can be a rewarding project. Here’s a step-by-step guide to help you build your own QR code generator web site in ASP.NET Core where ASP.NET Razor page is used as a website page which accepts input and displays QR code :

Step-1 Set Up Website Development Template

The below steps guides to use the ASP.NET Core website development project template to build a website.

1. Make sure you have installed Microsoft Visual Studio, here I have used Microsoft Visual Studio version 2022.
2. Open the Visual Studio and click on the Create a new project.
3. The Create a new project window will appear.
   • Find the ASP.NET Core Web App (Razor Page) template.
   • Select the template and click on the Next button.
4. Then Configure your new project window will appear.
   • Give the name QRCodeBuilder to your project.
   • Click on the Next button.
5. Additional information windows will be displayed.
   • Select .Net 8.0 as framework.
   • Uncheck the Do not use top-level statements if checked.
   • Click on the Create button.
6. You are done with ASP.NET Core Web site template.

Runn the project without the debugger by pressing Ctr+F5, you will have a web app like below image.

Step-2: Install QR Code Generator Package

You’ll need a QR code builder library to generate QR code, the library is available in Manage NuGet Package Manager. One popular option is QRCoder.

1. Right click on the Solution Explorer, find Manage NuGet Package Manager and click on it
2. After as shown into the image and type in search box "QRCoder"
3. Select QRCoder as shown into the image.
4. Choose version of QRCoder library and click on install button

Step -3: Add Web Page

The third step is to add a webpage into template where we will write the QR code maker code, here we will add an ASP.NET Razor page to the project that will work as a QR Code builder, here are the steps:

1. Go to Solution Explorer.
2. Right-click on the Pages folder > Add > New Item.
3. The Add New Item window will appear, in the dialog:
   • Select Razor Page-Empty.
   • Click on the Add button.
   • Give the name to the page QRCodeBuilder.cshtml

Step -4: Add QR Code generator code to Web Page

1. Open the QRCodeBuilder.cshtml file by double clicking on it then remove all the code.
2. Copy the below code and past it in QRCodeBuilder.cshtml file.

    @page  
    @model QRGenerator.Pages.QRCodeBuilderModel  
    @{  
    }  
    <h2>QR Code Generator</h2>  
    <div class="row">  
      <div class="col-md-4">  
        <form method="post">  
          <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
          <div class="form-group">  
            <label asp-for="QRCodeText" class="control-label"></label>  
            <input asp-for="QRCodeText" class="form-control" />  
            <span asp-validation-for="QRCodeText" class="text-danger"></span>  
          </div>  
          <div class="form-group">  
            <input type="submit" value="Generate QR Code" class="btn btn-primary text-center" />  
          </div>  
        </form>  
        <div class="form-group">  
          @if (Model.QRCodeImage != null)  
          {  
            <h3>Your QR Code:</h3>  
            <img width="200px" height="200px" src="@Model.QRCodeImage" alt="Generated QR Code" />  
          }  
        </div>  
      </div>  
    </div>  
   

3. Then open the QRCodeBuilder.cshtml.cs file and copy the below code and replace it.

    using Microsoft.AspNetCore.Mvc;  
    using Microsoft.AspNetCore.Mvc.RazorPages;  
    using QRCoder;  
    namespace QRGenerator.Pages  
    {  
      public class QRCodeBuilderModel : PageModel  
      {  
        [BindProperty]  
        public string QRCodeText { get; set; }  
        [BindProperty]  
        public string QRCodeImage { get; set; }   
        public void OnGet()  
        {  
          QRCodeImage = string.Empty;  
        }  
        [HttpPost]  
        public void OnPost()  
        {  
          //string input = Request.Form[""];  
          using (var qrGenerator = new QRCodeGenerator())  
          {  
            using (var qrCodeData = qrGenerator.CreateQrCode(QRCodeText, QRCodeGenerator.ECCLevel.Q))  
            {  
              using (var qrCode = new QRCode(qrCodeData))  
              {  
                using (var bitmap = qrCode.GetGraphic(20))  
                {  
                  using (var stream = new MemoryStream())  
                  {  
                    bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png);  
                    var image = Convert.ToBase64String(stream.ToArray());  
                    this.QRCodeImage = $"data:image/png;base64,{image}";  
                  }  
                }  
              }  
            }  
          }  
        }  
      }  
    }  
   

Testing

Run the web application project, the home page will appear on browser with URL followed by below pattenr

 {protocol}://{localhost}:{port}/  

In my web app development, i got port number 7139 as default. Hence the URL for me is

  https://localhost:7139/  

Add QRCodeBuilder in the link . After adding the QRCodeBuilder in the link, the URL will be

 https://localhost:7139/QRCodeBuilder  

Then press the Enter key. you will be redirected to the below QRCodeBuilder page. Enter some text in the QRCodeText field then press Generate QR Code button.

QR Code Generator Web Page

Summary

You now have a basic QR code generator built with ASP.NET Core Razor Pages! You can further enhance it by adding styles, error handling, or additional features like saving QR codes as files. Enjoy building!

Thanks