W dzisiejszym szybko zmieniającym się świecie cyfrowym generowanie kodów QR stało się niezbędnym narzędziem do efektywnego udostępniania informacji. Te kompaktowe, dwuwymiarowe BARCODES, zdolne do przechowywania szerokiego zakresu danych, w tym adresów URL, tekstu, informacji kontaktowych, szczegółów produktów i wielu innych, odgrywają kluczową rolę we współczesnej komunikacji. Włączenie funkcji generowania kodów QR do aplikacji ASP.NET MVC pozwala zwiększyć możliwości użytkowników poprzez płynne generowanie kodów QR oraz poprawę ich doświadczeń, usprawnienie interakcji i ułatwienie bezproblemowej wymiany informacji.

Jeśli tworzysz aplikację ASP.NET MVC i chcesz włączyć do niej funkcje generowania kodów QR, biblioteka IronBarcode to doskonała biblioteka, która upraszcza ten proces. W tym artykule zbadamy, jak generować kody QR w ASP.NET MVC, korzystając z biblioteki IronBarcode.

IronBarcode

IronBarcode to potężna i bogata w funkcje biblioteka do generowania i rozpoznawania kodów QR dla aplikacji .NET. Dzięki IronBarcode programiści mogą z łatwością zintegrować funkcje kodów kreskowych i kodów QR ze swoimi projektami ASP.NET MVC, w tym możliwość generowania kodów QR. Biblioteka zapewnia kompleksowy zestaw narzędzi i interfejsów API, które upraszczają proces tworzenia i dostosowywania kodów QR, umożliwiając programistom dostosowanie ich do konkretnych wymagań.

IronBarcode oferuje szerokie wsparcie dla różnych typów kodów kreskowych, w tym kodów QR, co czyni go idealnym wyborem dla projektów wymagających możliwości generowania kodów QR. Zapewnia programistom elastyczność w określaniu danych do zakodowania, kontrolowaniu rozmiaru i rozdzielczości generowanych kodów QR, a nawet dodawaniu elementów stylizacji wizualnej, takich jak kolory i logo. Biblioteka zapewnia wysokiej jakości generowanie kodów barcode z precyzyjną kontrolą nad każdym aspektem wyglądu kodu QR.

Oprócz generowania kodów QR, IronBarcode oferuje również zaawansowane funkcje odczytu i dekodowania kodów kreskowych. Obsługuje skanowanie i wyodrębnianie danych z kodów QR, umożliwiając aplikacjom przetwarzanie informacji w nich zakodowanych. Ta funkcja jest przydatna w sytuacjach, w których konieczne jest skanowanie kodów kreskowych i wyodrębnianie danych, takich jak zarządzanie zapasami, systemy biletowe i aplikacje mobilne.

Teraz stwórzmy projekt, aby wygenerować kod QR w aplikacji internetowej ASP.NET Core MVC.

Konfiguracja projektu

Zanim zagłębimy się w szczegóły implementacji, upewnijmy się, że projekt ASP.NET MVC jest skonfigurowany i gotowy do działania. Niezależnie od tego, czy zaczynasz nowy projekt, czy pracujesz z istniejącym, kroki opisane poniżej poprowadzą cię przez proces integracji biblioteki IronBarcode w aplikacji. W moim przypadku utworzyłem nowy projekt.

Kroki tworzenia nowego projektu są następujące:

1. Otwórz program Microsoft Visual Studio 2022.
2. Na stronie startowej kliknij "Utwórz nowy projekt" lub przejdź do "Plik" > "Nowy" > "Projekt" w górnym menu.
3. W oknie "Utwórz nowy projekt" zobaczysz różne szablony projektów do wyboru. Wybierz szablon projektu "Aplikacja internetowa ASP.NET Core (Model-View-Controller)" i kliknij "Dalej".
4. Wprowadź nazwę i lokalizację swojego projektu. Wybierz odpowiednią lokalizację na komputerze, aby zapisać pliki projektu.
5. Wybierz żądaną wersję frameworka. Visual Studio zazwyczaj sugeruje najnowszą stabilną wersję, ale w razie potrzeby można wybrać inną. Wybrałem .NET 7.
6. Dostosuj wszelkie dodatkowe ustawienia projektu, takie jak opcje uwierzytelniania lub foldery projektowe, zgodnie z własnymi wymaganiami.
7. Kliknij "Utwórz", aby utworzyć projekt.

Visual Studio wygeneruje następnie pliki projektu i otworzy eksplorator rozwiązań, w którym można zobaczyć strukturę projektu i rozpocząć pracę nad kodem.

Teraz, musimy zainstalować bibliotekę IronBarcode w naszej aplikacji.

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

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(environment As IWebHostEnvironment)
        _environment = environment
    End Sub

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

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

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

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

            Dim fileName As String = 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

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

Public Class QrCodeController
    Inherits Controller

    Private ReadOnly _environment As IWebHostEnvironment

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

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

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

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

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

            Dim fileName As String = 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"); }
}

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

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)

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.

Wnioski

W ASP.NET MVC integracja IronBarcode jest prosta. Zapewnia przyjazny dla użytkownika interfejs, ułatwiający pracę z kodami QR. Korzystając z IronBarcode, możesz ulepszyć swoją aplikację, dodając funkcję kodów QR, umożliwiającą użytkownikom wygodne udostępnianie i uzyskiwanie dostępu do informacji. Biblioteka IronBarcode to cenna biblioteka, która upraszcza proces generowania i odczytywania kodów QR w ASP.NET MVC. Umożliwia to programistom tworzenie dynamicznych aplikacji, które wykorzystują możliwości kodów QR do wydajnego udostępniania i pobierania danych.

IronBarcode jest darmowy do użytku osobistego. Jednak w celach komercyjnych należy zakupić licencję komercyjną, która jest dostępna wraz z bezpłatną wersją próbną. Możesz również uzyskać znaczną zniżkę, jeśli zdecydujesz się na zakup kompletnego pakietu Iron Suite. Iron Suite to kompleksowy zbiór komponentów oprogramowania .NET zaprojektowanych w celu uproszczenia zadań programistycznych i zwiększenia funkcjonalności. Oferuje pięć potężnych bibliotek, w tym IronBarcode, IronOCR, IronPDF, IronXL i Iron Webscraper, które umożliwiają deweloperom płynne pracę z kodami kreskowymi, optycznym rozpoznawaniem znaków, przetwarzaniem PDF, Excelu i plików CSV. Jeśli zdecydujesz się na zakup kompletnego pakietu Iron Suite, otrzymasz wszystkie pięć produktów w cenie dwóch.