Jak generować kody QR w ASP.NET MVC

Zainstaluj IronBarcode

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ę IronBarcode 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 swoim projekcie ASP.NET MVC, utwórz nowy kontroler o nazwie QrCodeController. Aby to zrobić, kliknij prawym przyciskiem myszy folder Kontrolery w strukturze projektu, wybierz "Dodaj", a następnie wybierz "Kontroler". Z dostępnych opcji wybierz "MVC Kontroler - Pusty".

Napisz 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. Gdy wywoływana jest akcja CreateQRCode, pobiera tekst dla kodu QR, generuje obraz kodu QR, zapisuje go i udostępnia adres URL do obrazu w widoku do wyświetlenia. Więcej szczegółów znajduje się poniżej:

• Kontroler posiada konstruktor, który przyjmuje parametr IWebHostEnvironment, aby uzyskać dostęp do środowiska hostingu sieciowego.
• Akcja CreateQRCode zwraca widok.
• Akcja CreateQRCode z atrybutem [HttpPost] pobiera parametr QRCodeModel, który zawiera tekst kodu QR.
• Wewnątrz akcji generowany jest kod QR za pomocą klasy QRCodeWriter z biblioteki IronBarcode.
• Wygenerowany kod QR jest zapisywany jako plik obrazu PNG w katalogu o nazwie GeneratedQRCode w ścieżce korzenia sieci.
• Jeśli folder GeneratedQRCode nie istnieje, zostaje utworzony.
• Generowana jest ścieżka pliku i adres URL dla zapisanego obrazu kodu QR.
• Adres URL obrazu kodu QR przechowywany jest w właściwości ViewBag.QrCodeUri do użycia w widoku.
• Wszelkie wyjątki występujące podczas procesu są wykrywane i rejestrowane.

Dodaj widok CreateQRCode

Teraz, 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.

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

Teraz przejdźmy 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?}")

To zmieni domyślną trasę 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ącą linię kodu wewnątrz metody Action 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.