Create a QR Code Generator Website in ASP.Net Core MVC

In my previous post, I shared guidelines for building a QR code generator website using ASP.NET Core with Razor Pages. In this post, we will discuss how to develop a website in ASP.NET Core with the MVC structure to generate QR codes

Getting Started

To create a QR Code generator website in an ASP.NET Core MVC application, you can follow these steps. The website will allow users to input data (like text or URLs), and generate a QR code based on that data.

Prerequisites:

1. Visual Studio (or Visual Studio Code with .NET Core SDK).
2. .NET SDK installed (preferably .NET 6 or .NET 7).
3. NuGet package QRCoder (a QR code generating library in .NET).

Steps:

1. Create a New ASP.NET Core MVC Project

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.

2. Install the QRCoder Library

You need a library that can generate QR codes. The most commonly used library is QRCoder. Install it via NuGet.

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

3. Create the QR Code Generation Logic

Now, you will add the logic to generate QR codes in your controller.Controller: In the Controllers folder, create a new controller named QRCodeController.

 using Microsoft.AspNetCore.Mvc;  
 using QRCoder;  
 using System.IO;  
 namespace QRCodeGenerator.Controllers  
 {  
   public class QRCodeController : Controller  
   {  
     // GET: QRCode  
     public IActionResult Index()  
     {  
       return View();  
     }  
     // POST: QRCode/Generate  
     [HttpPost]  
     public IActionResult Generate(string inputData)  
     {  
       if (string.IsNullOrEmpty(inputData))  
       {  
         ViewBag.ErrorMessage = "Please enter some data to generate a QR code.";  
         return View("Index");  
       }  
       // Generate the QR code  
       using (var qrGenerator = new QRCodeGenerator())  
       {  
         var qrCodeData = qrGenerator.CreateQrCode(inputData, QRCodeGenerator.ECCLevel.Q);  
         var qrCode = new QRCode(qrCodeData);  
         using (var ms = new MemoryStream())  
         {  
           qrCode.GetGraphic(20).Save(ms, System.Drawing.Imaging.ImageFormat.Png);  
           ViewBag.QRCodeImage = Convert.ToBase64String(ms.ToArray());  
         }  
       }  
       return View("Index");  
     }  
   }  
 }  

This code defines two actions:

• Index() for showing the form to input data.
• Generate() for generating the QR code and displaying it back to the user.

4. Create the View for Input and Displaying the QR Code

Next, create the view to allow users to input data and display the generated QR code.View: In the Views\QRCode folder, create a view named Index.cshtml.

 @{  
   ViewData["Title"] = "QR Code Generator";  
 }  
 <h2>QR Code Generator</h2>  
 <form asp-action="Generate" method="post">  
   <div class="form-group">  
     <label for="inputData">Enter Data (Text or URL):</label>  
     <input type="text" id="inputData" name="inputData" class="form-control" />  
   </div>  
   <button type="submit" class="btn btn-primary">Generate QR Code</button>  
 </form>  
 @if (ViewBag.QRCodeImage != null)  
 {  
   <h3>Generated QR Code:</h3>  
   <img src="data:image/png;base64,@ViewBag.QRCodeImage" alt="QR Code" />  
 }  
 @if (ViewBag.ErrorMessage != null)  
 {  
   <div class="alert alert-danger">  
     @ViewBag.ErrorMessage  
   </div>  
 }  

5. Update the Startup.cs (if needed)

If you are using ASP.NET Core 6 or later, you will likely have the Program.cs file for configuration. The following is a basic setup for .NET 6+:

 using Microsoft.AspNetCore.Builder;  
 using Microsoft.Extensions.DependencyInjection;  
 using Microsoft.Extensions.Hosting;  
 var builder = WebApplication.CreateBuilder(args);  
 builder.Services.AddControllersWithViews();  
 var app = builder.Build();  
 if (app.Environment.IsDevelopment())  
 {  
   app.UseDeveloperExceptionPage();  
 }  
 else  
 {  
   app.UseExceptionHandler("/Home/Error");  
   app.UseHsts();  
 }  
 app.UseHttpsRedirection();  
 app.UseStaticFiles();  
 app.UseRouting();  
 app.MapControllerRoute(  
   name: "default",  
   pattern: "{controller=QRCode}/{action=Index}/{id?}");  
 app.Run();  

6. Run the Application

Now that everything is set up, you can run the application by pressing Ctrl + F5 in Visual Studio, or running the following in the terminal:

 dotnet run  

Once the app is running, go to https://localhost:5001/QRCode/Index, where you'll see the form to input data and generate a QR code. 5001 is the port number what runtime is allocated for my application, check your port number

Summary

This simple web app allows users to generate QR codes dynamically by submitting text or URLs. You can enhance this project by adding more customization options, such as adjusting the QR code's size, color, or error correction level, or even allowing the user to download the QR code image.

Thanks