Erstellen einer Razor Barcode Generator Web App

Razor Barcode Generator ist ein praktisches Tool, das die Erstellung von Barcodes für Entwickler und Unternehmen gleichermaßen vereinfacht. Die Integration der Barcode-Generierung in Webanwendungen verbessert die Funktionalität und die Benutzerfreundlichkeit und macht es einfach, eine Vielzahl von Barcode-Typen zu erstellen. Ganz gleich, ob Sie Ihr Inventar verwalten, Anlagen nachverfolgen oder Kassiervorgänge rationalisieren wollen, der Einsatz des Razor Barcode Generators kann die Effizienz und Genauigkeit erheblich verbessern. Wir werden in diesem Tutorial IronBarcode verwenden, um einen Barcode-Generator zu erstellen.

Einführung in IronBarcode

IronBarcode ist ein unverzichtbares Werkzeug für Entwickler, die mit .NET Core arbeiten, und bietet eine benutzerfreundliche Bibliothek für die Barcode-Erzeugung und -Lesen. Es zeichnet sich durch seine einfache Integration in Ihre Projekte aus und erfordert nur minimalen Code, um Barcodes und QR-Codes zu erzeugen oder zu entziffern. Das macht IronBarcode zu einer vielseitigen Wahl für die Erweiterung von Anwendungen mit Barcode-Generierungs- und Barcode-Lesefunktionen, von Webanwendungen mit Razor-Seiten bis hin zu Desktop- und mobilen Anwendungen. Die breite Palette an unterstützten Barcode-Formaten stellt sicher, dass es verschiedene Projektanforderungen erfüllen kann, einschließlich derer für .NET MVC, Blazor WebAssembly App und Blazor App, was es zu einer zuverlässigen Wahl für Entwickler macht.

Schritte zur Erstellung eines Barcode-Generators

Schritt 1: ASP.NET Core Webanwendung erstellen (Razor Pages)

Wir können die Blazor-Anwendung oder die Blazor-Server-Anwendung für dieses Projekt wählen. Aber für dieses Tutorial werde ich eine ASP.NET Core-Web-App (Razor Pages) verwenden. Die Erstellung einer ASP.NET Core-Webanwendung mit Razor Pages in Visual Studio erfolgt in einer Reihe von einfachen Schritten. Dieser Leitfaden hilft Ihnen, Ihr Projekt von Grund auf neu einzurichten:

Öffnen Sie Visual Studio: Starten Sie Visual Studio. Wählen Sie im Startfenster "Neues Projekt erstellen", um mit dem Einrichten Ihrer neuen Webanwendung zu beginnen.

Wählen Sie den Projekttyp: Im Fenster "Ein neues Projekt erstellen" müssen Sie den Projekttyp auswählen. Geben Sie "Razor" in das Suchfeld ein, um die Optionen einzugrenzen, und wählen Sie dann "ASP.NET Core Web App" aus der Liste der Projektvorlagen. Klicken Sie nach der Auswahl auf die Schaltfläche "Weiter", um fortzufahren.

Konfigurieren Sie Ihr Projekt: Sie werden nun aufgefordert, Ihr neues Projekt zu konfigurieren.

• Geben Sie einen "Projektnamen" für Ihre Webanwendung ein.
• Wählen Sie einen geeigneten "Speicherort" auf Ihrem Computer, an dem die Projektdateien gespeichert werden sollen.
• Optional können Sie den "Lösungsnamen" anpassen, wenn er sich vom Projektnamen unterscheiden soll.

• Klicken Sie auf "Weiter", um fortzufahren.

  

  Projektdetails einrichten: Vergewissern Sie sich im Fenster "Zusätzliche Informationen", dass Sie:

• Wählen Sie in der Dropdown-Liste die entsprechende Version von .NET aus. Um die neuesten Funktionen zu erhalten, wählen Sie die höchste verfügbare Version.
• Vergewissern Sie sich, dass "Für HTTPS konfigurieren" aktiviert ist, um sichere HTTP-Verbindungen zu ermöglichen.

• Klicken Sie auf "Erstellen", um die Erstellung Ihrer neuen Razor Pages-Webanwendung zu starten.

  

Schritt 2: Installieren Sie die IronBarcode-Bibliothek

Führen Sie die folgenden Schritte aus, um IronBarcode mit dem NuGet Package Manager in Visual Studio zu installieren und nahtlos in Ihre ASP.NET Core Web App oder ein anderes .NET-Projekt zu integrieren:

Greifen Sie auf den NuGet-Paketmanager zu: Klicken Sie mit der rechten Maustaste auf Ihren Projektnamen im Projektmappen-Explorer, der sich normalerweise auf der rechten Seite der Visual Studio-Oberfläche befindet. Wählen Sie im erscheinenden Kontextmenü "NuGet-Pakete verwalten" Dadurch wird die Registerkarte "NuGet Package Manager" geöffnet.

Suchen Sie nach IronBarcode: Klicken Sie in der Registerkarte NuGet Package Manager auf die Registerkarte "Durchsuchen", um online nach Paketen zu suchen. Geben Sie in das Suchfeld "IronBarcode" ein, um die IronBarcode-Bibliothek zu finden.

Installieren Sie IronBarcode: Suchen Sie in den Suchergebnissen nach dem Paket "IronBarCode". Vergewissern Sie sich, dass Sie das richtige Paket auswählen, da es möglicherweise Pakete mit ähnlichem Namen gibt. Klicken Sie auf das Paket "IronBarCode", um es auszuwählen, und klicken Sie dann auf die Schaltfläche "Installieren". Visual Studio zeigt möglicherweise ein Dialogfeld an, in dem die Änderungen aufgeführt werden, einschließlich aller zusätzlichen Abhängigkeiten, die zusammen mit IronBarcode installiert werden. Überprüfen Sie die Änderungen und klicken Sie auf "OK" oder "Akzeptieren", um mit der Installation fortzufahren. Falls Lizenzvereinbarungen angezeigt werden, überprüfen Sie diese und akzeptieren Sie sie, um fortzufahren.

Schritt 3: UI gestalten

Jetzt ist es an der Zeit, sich auf den visuellen Aspekt unserer Webanwendung zu konzentrieren. Wir beginnen damit, die Index-Seite zu verbessern. Öffnen Sie dazu die Datei index.cshtml in Ihrem Projekt. In dieser Datei befindet sich das Markup für die Homepage. Um unsere Seite optisch ansprechender und benutzerfreundlicher zu gestalten, werden wir einige benutzerdefinierte Stylings anwenden.

CSS für die Gestaltung: Fügen Sie das folgende CSS in den Abschnitt <head> Ihrer index.cshtml-Datei oder in ein <style> Tag ein, wenn Sie es direkt in den HTML-Code einbetten:

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
    .container {
        padding-top: 30px;
        max-width: 900px;
    }
    .row.justify-content-center {
        margin-right: 0;
        margin-left: 0;
    }
    .text-center {
        text-align: center;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .mb-4 {
        margin-bottom: 2rem;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .btn-primary {
        background-color: #0056b3;
        border-color: #004b9b;
        padding: 10px 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
        .btn-primary:hover {
            background-color: #004b9b;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    .btn-block {
        display: block;
        width: 100%;
    }
    .form-control {
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
    label {
        color: #495057;
        font-weight: bold;
    }
    datalist option {
        background-color: white;
        color: black;
    }
    #message {
        display: block;
        margin-top: 20px;
        font-size: 1rem;
    }
    #messageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
    }
    #imageContainer {
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        display: none;
    }
    #barcodeImage {
        max-width: 100%;
        padding: 10px;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }
    .divider {
        border-right: 2px solid #dee2e6;
    }
    .divider {
        border-right: 2px solid #dee2e6;
        padding-right: 30px;
    }
    .image-padding {
        padding-left: 30px;
    }

    #fileName,
    #customDownloadBtn {
        height: calc(1.5em + .75rem + 2px);
    }

    #customDownloadBtn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .row.mt-3 > div [class*="col-"] {
        padding-right: .15rem;
        padding-left: .15rem;
    }
    .pr-1 {
        padding-right: .5rem;
    }
    .pl-1 {
        padding-left: .5rem;
    }
    .svg-container {
        text-align: center;
    }
    .barcode-logo {
        width: 40%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

Dieser CSS-Code wurde entwickelt, um der Index-Seite ein sauberes und modernes Aussehen zu verleihen. Er verwendet die Schriftart "Poppins" für ein elegantes Erscheinungsbild und definiert Stile für Container, Schaltflächen, Formular-Steuerelemente und mehr für eine kohärente Benutzeroberfläche. Sie können diese Stile weiter anpassen, um die spezifischen Designanforderungen Ihrer Webanwendung zu erfüllen.

Hinzufügen einer Willkommensnachricht: Zur Begrüßung der Nutzer und zur Vorstellung des Zwecks unserer Anwendung platzieren wir eine auffällige Willkommensnachricht auf der Seite. Wir werden auch die Farbe an unser Designthema anpassen. Wir fügen ein Logobild mittig auf der Seite ein, direkt unter der Willkommensnachricht. So können Sie es tun:

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>

<h1 class="text-center mb-4" style="color:#004b9b">Welcome to Barode Generator</h1>
<div class="svg-container text-center">
    <img src="~/images/logo.svg" class="barcode-logo" alt="Barcode" />
</div>

Um mit der Gestaltung der Benutzeroberfläche Ihres Barcode-Generators fortzufahren, konzentrieren wir uns nun auf die Strukturierung des Hauptinhalts in einem zentrierten Layout. Das folgende Snippet zeigt, wie man das Bootstrap-Rastersystem verwendet, um Inhalte zu zentrieren und weitere UI-Komponenten wie Formulare, Schaltflächen oder informative Textbereiche vorzubereiten.

<div class="container">

    <div class="row justify-content-center">

    </div>
</div>

<div class="container">

    <div class="row justify-content-center">

    </div>
</div>

Entwurf Eingabeformular

In der obigen Struktur werden wir nun unser Formular entwerfen, um die Eingaben des Benutzers zu erhalten, um seinen Barcode zu gestalten. Wir nehmen die Eingabe der folgenden Felder entgegen: Daten für den Strichcode, Typ des Strichcodes, maximale Breite, maximale Höhe und Farbe des Strichcodes. Hier ist der Code:

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate  Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>

<div class="col-md-6 divider col-padding">
    <form method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="barcodeText">Data for Barcode</label>
            <input type="text" class="form-control" id="barcodeText" name="barcodeText" placeholder="Enter URL or text" required>
        </div>

        <div class="form-group">
            <label for="barcodeType">Type of Barcode</label>
            <input class="form-control" list="typeOptions" id="barcodeType" name="barcodeType" placeholder="Type to search...">
            <datalist id="typeOptions">
                @foreach (var type in Enum.GetNames(typeof(IndexModel.BarcodeTypes)))
                {
                    <option value="@type">@type</option>
                }
            </datalist>
        </div>

        <div class="row">
            <div class="form-group col-6">
                <label for="maxWidth">Max Width (px)</label>
                <input type="number" class="form-control" id="maxWidth" name="maxWidth" placeholder="e.g., 300" min="0">
            </div>
            <div class="form-group col-6">
                <label for="maxHeight">Max Height (px)</label>
                <input type="number" class="form-control" id="maxHeight" name="maxHeight" placeholder="e.g., 300" min="0">
            </div>
        </div>

        <div class="form-group">
            <label for="barcodeColor">Color for Barcode</label>
            <input class="form-control" list="colorOptions" id="barcodeColor" name="barcodeColor" placeholder="Type to search...">
            <datalist id="colorOptions">
                @foreach (var color in Enum.GetNames(typeof(IndexModel.BarcodeColors)))
                {
                    <option value="@color">@color</option>
                }
            </datalist>
        </div>

        <button type="submit" asp-page-handler="Upload" class="btn btn-primary btn-block">Generate  Barcode</button>
    </form>
    <div id="messageContainer">
        <span id="message" style="color:green;">@Html.Raw(Model.Message)</span>
    </div>
</div>

Im Folgenden finden Sie eine Aufschlüsselung der Aufgaben der einzelnen Teile in einfacher Sprache:

Der <div> Container: Dies ist wie ein Kasten auf der Webseite, der alles enthält, was mit der Erstellung eines Strichcodes zu tun hat. Aufgrund der Klasse col-md-6 ist er nur halb so breit wie sein übergeordneter Container.

Das <form> Element: Dies ist der Teil der Seite, in dem die Benutzer Daten eingeben. Das Attribut method ="post" bedeutet, dass die Informationen beim Absenden des Formulars in einer Weise an den Server gesendet werden, die für andere nicht sichtbar ist. Das Attribut enctype ="multipart/form-data" ermöglicht es dem Formular, Dateien zu senden, was nützlich sein kann, wenn Sie ein Bild oder eine Datei hochladen, um einen Strichcode zu erzeugen.

Daten für Barcode: Dies ist ein Feld, in das die Benutzer die Informationen eingeben können, die sie in einen Strichcode umwandeln möchten, z. B. eine URL oder einen Text. Es ist als erforderlich gekennzeichnet, so dass das Formular ohne diese Angabe nicht übermittelt werden kann.

Art des Barcodes: Hier können die Benutzer auswählen, welche Art von Barcode sie erstellen möchten. Die Auswahlmöglichkeiten stammen aus einer Aufzählung (einer speziellen Liste), die im hier nicht gezeigten Code definiert ist. Die Benutzer können durch Tippen die verfügbaren Optionen durchsuchen.

Maximale Breite und maximale Höhe: In diesen Feldern können die Benutzer die maximale Größe des Strichcodes in Pixeln angeben. Sie verhindern, dass der Strichcode für den vorgesehenen Verwendungszweck zu groß wird.

Farbe für Barcode: Ähnlich wie beim Barcodetyp können die Benutzer eine Farbe für ihren Barcode aus einer im Code definierten Liste auswählen. Dadurch kann das Erscheinungsbild des Barcodes individuell angepasst werden.

Schaltfläche Barcode generieren: Nach dem Ausfüllen des Formulars werden die Informationen durch Anklicken dieser Schaltfläche an den Server gesendet, wo der Strichcode auf der Grundlage der angegebenen Daten erstellt wird. Das Attribut asp-page-handler gibt eine bestimmte Methode im Servercode an, die diese Aktion bearbeitet.

Nachrichtencontainer: Hier erscheinen Nachrichten (wie Erfolgs- oder Fehlermeldungen), nachdem das Formular übermittelt wurde. Diese Meldungen werden auf der Serverseite eingestellt und dem Benutzer angezeigt, um ihm eine Rückmeldung über die durchgeführte Aktion zu geben.

Image-Kolumne

Nun ist es an der Zeit, eine Spalte zu erstellen, in der der generierte Barcode angezeigt wird und die Schaltfläche zum Herunterladen erscheint. Über die Schaltfläche "Download" können Sie die erstellte Schaltfläche herunterladen. Es gibt ein Eingabefeld, in das Sie vor dem Herunterladen den Namen des Barcodes eingeben können. Hier ist der Code, um dies zu implementieren:

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>

<!-- Image Column -->
<div class="col-md-6 image-padding">
    <div id="imageContainer">
        <img id="barcodeImage" src="" alt="Generated Barcode" />
        <div class="row mt-3">
            <div class="col-sm-8 pr-1">
                <input type="text" class="form-control" id="fileName" placeholder="Enter file name">
            </div>
            <div class="col-sm-4 pl-1">
                <button type="button" class="btn btn-primary btn-block" id="customDownloadBtn" style="height: 38px;">Download</button>
            </div>
        </div>
    </div>
</div>

Bildspalte (col-md-6 image-padding): Dieses div erstellt eine Spalte neben der Formularspalte (wenn ein zweispaltiges Layout verwendet wird). Die Klasse image-padding fügt wahrscheinlich eine Polsterung um die Spalte herum hinzu, um den Abstand zu vergrößern.

Bildcontainer (imageContainer): Dieses div ist speziell für die Einkapselung des Barcode-Bildes und der dazugehörigen Steuerungen vorgesehen. Zunächst verborgen, wird er in der Regel über JavaScript sichtbar gemacht, sobald ein Barcode erzeugt wurde.

Barcode-Bild (barcodeImage): Ein <img>-Tag wird verwendet, um den generierten Barcode anzuzeigen. Das src-Attribut ist zunächst leer, da die Bildquelle dynamisch festgelegt wird, nachdem der Strichcode erzeugt wurde. Das alt-Attribut liefert eine alternative Textbeschreibung des Bildes.

Eingabe des Dateinamens: Unterhalb des Barcode-Bildes befindet sich ein Eingabefeld, in das die Benutzer einen Namen für die Datei eingeben können, unter dem sie das Barcode-Bild speichern möchten. Dies ist nützlich, um die Datei vor dem Herunterladen zu personalisieren.

Schaltfläche "Herunterladen": Neben der Eingabe des Dateinamens befindet sich eine Schaltfläche mit der Aufschrift "Herunterladen". Diese Schaltfläche löst den Download des generierten Barcode-Bildes aus, wobei der vom Benutzer angegebene Dateiname verwendet wird, falls dieser angegeben wurde.

Responsive Gestaltung (Reihen- und Spaltenklassen): Das Layout verwendet das Rastersystem von Bootstrap (row, col-sm-8, col-sm-4), um sicherzustellen, dass das Dateinameingabefeld und die Download-Schaltfläche horizontal ausgerichtet sind und sich gut an unterschiedliche Bildschirmgrößen anpassen. Die Klassen pr-1 und pl-1 fügen rechts bzw. links von diesen Elementen eine Füllung hinzu, um den richtigen Abstand zu gewährleisten.

Beim Generieren eines Barcodes wird die Quelle (src) des barcodeImage-<img>-Tags aktualisiert, um das Bild anzuzeigen. Die Benutzer können dann einen Dateinamen ihrer Wahl in das Eingabefeld eingeben. Ein Klick auf die Schaltfläche "Herunterladen" sollte einen Download des Bildes auslösen, idealerweise unter Verwendung des vom Benutzer eingegebenen Namens. Die Details der Download-Funktionalität (z.B. das Festlegen des Dateinamens und die Handhabung der Download-Aktion) würden mit JavaScript oder serverseitiger Logik implementiert, die mit dem Klick-Ereignis des Buttons verknüpft ist.

Skripte

Jetzt ist es an der Zeit, die Funktionalität der Download-Schaltfläche, die Eingabebehandlung und die Behandlung von Erfolgs- oder Fehlermeldungen hinzuzufügen. Wir können dies mit jQuery erreichen. Hier ist das Skript, das der Datei index.cshtml hinzugefügt werden muss:

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var messageTimeout;

            $("form").submit(function (event) {
                event.preventDefault();
                clearTimeout(messageTimeout);
                var formData = new FormData($(this)[0]);
                $.ajax({
                    url: '@Url.Page("Index", "Upload")',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        $("#messageContainer").show();
                        $("#message").html(data.message);

                        if (data.success && data.imagePath) {
                            $("#barcodeImage").attr("src", data.imagePath).show();
                            $("#imageContainer").show();
                        } else {
                            console.error("Barcode generation failed or no image path provided.");
                        }

                        messageTimeout = setTimeout(function () {
                            $("#messageContainer").fadeOut("slow");
                        }, 3000);
                    },

                    error: function (xhr, status, error) {
                        console.error("Error: " + error);
                    }
                });
            });

            $("#customDownloadBtn").click(function () {
                var fileName = $("#fileName").val().trim();
                if (fileName === "") {
                    fileName = "Generated Barcode";
                }
                var downloadLink = $("<a>").attr({
                    href: $("#barcodeImage").attr("src"),
                    download: fileName + ".png",
                    style: "display: none;"
                }).appendTo("body");
                downloadLink [0].click();
                downloadLink.remove();
            });
        });
    </script>
}

Standardmäßige Formularübermittlung verhindern: Wenn das Formular übermittelt wird, wird die Standardaktion (die die Seite neu laden würde) verhindert. Dadurch kann stattdessen eine asynchrone Anfrage gestellt werden, so dass der Benutzer auf derselben Seite bleibt, was zu einem reibungsloseren Ablauf führt.

Sammlung von Formulardaten: Die Formulardaten, einschließlich der Eingaben für Barcodedaten, Typ, Abmessungen und Farbe, werden in einem FormData-Objekt gesammelt. Dieser Ansatz ist besonders nützlich für den Umgang mit Dateiuploads oder Daten, die Sonderzeichen enthalten, ohne dass die Daten manuell kodiert werden müssen.

AJAX-Anfrage: Mit der $.ajax-Methode von jQuery wird eine asynchrone Anfrage an den Server gestellt. Die URL wird dynamisch generiert, um dem Handler der Razor-Seite für das Hochladen ("Index", "Upload") zu entsprechen und sicherzustellen, dass die Formulardaten von der korrekten serverseitigen Methode verarbeitet werden. Die Optionen processData: false und contentType: false sind bei der Übermittlung von FormData-Objekten erforderlich, um zu verhindern, dass jQuery die Daten umwandelt, damit der Server das Format multipart/form-data korrekt interpretieren kann.

Erfolgsbehandlung: Bei erfolgreicher Antwort zeigt das Skript den Nachrichtencontainer an und aktualisiert seinen Inhalt auf der Grundlage der Antwort des Servers. Wenn die Antwort einen Erfolg anzeigt und einen Bildpfad enthält, aktualisiert das Skript das src-Attribut des Barcode-Bildes und zeigt es an. Eine Zeitüberschreitung ist so eingestellt, dass die Meldung nach 3 Sekunden automatisch ausgeblendet wird, um die Benutzeroberfläche aufzuräumen.

Fehlerbehandlung: Im Falle eines Fehlers bei der Anfrage wird eine Fehlermeldung auf der Konsole protokolliert. Diese grundlegende Handhabung könnte erweitert werden, um dem Benutzer direkt in der Benutzeroberfläche Feedback zu geben.

Klick auf die Download-Schaltfläche: Wenn die Download-Schaltfläche angeklickt wird, prüft das Skript, ob ein Dateiname vom Benutzer eingegeben wurde. Ist dies nicht der Fall, wird der Standardwert "Generierter Barcode" verwendet.

Erstellen eines Download-Links: Ein temporäres <a>-Element wird erstellt und so konfiguriert, dass das href-Attribut auf die Quelle des Barcode-Bildes zeigt und das download-Attribut auf den gewünschten Dateinamen gesetzt wird (mit der Endung ".png", damit das erwartete Bildformat übereinstimmt). Der Link ist nicht sichtbar, da er nicht als Teil des Seitenlayouts angezeigt werden soll.

Auslösen des Downloads: Das Skript klickt programmatisch auf den Link und veranlasst den Browser, die Bilddatei herunterzuladen. Danach wird der temporäre Link aus dem Dokument entfernt, um es zu bereinigen.

Dieses Skript interagiert direkt mit den HTML-Elementen, die in den vorangegangenen Schnipseln definiert wurden, wie z. B. dem Formular für die Eingabe von Barcodedaten, dem Nachrichtencontainer für Rückmeldungen und dem Bildcontainer für die Anzeige des generierten Barcodes. Es macht die Anwendung dynamisch und ermöglicht die asynchrone Generierung und den Abruf von Barcodes ohne Neuladen der Seite und bietet einen intuitiven Mechanismus für die Benutzer zum Herunterladen der generierten Barcode-Bilder.

Schritt 4: Schreiben von funktionalem Code

Farbe definieren

Oben auf der Seite fügen wir die folgende Zeile ein:

using Color = IronSoftware.Drawing.Color;

Es wird helfen, den Code zu verstehen, den wir verwenden, also IronSoftware.Drawing.Color zu verstehen, die wir verwenden, um Farbe in unseren Code zu setzen.

Design Barcode Farben Enum

In der Datei index.cshtml ist die Definition eines Enums mit dem Namen BarcodeColors eine wichtige Komponente für die Angabe der Farboptionen, die für die Erstellung von Barcodes zur Verfügung stehen. Diese Aufzählung listet verschiedene Farbnamen auf, die den vordefinierten Farben in IronDrawing entsprechen.

public enum BarcodeColors

{

    AliceBlue,

    AntikWeiß,

    Aqua,

    Aquamarin,

    Azurblau,

    Beige,

    Biskuit,

    // Hinweis: IronDRAWING unterstützt eine große Auswahl an Farben für Barcodes. Eine vollständige Liste finden Sie in der offiziellen Dokumentation.

}

In dem HTML-Formular auf Ihrer Razor-Seite (index.cshtml) haben Sie ein Eingabefeld für die Barcode-Farbe mit einer zugehörigen Datenliste hinzugefügt. Diese Datenliste wird dynamisch mit Optionen basierend auf dem BarcodeColors-Enum gefüllt.

Barcode-Typen Enum

Die Aufzählung BarcodeTypes spielt, ähnlich wie die Aufzählung BarcodeColors, eine wichtige Rolle bei der Definition der verschiedenen Arten von Strichcodes, die Benutzer in Ihrer Anwendung erzeugen können. Diese Enumeration listet eine Vielzahl von Barcode-Formaten auf, einschließlich sowohl eindimensionaler (1D) als auch zweidimensionaler (2D) Barcodes, die eine breite Palette von Anwendungsfällen und Industriestandards bedienen.

public enum BarcodeTypes

{

    Azteke,

    Codabar,

    Code128,

    Code39,

    Code93,

    DataMatrix,

    EAN13,

    EAN8,

    ITF,

    MSI,

    PDF417,

    Plessey,

    QRCode,

    UPCA,

    UPCE

}

Im Frontend, insbesondere auf Ihrer Razor-Seite (index.cshtml), wird dieses Enum verwendet, um ein Dropdown-Menü (über eine Datalist) zu füllen, das es den Benutzern ermöglicht, das gewünschte Barcode-Format zur Generierung auszuwählen.

EnumToColor-Helferfunktion

Diese Hilfsfunktion, EnumToColor, wurde entwickelt, um Enum-Werte von BarcodeColors in ihre entsprechenden IronSoftware.Drawing-Objekte zu konvertieren. Diese Konvertierung ist wichtig für die Backend-Verarbeitung in Ihrer Anwendung, bei der die ausgewählte Farbe für einen Barcode von der Auswahl des Benutzers in eine Farbe umgewandelt werden muss, die bei der Erzeugung des Barcode-Bildes angewendet werden kann.

private Color EnumToColor(BarcodeColors colorEnum)

{

    return colorEnum Schalter

    {

        BarcodeColors.AliceBlue => Color.AliceBlue,

        BarcodeColors.AntiqueWhite => Color.AntiqueWhite,

        BarcodeColors.Aqua => Color.Aqua,

        BarcodeColors.Aquamarin => Farbe.Aquamarin,

        BarcodeColors.Azure => Color.Azure,

        BarcodeColors.Beige => Farbe.Beige,

        BarcodeColors.Bisque => Color.Bisque,

        _ => Farbe.Schwarz, // Standard- oder Ausweichfarbe

//und so weiter!

    };

}

Die Funktion nimmt einen Parameter vom Typ BarcodeColors entgegen, der die vom Benutzer gewählte Farbe für den Strichcode darstellt. Sie gibt ein IronSoftware.Drawing-Objekt zurück, das dem übergebenen Enum-Wert entspricht.

Die Funktion verwendet einen Switch-Ausdruck, ein Feature, das in C# 8.0 eingeführt wurde, um den Parameter colorEnum mit jedem möglichen BarcodeColors-Enum-Wert abzugleichen. Für jeden Fall im Switch-Ausdruck wird das System.Drawing.Color-Objekt zurückgegeben, das dem Namen des Enum-Werts entspricht. Wenn zum Beispiel BarcodeColors.AliceBlue übergeben wird und Color.AliceBlue zurückgegeben wird.

Der Schalterausdruck deckt alle definierten Farben im BarcodeColors-Enum ab und stellt sicher, dass jede ausgewählte Farbe genau in ein IronSoftware.Drawing-Objekt übersetzt werden kann. Wenn der Enum-Wert keinem Fall entspricht (was nicht passieren sollte, wenn alle Fälle abgedeckt sind), gibt der Standardfall Color.Black als Fallback zurück.

Barcode-Typ-Helferfunktion

Die Funktion GetBarcodeEncoding ist ein wesentlicher Bestandteil der Backend-Logik in Ihrer Anwendung. Sie wurde entwickelt, um den ausgewählten Barcode-Typ aus einem benutzerfreundlichen Enum (BarcodeTypes) auf die spezifische Codierung abzubilden, die von der Barcode-Generierungsbibliothek benötigt wird (hier als BarcodeWriterEncoding bezeichnet).

private BarcodeWriterEncoding GetBarcodeEncoding(BarcodeTypes barcodeType)

{

    return barcodeType switch

    {

        BarcodeTypes.Aztec => BarcodeWriterEncoding.Aztec,

        BarcodeTypes.Codabar => BarcodeWriterEncoding.Codabar,

        BarcodeTypes.Code128 => BarcodeWriterEncoding.Code128,

        BarcodeTypes.Code39 => BarcodeWriterEncoding.Code39,

        BarcodeTypes.Code93 => BarcodeWriterEncoding.Code93,

        BarcodeTypes.DataMatrix => BarcodeWriterEncoding.DataMatrix,

        BarcodeTypes.EAN13 => BarcodeWriterEncoding.EAN13,

        BarcodeTypes.EAN8 => BarcodeWriterEncoding.EAN8,

        BarcodeTypes.ITF => BarcodeWriterEncoding.ITF,

        BarcodeTypes.MSI => BarcodeWriterEncoding.MSI,

        BarcodeTypes.PDF417 => BarcodeWriterEncoding.PDF417,

        BarcodeTypes.Plessey => BarcodeWriterEncoding.Plessey,

        BarcodeTypes.QRCode => BarcodeWriterEncoding.QRCode,

        BarcodeTypes.UPCA => BarcodeWriterEncoding.UPCA,

        BarcodeTypes.UPCE => BarcodeWriterEncoding.UPCE,

        _ => BarcodeWriterEncoding.QRCode, // Standard- oder Ersatzkodierung

    };

}

Die Funktion akzeptiert einen Parameter vom Typ BarcodeTypes, der die Auswahl des Barcodeformats durch den Benutzer darstellt. Sie gibt einen Wert von BarcodeWriterEncoding zurück, der direkt den von der Barcode-Erzeugungsbibliothek unterstützten Codierungstypen entspricht.

Unter Verwendung eines Switch-Ausdrucks gleicht diese Funktion den Parameter barcodeType mit jedem definierten Wert in der Aufzählung BarcodeTypes ab. Für jeden Fall im switch-Ausdruck wird der entsprechende BarcodeWriterEncoding-Wert zurückgegeben. Wenn zum Beispiel BarcodeTypes.Code128 übergeben wird und die Funktion BarcodeWriterEncoding.Code128 zurückgibt.

Dieser umfassende Schalterausdruck stellt sicher, dass jedes vom Benutzer auswählbare Barcodeformat einen entsprechenden Codierungstyp hat, den die Bibliothek zur Barcodeerzeugung verwenden kann. Der Standardfall gibt BarcodeWriterEncoding.QRCode als Fallback zurück. Bei der Wahl der Standardeinstellung wird davon ausgegangen, dass QR-Codes eine gängige und weit verbreitete Wahl sind; das Standardverhalten könnte jedoch an die Anforderungen Ihrer Anwendung angepasst werden oder sogar eine Ausnahme auslösen, wenn ein nicht unterstützter Barcodetyp angetroffen wird.

Hinzufügen der Eigenschaften Nachricht und BarcodeImageUrl

Diese Eigenschaften werden verwendet, um das Ergebnis von Operationen (wie z.B. der Barcode-Generierung) an die Razor-Seite (die .cshtml-Datei) zurückzumelden und um die URL des generierten Barcode-Bildes zu speichern. In Ihrer Razor-Seite können Sie auf diese Eigenschaften zugreifen, um die Nachricht und das Barcode-Bild für den Benutzer anzuzeigen.

öffentliche Zeichenfolge Nachricht { erhalten;  gesetzt; }

public string BarcodeImageUrl { get;  gesetzt; }

OnPostUpload Funktionssignatur

Dies ist die Signatur eines HTTP POST Handlers in einer ASP.NET Core Razor Pages-Anwendung. Es wurde entwickelt, um auf ein Formular zu reagieren, das zur Erzeugung von Strichcodes eingereicht wurde.

public JsonResult OnPostUpload(string barcodeText, string barcodeType, int? maxWidth, int? maxHeight, string barcodeColor, string correctionLevel)

{

}

Die Funktion erhält mehrere Parameter aus dem Formular:

barcodeText: Die Daten, die im Barcode kodiert werden sollen.

barcodeType: Der Typ des Barcodes, der erstellt werden soll (z.B. QR-Code, Code128).

maxWidth und maxHeight: Optionale Parameter zur Angabe der Abmessungen des erzeugten Barcodes.

barcodeColor: Die Farbe für den Strichcode.

correctionLevel: Wird in dem bereitgestellten Snippet nicht verwendet, bezieht sich aber in der Regel auf die Fehlerkorrekturstufe für bestimmte Barcodetypen wie QR-Codes.

Kodierungsauswahl und Barcodeerzeugung

Jetzt ist es an der Zeit, die Logik zu implementieren. Hier ist der Skriptcode:

BarcodeWriterEncoding encoding = BarcodeWriterEncoding.QRCode; // Standardmäßig QRCode

// Versuch, den BarcodeType in das entsprechende BarcodeTypes-Enum zu zerlegen

if (Enum.TryParse<BarcodeTypes>(barcodeType, true, out var barcodeTypeEnum))

{

encoding = GetBarcodeEncoding(barcodeTypeEnum);

}

sonst

{

    // Behandelt den Fall, dass barcodeType keinem Enum-Wert entspricht

return new JsonResult(new { success = false, message = "Ungültiger Barcode-Typ ausgewählt." });

}

var myBarcode = BarcodeWriter.CreateBarcode(barcodeText, encoding);

Zu Beginn wird eine Standard-Barcode-Kodierung eingestellt. Die Funktion versucht, die Zeichenkette barcodeType in die Aufzählung BarcodeTypes zu zerlegen. Wenn erfolgreich, wird GetBarcodeEncoding aufgerufen, eine Hilfsfunktion, die BarcodeTypes auf die spezifische Kodierung abbildet, die von der Barcode-Schreiber-Bibliothek (BarcodeWriterEncoding) benötigt wird. Wenn der BarcodeType ungültig ist, wird ein Fehler zurückgegeben. Dann wird der Barcode mit dem angegebenen Text und der Kodierung erzeugt.

Farbkonvertierung und Barcode-Anpassung

Dieser Teil dient der Anpassung von Farbe und Größe des Strichcodes. Zunächst wird geprüft, ob eine Farbe angegeben wurde. Wenn dies der Fall ist, wird versucht, diese Farbe in die Aufzählung BarcodeColors zu zerlegen und dann mit der Hilfsfunktion EnumToColor in ein System.Drawing.Color-Objekt zu konvertieren. Wenn die Farbe ungültig ist, wird ein Fehler zurückgegeben. Wenn sowohl maxWidth als auch maxHeight angegeben sind, wird die Größe des Strichcodes auf diese Maße angepasst.

// Konvertieren Sie die Zeichenkette barcodeColor in ein Color-Objekt

if (!string.IsNullOrEmpty(barcodeColor))

{

    // Versuch, die BarcodeColor in das entsprechende BarcodeColors-Enum zu zerlegen

if (Enum.TryParse<BarcodeColors>(barcodeColor, true, out var barcodeColorEnum))

    {

        // Umwandlung der Aufzählung in ein Farbobjekt

var farbe = EnumToColor(barcodeColorEnum);

myBarcode.ChangeBarCodeColor(color, true);

    }

    sonst

    {

        // Behandelt den Fall, dass barcodeType keinem Enum-Wert entspricht

return new JsonResult(new { success = false, message = "Ungültige Farbe ausgewählt." });

    }

}

wenn (maxWidth.HasValue && maxHeight.HasValue)

{

myBarcode.ResizeTo(maxWidth.Value, maxHeight.Value);

}

Speichern und Zurückgeben des Barcode-Bildes

Schließlich wird das erzeugte Barcode-Bild auf dem Server gespeichert. Um Namenskonflikte zu vermeiden, wird ein eindeutiger Dateiname unter Verwendung des aktuellen Zeitstempels erstellt. Der Barcode wird in einem speziellen Verzeichnis (wwwroot/barcodes) gespeichert, das erstellt wird, wenn es noch nicht existiert. Nach dem Speichern des Bildes wird eine Erfolgsmeldung vorbereitet, und eine JSON-Antwort wird zurückgegeben, die den Erfolgsstatus, die Nachricht und den Pfad zum generierten Barcode-Bild enthält. So kann die clientseitige Anwendung den generierten Barcode anzeigen oder dem Benutzer einen Link zum Herunterladen zur Verfügung stellen.

// Der Rest Ihres Codes zum Speichern und Zurückgeben des Barcode-Bildes...

var barcodesFolderPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "barcodes");

Directory.CreateDirectory(barcodesFolderPath);

var fileName = $"barcode_{DateTime.Now:yyyyMMddHHmmssfff}.png";

var filePath = Path.Combine(barcodesFolderPath, fileName);

myBarcode.SaveAsImage(filePath);

this.Message = $"QR Code erfolgreich generiert. Dateiname: {fileName}";

return new JsonResult(new { success = true, message = Message, imagePath = $"/barcodes/{fileName}" });

_Layout.cshtml bearbeiten

In der Datei _Layout.cshtml entfernen wir die Kopf- und Fußzeilen-Tags, damit unsere Anwendung gut und minimalistisch aussieht. So wird die endgültige Datei _Layout.cshtml aussehen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData ["Title"] - Barcode_Generator_Razor</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Barcode_Generator_Razor.styles.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Anwendung ausführen

Sie können Ihre Anwendung starten, indem Sie auf den grünen Pfeil "Start" klicken oder F5 drücken, um das Debugging zu starten. Wenn Sie es vorziehen, ohne den Debugger zu starten, drücken Sie Strg + F5.

Beginnen Sie, indem Sie die Informationen eingeben, die Sie in den Barcode kodieren möchten. Dies kann ein beliebiger Text oder eine URL sein, den/die Sie in ein Barcodeformat umwandeln möchten. Klicken Sie auf das Dropdown-Menü mit der Bezeichnung "Barcode-Typ". Es wird eine Liste mit verschiedenen Barcodeformaten angezeigt. Hier können Sie die Liste filtern und den für Sie passenden Barcodetyp auswählen. Sie könnten zum Beispiel "Aztec" oder "QR-Code" aus der Liste auswählen.

Suchen Sie nach den Feldern mit der Bezeichnung "Maximale Breite (px)" und "Maximale Höhe (px)". Hier geben Sie die maximalen Abmessungen für Ihren Barcode ein, um sicherzustellen, dass er die richtige Größe für Ihre Anwendung hat. Versuchen Sie, für beide Werte 300 einzugeben, damit der Strichcode groß genug ist, um leicht gescannt werden zu können, aber nicht zu groß, um auf das gewünschte Medium zu passen.

Klicken Sie auf das Dropdown-Menü "Farbe für Barcode". Es wird eine Liste mit Farboptionen angezeigt, ähnlich wie bei der Auswahl des Barcodetyps. Sie können scrollen, um alle Farben zu sehen, oder mit der Eingabe beginnen, um eine bestimmte Farbe wie "AliceBlue" zu finden.

Nachdem alle Felder ausgefüllt wurden, klicken Sie auf die Schaltfläche "Barcode generieren". Die Webanwendung verwendet die von Ihnen bereitgestellten Daten, um ein Barcode-Bild zu erstellen, das auf dem Bildschirm erscheint. Es wird auf der Seite des Eingabeformulars angezeigt. Wir haben diesen Abschnitt in unserem Frontend-Code als Bildspalte bezeichnet.

Sie können die Farbe des Barcodes erneut ändern, indem Sie eine andere Farbe auswählen und auf die Schaltfläche "Barcode generieren" klicken.

Wenn Sie mit dem auf dem Bildschirm angezeigten generierten Barcode zufrieden sind, sehen Sie eine Option, um einen Dateinamen einzugeben. Nachdem Sie Ihre Datei benannt haben, klicken Sie auf die Schaltfläche "Herunterladen", um das Barcode-Bild auf Ihrem Computer zu speichern. Wenn Sie den Barcode-Ordner in Ihrem Projekt überprüfen, sehen Sie die generierten Barcodes in diesem Ordner.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass die Barcode-Generator-Webanwendung eine unkomplizierte Möglichkeit bietet, benutzerdefinierte Barcodes zu erstellen. Die Benutzer können ganz einfach Daten eingeben, einen Barcodetyp auswählen, die Größe festlegen und eine Farbe auswählen, bevor sie einen Barcode erstellen, der ihren speziellen Anforderungen entspricht. Dieses Tool ist auf Einfachheit ausgelegt und ermöglicht die schnelle Erstellung und Anpassung von Strichcodes. IronBarcode, die Bibliothek, die diese Anwendung antreibt, bietet eine kostenlose Testversion an, damit Benutzer ihre Funktionen testen können. Wenn Sie feststellen, dass das Tool Ihren Anforderungen entspricht, können Sie eine Lizenz ab $749 erwerben, die die vollständigen Funktionen von IronBarcode für Ihre Projekte freischaltet.

Um QR-Code-Bilder in Ihrer Webanwendung zu generieren, empfehle ich, IronQR für diesen Zweck zu verwenden, da es speziell für die Handhabung von QR-Codes entwickelt wurde.