Jak generować kody QR w ASP.NET MVC

Zainstaluj Iron BarCode

Aby rozpocząć, otwórz konsolę menedżera pakietów w Visual Studio i uruchom następujące polecenie:

Install-Package IronBarCode

To polecenie zainstaluje bibliotekę Iron BarCode i doda niezbędne odwołania do Twojego projektu.

Teraz napiszmy kod do tworzenia kodów QR.

Utwórz QRCodeModel

Utwórz klasę Model w folderze Models i wpisz następujący kod:

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

Utwórz kontroler kodów QR

W projekcie ASP.NET MVC utwórz nowy kontroler o nazwie QrCodeController. Aby to zrobić, kliknij prawym przyciskiem myszy folder Controllers w strukturze projektu, wybierz "Dodaj", a następnie wybierz "Kontroler". Z dostępnych opcji wybierz "Kontroler MVC – pusty".

Wpisz następujący kod w 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

Ten kod konfiguruje kontroler, który może generować kody QR. Po wywołaniu akcji CreateQRCode pobiera ona tekst kodu QR, generuje obraz kodu QR, zapisuje go i udostępnia adres URL obrazu w widoku w celu wyświetlenia. Więcej szczegółów znajduje się poniżej:

• Kontroler posiada konstruktor, który przyjmuje parametr IWebHostEnvironment w celu uzyskania dostępu do środowiska hostingu internetowego.
• Akcja CreateQRCode zwraca widok.
• Akcja CreateQRCode z atrybutem [HttpPost] przyjmuje parametr QRCodeModel, który zawiera tekst kodu QR.
• W ramach tej akcji generowany jest kod QR przy użyciu klasy QRCodeWriter z biblioteki Iron BarCode.
• Wygenerowany kod QR jest zapisywany jako plik graficzny PNG w folderze o nazwie GeneratedQRCode w katalogu głównym serwisu.
• Jeśli folder GeneratedQRCode nie istnieje, zostanie utworzony.
• Generowana jest ścieżka pliku i adres URL dla zapisanego obrazu kodu QR.
• Adres URL obrazu kodu QR jest przechowywany we właściwości ViewBag.QrCodeUri w celu wykorzystania w widoku.
• Wszelkie wyjątki występujące podczas procesu są wykrywane i rejestrowane.

Dodaj CreateQRCode Wyświetl

Aby dodać nowy widok, kliknij prawym przyciskiem myszy metodę akcji CreateQRCode w klasie QrCodeController. Wybierz "Dodaj widok", następnie wybierz "Widok Razor" i kliknij przycisk "Dodaj".

Pojawi się nowe okno, jak pokazano poniżej.

Wpisz nazwę widoku, wybierz szablon "Utwórz" i wybierz naszą nowo utworzoną klasę modelu QRCodeModel. Kliknij przycisk Dodaj. Widok zostanie utworzony. Zastąp swój widok poniższym kodem.

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

Przejdźmy teraz do klasy Program.cs i zmieńmy domyślną trasę kontrolera.

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?}")

Spowoduje to zmianę domyślnej trasy z HomeController na naszą QrCodeController.

Teraz skompiluj i uruchom projekt.

Wynik

Wpisz tekst w polu tekstowym i kliknij przycisk "Utwórz". Zostanie wygenerowany kod QR, który zostanie wyświetlony na ekranie, jak pokazano poniżej.

Teraz dodajmy stylizację wizualną do naszego BARCODE, dodając tekst adnotacji, wartość kodu QR oraz zmieniając kolor kodu QR.

Dodaj styl wizualny w kodzie QR

Dodaj następujący wiersz kodu wewnątrz metody akcji 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)

Teraz uruchom projekt i wygeneruj kod QR.