Como gerar códigos QR em ASP.NET MVC

Instalar Iron Barcode

Para começar, abra o Console do Gerenciador de Pacotes no Visual Studio e execute o seguinte comando:

Install-Package IronBarCode

Este comando instalará a biblioteca Iron Barcode e adicionará as referências necessárias ao seu projeto.

Agora, vamos escrever algum código para criar QR codes.

Criar QRCodeModel

Crie uma classe de modelo dentro da pasta Models e escreva o seguinte 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; }
}

Criar Controlador de Código QR

No seu projeto ASP.NET MVC, crie um novo controlador chamado QrCodeController. Para fazer isso, clique com o botão direito na pasta Controllers na estrutura do seu projeto, selecione 'Adicionar' e então escolha 'Controlador'. Das opções disponíveis, selecione 'Controlador MVC - Vazio'.

Escreva o seguinte código em 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();
    }
}

Este código configura um controlador que pode gerar códigos QR. Quando a ação CreateQRCode é chamada, ela recebe o texto para o código QR, gera a imagem do código QR, salva e fornece o URL da imagem na visualização para exibição. Mais detalhes são os seguintes:

• O controlador tem um construtor que recebe um parâmetro IWebHostEnvironment para acessar o ambiente de hospedagem web.
• A ação CreateQRCode retorna uma visualização.
• A ação CreateQRCode com o atributo [HttpPost] recebe um parâmetro QRCodeModel, que contém o texto do código QR.
• Dentro da ação, um código QR é gerado usando a classe QRCodeWriter da biblioteca Iron Barcode.
• O código QR gerado é salvo como um arquivo de imagem PNG em uma pasta chamada GeneratedQRCode no caminho raiz da web.
• Se a pasta GeneratedQRCode não existir, ela é criada.
• O caminho do arquivo e a URL para a imagem do código QR salvo são gerados.
• O URL da imagem do código QR é armazenado na propriedade ViewBag.QrCodeUri para ser usado na visualização.
• Quaisquer exceções que ocorram durante o processo são capturadas e registradas.

Adicionar Visualização CreateQRCode

Agora, para adicionar uma nova visualização, clique com o botão direito do mouse no método de ação CreateQRCode na classe QrCodeController. Selecione 'Adicionar Visão', então selecione 'Visão Razor' e clique no botão 'Adicionar'.

Uma nova janela será aberta, conforme mostrado abaixo.

Escreva o nome da visualização, selecione o modelo "Criar" e selecione nossa classe de modelo recém-criada QRCodeModel. Clique no Botão Adicionar. A visão será criada. Substitua sua visão pelo código abaixo.

@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"); }
}

Agora, vamos para a classe Program.cs e altere a Rota do Controller padrão.

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

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

Isso mudará a rota padrão de HomeController para nosso QrCodeController.

Agora, compile e execute o projeto.

Saída

Insira o texto na caixa de texto e clique no botão criar. Um código QR será criado e exibido na tela como mostrado abaixo.

Agora, vamos adicionar estilo visual ao nosso código de barras adicionando texto de anotação, valor do Código QR e alterando a cor do Código QR.

Adicionar Estilo Visual no Código QR

Adicione a seguinte linha de código dentro do método de Ação 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);

Agora, execute o projeto e gere o Código QR.