Cómo Generar Códigos QR en ASP.NET MVC

Instalar Iron Barcode

Para comenzar, abra la Consola del Administrador de Paquetes en Visual Studio y ejecute el siguiente comando:

Install-Package IronBarCode

Este comando instalará la biblioteca Iron Barcode y agregará las referencias necesarias a su proyecto.

Ahora, escribamos algo de código para crear códigos QR.

Crear QRCodeModel

Cree una clase de modelo dentro de la carpeta Models y escriba el siguiente código:

using System.ComponentModel.DataAnnotations;

public class QRCodeModel
{
    [Display(Name = "Enter QR Code Text")]
    public string QRCodeText { get; set; }
}

using System.ComponentModel.DataAnnotations;

public class QRCodeModel
{
    [Display(Name = "Enter QR Code Text")]
    public string QRCodeText { get; set; }
}

Imports System.ComponentModel.DataAnnotations

Public Class QRCodeModel
	<Display(Name := "Enter QR Code Text")>
	Public Property QRCodeText() As String
End Class

Crear controlador de código QR

En su proyecto ASP.NET MVC, cree un nuevo controlador llamado QrCodeController. Para hacer esto, haga clic derecho en la carpeta Controllers en la estructura de su proyecto, seleccione "Agregar" y luego elija "Controlador". De las opciones disponibles, seleccione "Controlador MVC - Vacío".

Escriba el siguiente código en QrCodeController:

using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System.IO;

public class QrCodeController : Controller
{
    private readonly IWebHostEnvironment _environment;

    public QrCodeController(IWebHostEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult CreateQRCode()
    {
        return View();
    }

    [HttpPost]
    public IActionResult CreateQRCode(QRCodeModel generateQRCode)
    {
        try
        {
            // Creating QR Code
            GeneratedBarcode barcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText);
            string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filePath = Path.Combine(path, "qrcode.png");
            barcode.SaveAsPng(filePath);

            string fileName = Path.GetFileName(filePath);
            string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedQRCode/{fileName}";

            ViewBag.QrCodeUri = imageUrl;
        }
        catch (Exception ex)
        {
            // Handle exceptions
            // Log the exception details here for troubleshooting and debugging.
            throw;
        }

        return View();
    }
}

using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System.IO;

public class QrCodeController : Controller
{
    private readonly IWebHostEnvironment _environment;

    public QrCodeController(IWebHostEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult CreateQRCode()
    {
        return View();
    }

    [HttpPost]
    public IActionResult CreateQRCode(QRCodeModel generateQRCode)
    {
        try
        {
            // Creating QR Code
            GeneratedBarcode barcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText);
            string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filePath = Path.Combine(path, "qrcode.png");
            barcode.SaveAsPng(filePath);

            string fileName = Path.GetFileName(filePath);
            string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedQRCode/{fileName}";

            ViewBag.QrCodeUri = imageUrl;
        }
        catch (Exception ex)
        {
            // Handle exceptions
            // Log the exception details here for troubleshooting and debugging.
            throw;
        }

        return View();
    }
}

Imports Microsoft.AspNetCore.Mvc
Imports IronBarCode
Imports System.IO

Public Class QrCodeController
	Inherits Controller

	Private ReadOnly _environment As IWebHostEnvironment

	Public Sub New(ByVal environment As IWebHostEnvironment)
		_environment = environment
	End Sub

	Public Function CreateQRCode() As IActionResult
		Return View()
	End Function

	<HttpPost>
	Public Function CreateQRCode(ByVal generateQRCode As QRCodeModel) As IActionResult
		Try
			' Creating QR Code
			Dim barcode As GeneratedBarcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText)
			Dim path As String = System.IO.Path.Combine(_environment.WebRootPath, "GeneratedQRCode")

			If Not Directory.Exists(path) Then
				Directory.CreateDirectory(path)
			End If

			Dim filePath As String = System.IO.Path.Combine(path, "qrcode.png")
			barcode.SaveAsPng(filePath)

			Dim fileName As String = System.IO.Path.GetFileName(filePath)
			Dim imageUrl As String = $"{Me.Request.Scheme}://{Me.Request.Host}{Me.Request.PathBase}/GeneratedQRCode/{fileName}"

			ViewBag.QrCodeUri = imageUrl
		Catch ex As Exception
			' Handle exceptions
			' Log the exception details here for troubleshooting and debugging.
			Throw
		End Try

		Return View()
	End Function
End Class

Este código configura un controlador que puede generar códigos QR. Cuando se llama a la acción CreateQRCode, toma el texto para el código QR, genera la imagen del código QR, la guarda y proporciona la URL de la imagen en la vista para su visualización. Más detalles son los siguientes:

• El controlador tiene un constructor que toma un parámetro IWebHostEnvironment para acceder al entorno de alojamiento web.
• La acción CreateQRCode devuelve una vista.
• La acción CreateQRCode con el atributo [HttpPost] toma un parámetro QRCodeModel, que contiene el texto del código QR.
• Dentro de la acción, se genera un código QR utilizando la clase QRCodeWriter de la biblioteca Iron Barcode.
• El código QR generado se guarda como un archivo de imagen PNG en una carpeta llamada GeneratedQRCode en la ruta raíz de la web.
• Si la carpeta GeneratedQRCode no existe, se crea.
• Se generan la ruta del archivo y la URL para la imagen del código QR guardado.
• La URL de la imagen del código QR se almacena en la propiedad ViewBag.QrCodeUri para ser utilizada en la vista.
• Se capturan y registran las excepciones que ocurren durante el proceso.

Agregar vista CreateQRCode

Ahora, para agregar una nueva vista, haga clic derecho en el método de acción CreateQRCode en la clase QrCodeController. Seleccione "Agregar Vista", luego seleccione "Vista Razor" y haga clic en el botón "Agregar".

Aparecerá una nueva ventana como se muestra a continuación.

Escriba el nombre de la vista, seleccione la plantilla "Crear" y seleccione nuestra clase de modelo recién creada QRCodeModel. Haga clic en el botón Agregar. La vista se creará. Reemplace su vista con el código a continuación.

@model QRCodeModel

@{
    ViewData["Title"] = "CreateQRCode";
}

<h1>Create QRCode in ASP.NET MVC</h1>

<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <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="Create" class="btn btn-primary" />
            </div>
            <div class="form-group">
                @if (ViewBag.QrCodeUri != null)
                {
                    <img src="@ViewBag.QrCodeUri" class="img-thumbnail" alt="Generated QR Code" />
                }
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Ahora, avancemos a la clase Program.cs y cambiemos la ruta del controlador predeterminada.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=CreateQRCode}/{id?}"
);

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=CreateQRCode}/{id?}"
);

app.MapControllerRoute(name:= "default", pattern:= "{controller=QrCode}/{action=CreateQRCode}/{id?}")

Esto cambiará la ruta predeterminada de HomeController a nuestro QrCodeController.

Ahora, compile y ejecute el proyecto.

Resultado

Ingrese texto en el cuadro de texto y haga clic en el botón crear. Se creará un código QR y se mostrará en la pantalla como se muestra a continuación.

Ahora, añadamos estilo visual a nuestro código de barras añadiendo texto de anotación, valor del código QR y cambiando el color del código QR.

Agregar estilo visual al código QR

Agregue la siguiente línea de código dentro del método de acción CreateQRCode.

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF");
barcode.AddBarcodeValueTextBelowBarcode();
barcode.ChangeBackgroundColor(System.Drawing.Color.White);
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed);

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF");
barcode.AddBarcodeValueTextBelowBarcode();
barcode.ChangeBackgroundColor(System.Drawing.Color.White);
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed);

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF")
barcode.AddBarcodeValueTextBelowBarcode()
barcode.ChangeBackgroundColor(System.Drawing.Color.White)
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed)

Ahora, ejecute el proyecto y genere el Código QR.